Từ Figma đến Claude Code: Cẩm nang dành cho Designer

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   TRƯỚC ĐÂY (Bàn giao địa ngục)          SAU NÀY (Vibe Coding)         │
4│   ────────────────────                     ───────────────────          │
5│                                                                         │
6│   Thiết kế                               Thiết kế                      │
7│      ↓                                      ↓                           │
8│   Tài liệu spec                           Claude đọc trực tiếp Figma    │
9│      ↓                                      ↓                           │
10│   Dev diễn giải                           Bạn prompt: "Xây cái này"     │
11│      ↓                                      ↓                           │
12│   Review                                  Code sản xuất                 │
13│      ↓                                      ↓                           │
14│   Vòng lặp phản hồi ×10                   Ship 🚀                       │
15│      ↓                                      ↓                           │
16│   "Cũng tạm được"                         Thời gian: Vài phút          │
17│                                                                         │
18│   Thời gian: Vài tuần                                                   │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Nhấp vào profile (góc trên bên trái) → Settings → Security
2→ Personal access tokens → Generate new token → Sao chép ngay lập tức

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Trong Claude Code, gõ: /mcp
2Bạn sẽ thấy: figma ✓ connected

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         FILE FIGMA CỦA BẠN                             │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  NHỮNG GÌ CLAUDE CÓ THỂ ĐỌC                                    │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Tên layer & phân cấp        ✓ Cài đặt Auto Layout           │   │
9│   │  ✓ Màu sắc (fill, stroke)      ✓ Biến thể component            │   │
10│   │  ✓ Kiểu chữ (Typography)       ✓ Khoảng cách & padding         │   │
11│   │  ✓ Hiệu ứng (đổ bóng, mờ)      ✓ Constraints                   │   │
12│   │  ✓ Design token/biến           ✓ Nội dung văn bản              │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  NHỮNG GÌ CLAUDE KHÔNG THỂ ĐỌC                                 │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Pixel ảnh thực tế           ✗ Tương tác prototype           │   │
19│   │  ✗ Bình luận & phản hồi        ✗ Lịch sử phiên bản            │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Đọc thiết kế Figma của tôi tại:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4Cung cấp cho tôi:
51. Tổng quan về cấu trúc trang
62. Danh sách các phần chính
73. Bảng màu đang được sử dụng
84. Kiểu chữ (Typography)
95. Bất kỳ component nào bạn có thể xác định

1Từ file Figma, trích xuất và tạo:
2
31. Một cấu hình Tailwind với:
4   - Màu sắc tùy chỉnh khớp với thiết kế
5   - Font chữ và kích thước
6   – Thang đo khoảng cách dựa trên những gì bạn thấy
7
82. File biến CSS dự phòng
9
10Định dạng màu sắc dưới dạng tên ngữ nghĩa (primary, secondary, accent, neutral).

1Nhìn vào [TÊN COMPONENT] trong file Figma của tôi.
2
3Tạo một React component:
4- Khớp chính xác kiểu dáng (màu sắc, khoảng cách, kiểu chữ)
5- Sử dụng Tailwind CSS
6- Hỗ trợ tất cả các biến thể tôi đã định nghĩa (nếu có)
7- Được gõ đầy đủ với TypeScript
8- Bao gồm trạng thái hover/focus dựa trên thiết kế

1Tạo section [TÊN SECTION] từ thiết kế Figma của tôi.
2
3Yêu cầu:
4- Khớp chính xác với thiết kế
5- Làm cho nó responsive:
6  - Mobile (<768px): [mô tả layout]
7  - Desktop (≥768px): [mô tả layout]
8- Sử dụng HTML ngữ nghĩa (section, nav, main, article)
9- Bao gồm tất cả nội dung văn bản từ thiết kế

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP TRONG HÀNH ĐỘNG                          │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  File thiết kế    │  │  Wireframe &      │  │  UI do AI tạo     │
12│  → Code sản xuất  │  │  user flow →      │  │  → Tiêm vào       │
13│                   │  │  Ứng dụng chạy    │  │  codebase         │
14│                   │  │                   │  │                   │
15│  ⭐ NHIỀU NHẤT    │  │  🎯 MẠNH MẼ      │  │  ⚡ NHANH NHẤT    │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "Xây landing page │  │ "Đọc user flow    │  │ "Lấy thiết kế     │
21│ của tôi từ thiết  │  │ của tôi và tạo    │  │ Make này và thêm  │
22│ kế Figma này"     │  │ cấu trúc route    │  │ vào ứng dụng      │
23│                   │  │ Next.js"          │  │ portfolio của tôi"│
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1BƯỚC 1                    BƯỚC 2                    BƯỚC 3
2───────────────────────────────────────────────────────────────────
3"Đọc file design          "Tạo component            "Xây trang chủ
4system của tôi và         cơ bản: Button,           sử dụng các
5trích xuất tất cả token"  Card, Input, Badge"       component này"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    BƯỚC 4: Thêm từng trang một
11                    "Giờ hãy xây trang giá"
12                    "Giờ hãy xây trang giới thiệu"

