ณัฐปคัลภ์ ศิริรัตน์ (Natpakan Sirirat) — UX/UI Designer

ณัฐปคัลภ์ ศิริรัตน์

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

UX/UI Design LINE Bot React Google Apps Script Design Thinking
Projects
🔍

ไม่พบ project ที่ตรงกับคำค้นหา

ลองค้นด้วยคำอื่น หรือเปลี่ยน filter ดู

New 🏢
Enterprise Case Study

Portal Realfact — Digital OS สำหรับกลุ่มบริษัท

Internal Portal รวม 8 แผนกในระบบเดียว สำหรับกลุ่มบริษัท Real Factory — ออกแบบ UX/UI ให้ทุกทีมใช้งานได้จริง

Enterprise Internal Tools UX/UI Design Case Study
New 🎨
Interactive Encyclopedia

The Secret Lives of Color

สารานุกรมสี 75 เฉด + Glossary 130 สี จากหนังสือ Kassia St. Clair — เรื่องราวเบื้องหลังทุกสีในประวัติศาสตร์ สองภาษา ไทย-อังกฤษ

VitePress Design Bilingual 75 Colors Dark Mode
New
AI Web App — POC

Legal AI

ระบบค้นคว้ากฎหมายไทย 84K+ มาตราด้วย RAG + GPT-4o — ถามเป็นภาษาคน ได้คำตอบพร้อม Citation Cards อ้างอิงมาตราจริง

React 19 Supabase GPT-4o RAG pgvector
New 🔍
Chrome Extension

Design Inspector for Claude

Chrome Extension ที่ช่วย UX Designer inspect element บนเว็บ แล้ว copy เป็น Markdown สำหรับ Claude AI ได้ทันทีในคลิกเดียว

Chrome Extension Shadow DOM Manifest V3 AI Workflow
New 🧠
Developer Tool

Claude Code Skills Registry

รวมทุก Skill, Plugin, MCP Server ที่ติดตั้งไว้ใน Claude Code — Source of Truth พร้อม Search, Filter, Highlight

Claude Code Skills MCP BMAD Registry
New 💐
UI/UX Design

Voraya's Bloom

ออกแบบ UI/UX ร้านดอกไม้ออนไลน์ — Buyer Portal สั่งช่อ customize เอง + Seller Portal dashboard จัดการร้าน ออเดอร์ สต๊อก

Figma UI/UX E-commerce Buyer Portal Seller Portal
New 🎯
Web Design — Webflow

PeepzTeam

เว็บไซต์ Digital Marketing Agency — Live Commerce, Influencer Marketing, Event Organization สร้างด้วย Webflow พร้อม pricing packages

Webflow Live Commerce Influencer Event
⌨️
Concept / macOS Utility

Thai Typo Fixer — ลืมเปลี่ยนภาษา? กดปุ่มเดียวจบ

เครื่องมือแก้ปัญหาที่คนไทยเจอทุกวัน — พิมพ์ผิดภาษาแล้วแปลงกลับทันที พร้อม Self-Learning Dictionary ที่ยิ่งใช้ยิ่งเก่ง

Python Swift macOS Self-Learning
🔮
UX/UI Design / Team Collab

Daily MU — ปฏิทินดูแลใจ ที่เข้าใจคุณ

แอปดูดวงรายวันที่ผสานศาสตร์โบราณกับ AI — ออกแบบเป็นทีม 3 คน สร้าง Design System จาก 0 พร้อม 40+ หน้าจอใน 4 สัปดาห์

Figma Design System AI-Powered Team Collab
🌾
UX/UI Design / E-Commerce

BuyDi — E-Commerce เพื่อเกษตรกรไทย

แพลตฟอร์มที่เชื่อมเกษตรกรกับผู้บริโภคโดยตรง — ออกแบบ 4 User Roles (Buyer/Seller/Affiliate/Admin) ครบทั้ง Ecosystem ใน 3 เดือน

E-Commerce Multi-Role Figma Responsive
New 🍽️
Experiment / POC

FoodLab — Template to Fine Dining

ทดลองเอา ThemeForest template เปล่ามาสร้างเว็บ Fine Dining Restaurant ด้วย AI — ได้เรียนรู้ว่า Layout ไวขึ้น แต่ต้องใส่ตัวตนเข้าไปมากกว่าเดิม

ThemeForest AI-Assisted Web Customization POC
🇹🇼
Interactive Travel Guide

คู่มือเที่ยวไต้หวัน 6D5N

Taiwan Travel Guide แบบ Interactive — Taipei → Kaohsiung via HSR พร้อม Budget Calculator, Transit Map และ Daily Itinerary แบบ Bilingual (TH/EN)

HTML5 CSS JavaScript Vercel Bilingual
LINE Bot Automation

น้องกริ่ง EPL Bot + Daily Blessing

LINE Bot ส่งผลบอล EPL + ตาราง + Top Scorers ทุกเช้า พร้อม AI Daily Blessing สร้างคำอวยพรด้วย GPT-4o-mini และ Color Card ตามวัน

Google Apps Script LINE API OpenAI GPT-4o Football API
🅿️
Web App — Data Visualization

Carpark Live Dashboard

Dashboard แสดงสถิติจอดรถ Real-time จาก Google Sheets — กราฟ Location, Floor Distribution, Arrival Time Trends พร้อม Auto-refresh ทุก 5 นาที

React Recharts Vite Google Sheets
🤖
Design Thinking Case Study

Cody — LINE Bot for Football Fans

Portfolio เล่ากระบวนการ Design Thinking ในการสร้าง LINE Bot สำหรับแฟนบอล Liverpool/EPL ตั้งแต่ Research จนถึง Implementation

Design Thinking LINE Bot UX Research Case Study
📍
Design Thinking Case Study

วันนี้จอดรถที่ไหน?

Portfolio เล่ากระบวนการ Design Thinking ของ Parking Reminder App — ตั้งแต่ Pain Points, User Research, Ideation ไปจนถึง Prototype

Design Thinking UX Research Prototype Case Study
✈️
Design Thinking Case Study

Taiwan Guidebook — Design Process

Portfolio เล่ากระบวนการออกแบบ Taiwan Travel Guidebook ตั้งแต่ Research, Persona, Pain Points ไปจนถึง Solution Design

Design Thinking UX Research Travel Case Study
🎨
AI + Design Tooling

Talk to Figma MCP

เชื่อม Claude Code กับ Figma ผ่าน MCP — สร้าง UI, Design System, UX Review ด้วยคำสั่งเดียว พร้อม Custom Skills 13 ตัวและ Docs Website

Claude Code Figma MCP Skills Open Source
📸
Automation Script

Mandala Capture

Script อัตโนมัติ ใช้ Playwright แคปโพสจาก Mandala Cosmostrend — แบ่งหมวด Travel, Food, Horoscope, Sci-Tech ครั้งละ 150 โพส

Playwright Node.js Web Scraping Automation
📚
Content & Branding

A Little Archive

เพจที่สร้างขึ้นหลังแยกตัวจากทีมเดิม — รวมคอนเทนต์ บทความ และผลงานเขียนส่วนตัวไว้ในที่เดียว

Webflow Content Branding Writing
Home