จาก Figma สู่ Claude Code: คู่มือฉบับนักออกแบบ

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   ก่อน (นรกแห่งการส่งต่อ)              หลัง (Vibe Coding)                │
4│   ────────────────────                 ───────────────────              │
5│                                                                         │
6│   ออกแบบ                               ออกแบบ                          │
7│      ↓                                    ↓                             │
8│   เอกสาร Spec                          Claude อ่าน Figma โดยตรง         │
9│      ↓                                    ↓                             │
10│   นักพัฒนาตีความ                       คุณ Prompt: "สร้างสิ่งนี้"       │
11│      ↓                                    ↓                             │
12│   ตรวจสอบ                              โค้ดพร้อมผลิต                   │
13│      ↓                                    ↓                             │
14│   ลูป反馈 ×10                            ส่ง 🚀                         │
15│      ↓                                                                  │
16│   "ใกล้เคียง"                           ระยะเวลา: นาที                  │
17│                                                                         │
18│   ระยะเวลา: สัปดาห์                                                    │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → คลิกโปรไฟล์ (ซ้ายบน) → Settings → Security
2→ Personal access tokens → Generate new token → คัดลอกทันที

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1ใน Claude Code, พิมพ์: /mcp
2คุณควรเห็น: figma ✓ connected

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         ไฟล์ Figma ของคุณ                               │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  สิ่งที่ Claude อ่านได้                                         │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ ชื่อเลเยอร์และลำดับชั้น     ✓ การตั้งค่า Auto Layout          │   │
9│   │  ✓ สี (ฟิลล์, เส้นขอบ)        ✓ ตัวแปรของ Component            │   │
10│   │  ✓ รูปแบบตัวอักษร             ✓ ระยะห่างและ Padding             │   │
11│   │  ✓ เอฟเฟกต์ (เงา, เบลอ)      ✓ Constraints                    │   │
12│   │  ✓ Design Tokens / ตัวแปร     ✓ เนื้อหาข้อความ                 │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  สิ่งที่ Claude อ่านไม่ได้                                      │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ พิกเซลภาพจริง               ✗ อินเทอร์แอคชัน Prototype       │   │
19│   │  ✗ ความคิดเห็นและ feedback     ✗ ประวัติเวอร์ชัน                │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1อ่าน Figma design ของฉันที่:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4ให้ฉัน:
51. ภาพรวมของโครงสร้างหน้า
62. รายการส่วนหลัก
73. ชุดสีที่ใช้
84. รูปแบบตัวอักษร
95. Component ใด ๆ ที่คุณระบุได้

1จากไฟล์ Figma, แยกและสร้าง:
2
31. กำหนดค่า Tailwind ด้วย:
4   - สีที่กำหนดเองตามดีไซน์
5   - ตระกูลฟอนต์และขนาด
6   - สเกลระยะห่างตามที่คุณเห็น
7
82. ไฟล์ CSS variables เป็นตัวสำรอง
9
10จัดรูปแบบสีเป็นชื่อเชิงความหมาย (primary, secondary, accent, neutral)

1ดูที่ [ชื่อ Component] ในไฟล์ Figma ของฉัน
2
3สร้าง React Component ที่:
4- ตรงกับสไตล์ที่แน่นอน (สี, ระยะห่าง, ตัวอักษร)
5- ใช้ Tailwind CSS
6- รองรับทุกรูปแบบที่ฉันกำหนด (ถ้ามี)
7- มี TypeScript ครบถ้วน
8- รวมสถานะ Hover/Focus ตามดีไซน์

1สร้างส่วน [ชื่อส่วน] จากดีไซน์ Figma ของฉัน
2
3ข้อกำหนด:
4- ตรงกับดีไซน์ทุกประการ
5- ทำให้ Responsive:
6  - มือถือ (<768px): [อธิบายเลย์เอาต์]
7  - เดสก์ท็อป (≥768px): [อธิบายเลย์เอาต์]
8- ใช้ HTML เชิงความหมาย (section, nav, main, article)
9- รวมเนื้อหาข้อความทั้งหมดจากดีไซน์

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP ในการทำงาน                                │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  ไฟล์ดีไซน์       │  │  Wireframes และ   │  │  UI ที่สร้าง      │
12│  → โค้ดที่พร้อม   │  │  user flows →     │  │  ด้วย AI →        │
13│  ผลิต             │  │  แอปที่ใช้งานได้   │  │  เพิ่มในโค้ดเบส   │
14│                   │  │                   │  │                   │
15│  ⭐ ใช้บ่อยที่สุด  │  │  🎯 มีพลัง        │  │  ⚡ เร็วที่สุด     │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "สร้าง Landing   │  │ "อ่าน User Flow   │  │ "นำดีไซน์ Make   │
21│ Page ของฉันจาก   │  │ ของฉันและสร้าง    │  │ นี้ไปเพิ่มใน     │
22│ Figma ดีไซน์นี้"  │  │ โครงสร้าง Route   │  │ แอปพอร์ตโฟลิโอ   │
23│                   │  │ ของ Next.js"      │  │ ที่มีอยู่ของฉัน" │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1STEP 1                    STEP 2                    STEP 3
2───────────────────────────────────────────────────────────────────
3"อ่านไฟล์ Design        "สร้าง Component          "สร้างหน้าแรก
4System ของฉันและ        พื้นฐาน: Button,          โดยใช้ Component
5แยก Tokens ทั้งหมด"    Card, Input, Badge"       เหล่านี้"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    STEP 4: เพิ่มหน้าทีละหน้า
11                    "ตอนนี้สร้างหน้า Pricing"
12                    "ตอนนี้สร้างหน้า About"