1"Đọc [URL], trích xuất token, tạo toàn bộ trang với tất cả section,
2làm cho nó responsive, sử dụng Next.js + Tailwind. Bắt đầu."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Hoạt động tốt nhất khi file Figma của bạn được     │
6     │     tổ chức tốt với đặt tên hợp lý và Auto Layout xuyên  │
7     │     suốt                                                │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Token   │ → │ Nguyên tử│ → │ Phân tử │ → │ Section │ → │  Trang   │
3│ (màu,   │    │ (button,│    │ (card,  │    │ (hero,  │    │ (đầy đủ) │
4│ font)   │    │ input)  │    │ nav)    │    │ footer) │    │          │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  ĐẶT TÊN                                                               │
3│  [ ] Layer sử dụng tên ngữ nghĩa     hero-section ✓   Frame 427 ✗     │
4│  [ ] Component được đặt tên rõ ràng  Button/Primary ✓  Component 1 ✗  │
5│  [ ] Biến thể có thuộc tính mô tả    size=lg ✓        variant=2 ✗     │
6├─────────────────────────────────────────────────────────────────────────┤
7│  CẤU TRÚC                                                              │
8│  [ ] Auto Layout trên TẤT CẢ container  Sẵn sàng Flexbox ✓  Mớ hỗn độn ✗│
9│  [ ] Phân cấp phẳng (tối thiểu lồng)    DOM sạch ✓      Súp div ✗     │
10│  [ ] Các section được tách biệt rõ ràng Phân tích dễ ✓  Hỗn loạn ✗    │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKEN                                                                 │
13│  [ ] Màu sắc được định nghĩa dưới dạng style  Có thể trích xuất ✓  Cứng nhắc ✗│
14│  [ ] Kiểu chữ dưới dạng text style            Nhất quán ✓     Ngẫu nhiên ✗│
15│  [ ] Khoảng cách nhất quán                    Hệ thống ✓     Tùy tiện ✗│
16└─────────────────────────────────────────────────────────────────────────┘

11. ĐẶT TÊN LAYER NHƯ CSS CLASS
2   nav-links ✓    Group 5 ✗
3
42. LÀM VIỆC THEO TỪNG SECTION
5   Hero → Features → Testimonials → Footer
6   (Đừng yêu cầu toàn bộ trang cùng một lúc)
7
83. THAM CHIẾU TRỰC TIẾP FIGMA
9   "Nhìn vào card trong phần Features"
10   (Không phải: "Tạo một card với góc bo tròn")
11
124. XUẤT TÀI SẢN TRƯỚC
13   Ảnh cần xuất thủ công → thư mục /public
14   Sau đó nói với Claude: "Ảnh hero ở /public/hero.png"
15
165. CHIA SẺ STACK CỦA BẠN TRƯỚC
17   "Tôi đang dùng Next.js 14 + Tailwind + TypeScript"
18   (Claude sẽ khớp với quy ước của bạn)

1Tôi muốn chuyển đổi thiết kế Figma của mình thành code.
2
3URL Figma: [DÁN URL CỦA BẠN]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Vui lòng:
81. Đầu tiên, phân tích thiết kế và cho tôi biết bạn thấy gì
92. Trích xuất bảng màu và tạo cấu hình Tailwind
103. Sau đó tôi sẽ cho bạn biết section nào cần xây dựng trước
11
12Hãy làm từng bước một.