Natpakan Sirirat · Nattapakan · Tan · TanPlanet
UX/UI Designer & Frontend Developer · ประเทศไทย
สวัสดีครับ ผม ณัฐปคัลภ์ ศิริรัตน์ (แทน) UX/UI Designer & Frontend Developer — ชอบ Design System และ AI-Assisted Design รวมผลงาน Side Projects ที่ผสม Design Thinking เข้ากับ Code
ลองค้นด้วยคำอื่น หรือเปลี่ยน filter ดู
โยนรูปลง Inbox แล้วเครื่องแยกเองว่าเป็นสลิป สกรีนช็อต หมา แมว ต้นไม้ หรือท้องฟ้า ด้วย Vision framework บนเครื่อง + Tailscale ให้ iPhone ส่งเข้า HDD ที่บ้านได้จากทุกที่
ไฟล์เดียว ดับเบิลคลิกแล้วรัน — ดึงงาน Jira มาติ๊กงานวันนี้ ตั้งเวลา ลง Google Calendar พร้อมโน้ตแบบ Notion ผู้ช่วย AI และร่าง standup ที่มีที่มาเดียว
ใบแจ้งค่าไฟเข้าเมล ยอดลงชีตเป็นสูตรที่ตรวจย้อนได้ แล้วบิลพร้อม QR พร้อมเพย์เด้งเข้า LINE ตามเวลา โดยมีด่านตรวจ 6 ข้อก่อนส่งทุกครั้ง
ตั้งสายตาผู้อ่านอายุ 60 เป็นข้อจำกัดตั้งต้น — ไทม์ไลน์แนวตั้ง ตัวใหญ่ คอนทราสต์สูง เขียวสน-ดินเผาแทนฟ้าเทอร์ควอยซ์ และเช็กลิสต์ที่ติ๊กแล้วจำค่าไว้
งาน revamp เว็บคลับระดับพรีเมียมที่ความเสี่ยงอันดับหนึ่งคืองานดูเหมือนเทมเพลต — รายการสิ่งต้องห้าม, token OKLCH ไฟล์เดียว, ตัวตรวจคอนทราสต์ และ demo-first
วางกลยุทธ์ product ของช่องคลิปความรู้ที่ผลิตด้วย AI — วิเคราะห์ว่าอะไรทำให้คอนเทนต์ AI ถูกเลื่อนผ่าน แล้วล็อก format, กติกาภาพ และวัดต้นทุนต่อคลิปจากการทดลองจริง
Chrome extension แคปหน้าหนังสือจากภาพที่เห็นจริงบนจอ กด next เอง ตรวจหน้าซ้ำ 2 ชั้น แล้วเย็บเป็น PDF ในหน่วยความจำ — 4 โหมดเก็บ ไม่มีไลบรารี PDF ไม่แตะ DRM
จอ 3.5" ฿640 + backend บน Mac — ปฏิทินไทย จันทรคติ อากาศ ดวงลงทุน พอร์ตหุ้น โควตา AI และสถานะ Claude Code รวมเป็นการ์ด 12 ใบที่แตะดูได้ ด้วย LVGL 9 และฟอนต์ไทยที่เจนเอง
Chrome extension (Manifest V3) ดัก media stream ในหน้าเว็บ — แยก HLS master/variant, เก็บ header จริง, ประกอบคำสั่ง yt-dlp ให้ก๊อปวางโหลดได้ทันที
ระบบ AI coach ส่วนตัวจัดพอร์ตหุ้น US + LIFF dashboard + เตือน DCA/stop/RMF ทาง LINE โดยตัวเลขเงินเข้ารหัส zero-knowledge (AES-256-GCM) ในเครื่องก่อนขึ้น cloud
รวม Kanban, ปฏิทิน, CRM, ใบเสนอราคา/เบิกจ่าย และโน้ตประชุม AI ไว้ที่เดียว — automation ขับด้วย serverless cron, ออกแบบ multi-tenant (org_id + RLS) ตั้งแต่ migration แรก
เว็บแอปดูดวงสาจูเกาหลี (사주팔자) ภาษาไทย ที่แยก "คำนวณ" (Python engine ฝังข้อมูลดาราศาสตร์ KASI) ออกจาก "เล่า" (ตัวละคร AI อาแปะ อ่านดวงเป็นกระจก ไม่ฟันธง)
เว็บ catalog + lookbook แบบไม่มีตะกร้า/ไม่มี checkout — ลูกค้าเลือกสี-ไซซ์แล้ว deep-link เข้า LINE พร้อมข้อความ pre-filled จัดการสินค้าเองด้วย Payload CMS
เว็บ full-stack 2 ภาษา (Next.js + Sanity CMS) สำหรับโรงพยาบาลเฉพาะทางช่วง pre-opening พร้อมระบบรับสมัครงาน (ATS) ที่สร้าง PDF ใบสมัครภาษาไทยด้วย headless Chrome ส่งเข้าเมล HR
Chrome extension (MV3 Side Panel) + CMS หลังบ้าน — scrape ข้อมูลสินค้า → ประกอบ system prompt (BYOK LLM) → automate เว็บสร้างวิดีโอ AI ที่ไม่มี public API ผ่าน CDP
VS Code / Cursor extension ที่ยกงาน /model ออกมาเป็น panel หน้าตาคันเกียร์รถ (H-pattern) — โยกเกียร์ = สลับโมเดล, sync สถานะจริงจาก transcript + สวิตช์เสียงแจ้ง task เสร็จ
เครื่องมือผลิตวิดีโอ UGC ขายของแนวตั้งจากรูปสินค้า + brief สั้นๆ — AI วางแผนช็อต → สร้างฟุตเทจ → พากย์ไทย + timestamp → ตัดต่อ keyword เด้งตรงจังหวะพูดด้วย Remotion
แพลตฟอร์มไลฟ์คอมเมิร์ซด้วย AI Avatar สำหรับ SME ไทย — integration/orchestration layer เหนือ Avatar Engine (TTS/lip-sync/render/RAG) ออกแบบ multi-tenant + OIDC
Desktop app (Electron) ฝัง browser ดูไลฟ์ + อ่านอารมณ์/ความสนใจของโฮสต์ด้วย Python ML บนเครื่อง ส่งเฉพาะ derived signal ขึ้น cloud ที่เข้ารหัส + ทำ PDPA compliance ครบ
เว็บ marketing ของ แพลตฟอร์มไลฟ์ AI Avatar (3 ผลิตภัณฑ์) migrate จาก template HTML/jQuery มาเป็น Vue 3 + Vite SSG — prerender static, interactive component, รันด้วย Docker + nginx
เดสก์ท็อปแอป (Electron) ที่แพ็ก Go backend + ffmpeg streaming engine + React SPA เป็นแอปเดียว — สตรีมออก RTMP พร้อม overlay, chat สด, ปักตะกร้า รันบนเครื่อง seller ทั้งหมด
งานวิจัย Computer Vision (R&D prototype) ประกอบ 4 โมเดล (MTCNN → FaceNet → ViT/FER → MediaPipe) เป็นไปป์ไลน์ real-time อ่านอารมณ์ + engagement ของโฮสต์ไลฟ์ รันในเครื่องล้วน
LINE chatbot สำหรับฟาร์มไก่สาว เตือนคนงานในกลุ่ม LINE 3 มื้อ/วัน, กรอกรายงานผ่าน LIFF, เก็บลง Google Sheets อัตโนมัติ — ระบบครบ loop ใน 1 session
แอปหารบิลทริปกับเพื่อน — สแกน QR เข้าร่วม ลงค่าใช้จ่าย ระบบบอกเลยว่าใครโอนใคร พร้อมลดทอนหนี้ให้โอนน้อยครั้งที่สุด
Internal Portal รวม 8 แผนกในระบบเดียว สำหรับกลุ่มบริษัท Real Factory — ออกแบบ UX/UI ให้ทุกทีมใช้งานได้จริง
ระบบค้นคว้ากฎหมายไทย 84K+ มาตราด้วย RAG + GPT-4o — ถามเป็นภาษาคน ได้คำตอบพร้อม Citation Cards อ้างอิงมาตราจริง
Chrome Extension ที่ช่วย UX Designer inspect element บนเว็บ แล้ว copy เป็น Markdown สำหรับ Claude AI ได้ทันทีในคลิกเดียว
รวมทุก Skill, Plugin, MCP Server ที่ติดตั้งไว้ใน Claude Code — Source of Truth พร้อม Search, Filter, Highlight
ออกแบบ UI/UX ร้านดอกไม้ออนไลน์ — Buyer Portal สั่งช่อ customize เอง + Seller Portal dashboard จัดการร้าน ออเดอร์ สต๊อก
เว็บไซต์ Digital Marketing Agency — Live Commerce, Influencer Marketing, Event Organization สร้างด้วย Webflow พร้อม pricing packages
เครื่องมือแก้ปัญหาที่คนไทยเจอทุกวัน — พิมพ์ผิดภาษาแล้วแปลงกลับทันที พร้อม Self-Learning Dictionary ที่ยิ่งใช้ยิ่งเก่ง
แอปดูดวงรายวันที่ผสานศาสตร์โบราณกับ AI — ออกแบบเป็นทีม 3 คน สร้าง Design System จาก 0 พร้อม 40+ หน้าจอใน 4 สัปดาห์
แพลตฟอร์มที่เชื่อมเกษตรกรกับผู้บริโภคโดยตรง — ออกแบบ 4 User Roles (Buyer/Seller/Affiliate/Admin) ครบทั้ง Ecosystem ใน 3 เดือน
ทดลองเอา ThemeForest template เปล่ามาสร้างเว็บ Fine Dining Restaurant ด้วย AI — ได้เรียนรู้ว่า Layout ไวขึ้น แต่ต้องใส่ตัวตนเข้าไปมากกว่าเดิม
Taiwan Travel Guide แบบ Interactive — Taipei → Kaohsiung via HSR พร้อม Budget Calculator, Transit Map และ Daily Itinerary แบบ Bilingual (TH/EN)
LINE Bot ส่งผลบอล EPL + ตาราง + Top Scorers ทุกเช้า พร้อม AI Daily Blessing สร้างคำอวยพรด้วย GPT-4o-mini และ Color Card ตามวัน
Dashboard แสดงสถิติจอดรถ Real-time จาก Google Sheets — กราฟ Location, Floor Distribution, Arrival Time Trends พร้อม Auto-refresh ทุก 5 นาที
Portfolio เล่ากระบวนการ Design Thinking ในการสร้าง LINE Bot สำหรับแฟนบอล Liverpool/EPL ตั้งแต่ Research จนถึง Implementation
Portfolio เล่ากระบวนการ Design Thinking ของ Parking Reminder App — ตั้งแต่ Pain Points, User Research, Ideation ไปจนถึง Prototype
Portfolio เล่ากระบวนการออกแบบ Taiwan Travel Guidebook ตั้งแต่ Research, Persona, Pain Points ไปจนถึง Solution Design
เชื่อม Claude Code กับ Figma ผ่าน MCP — สร้าง UI, Design System, UX Review ด้วยคำสั่งเดียว พร้อม Custom Skills 13 ตัวและ Docs Website
Script อัตโนมัติ ใช้ Playwright แคปโพสจาก Mandala Cosmostrend — แบ่งหมวด Travel, Food, Horoscope, Sci-Tech ครั้งละ 150 โพส
เพจที่สร้างขึ้นหลังแยกตัวจากทีมเดิม — รวมคอนเทนต์ บทความ และผลงานเขียนส่วนตัวไว้ในที่เดียว