1"อ่าน [URL], แยก tokens, สร้างหน้าทั้งหมดพร้อมทุกส่วน,
2ทำให้ responsive, ใช้ Next.js + Tailwind ไปเลย"
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  ใช้งานได้ดีที่สุดเมื่อไฟล์ Figma ของคุณมีระเบียบ    │
6     │     มีการตั้งชื่อที่เหมาะสมและใช้ Auto Layout ตลอด       │
7     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Atoms   │ → │ Molecules│ → │ Sections│ → │  Page   │
3│ (สี,    │    │ (ปุ่ม,  │    │ (การ์ด, │    │ (hero,  │    │ (เต็ม   │
4│ ฟอนต์)  │    │ อินพุต) │    │ nav)    │    │ ฟุตเตอร์)│    │ หน้า)   │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  การตั้งชื่อ                                                            │
3│  [ ] เลเยอร์ใช้ชื่อเชิงความหมาย    hero-section ✓   Frame 427 ✗        │
4│  [ ] Component ตั้งชื่อชัดเจน      Button/Primary ✓  Component 1 ✗     │
5│  [ ] Variants มี prop บรรยาย      size=lg ✓        variant=2 ✗        │
6├─────────────────────────────────────────────────────────────────────────┤
7│  โครงสร้าง                                                             │
8│  [ ] Auto Layout ในทุกคอนเทนเนอร์  พร้อม Flexbox ✓  ระเบียบเละ ✗      │
9│  [ ] ลำดับชั้นราบ (ซ้อนน้อยที่สุด)  DOM เรียบ ✓      ซุป Div ✗         │
10│  [ ] ส่วนต่าง ๆ แยกชัดเจน          แยกวิเคราะห์ง่าย ✓  โกลาหล ✗       │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKENS                                                                │
13│  [ ] สีถูกกำหนดเป็นสไตล์          แยกได้ ✓         เขียนตายตัว ✗      │
14│  [ ] ตัวอักษรเป็น text styles      สม่ำเสมอ ✓       สุ่มใส่ ✗          │
15│  [ ] ระยะห่างสม่ำเสมอ             เป็นระบบ ✓        มั่ว ✗            │
16└─────────────────────────────────────────────────────────────────────────┘

11. ตั้งชื่อเลเยอร์เหมือน CSS class
2   nav-links ✓    Group 5 ✗
3
42. ทำงานทีละส่วน
5   Hero → Features → Testimonials → Footer
6   (อย่าขอทั้งหน้าในครั้งเดียว)
7
83. อ้างอิง Figma โดยตรง
9   "ดูที่การ์ดในส่วน Features"
10   (ไม่ใช่: "สร้างการ์ดที่มีมุมโค้งมน")
11
124. ส่งออก Assets ก่อน
13   รูปภาพต้องส่งออกด้วยตนเอง → ไปที่ /public folder
14   จากนั้นบอก Claude: "Hero image อยู่ที่ /public/hero.png"
15
165. แจ้ง Stack ที่ใช้ล่วงหน้า
17   "ฉันใช้ Next.js 14 + Tailwind + TypeScript"
18   (Claude จะปรับตามรูปแบบของคุณ)

1ฉันต้องการแปลงดีไซน์ Figma เป็นโค้ด
2
3URL Figma: [วาง URL ของคุณ]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7กรุณา:
81. วิเคราะห์ดีไซน์และบอกฉันว่าคุณเห็นอะไร
92. แยกชุดสีและสร้าง Tailwind config
103. จากนั้นฉันจะบอกคุณว่าควรสร้างส่วนไหนก่อน
11
12ไปทีละขั้นตอนกัน