🎨 Claude cộng Figma MCP biến mô tả khách hàng thành mockup giao diện chỉ trong 10 phút
Designer Việt Nam tốn trung bình 4 giờ để làm wireframe đầu tiên cho mỗi dự án mới. Claude cộng Figma MCP rút thời gian này còn 10 phút mà vẫn chuẩn design system, để bạn focus vào sáng tạo thật sự thay vì pixel pushing.
🔌 Setup Figma MCP
Figma chính thức release MCP server vào tháng 3 năm 2026. Cách kết nối với Claude Desktop:
- Vào Figma Settings, tab Developer, bật MCP Access
- Tạo Personal Access Token với scope read và write file
- Trong Claude Desktop, thêm config MCP với token
- Restart Claude, kiểm tra Figma connected
Lưu ý: Figma plan Professional trở lên mới có MCP. Plan free chỉ đọc, không ghi được.
💬 Quy trình 4 bước từ brief tới mockup
Giả sử khách hàng nhắn qua Telegram: Em muốn landing page bán khoá học online. Quy trình:
Bước 1: Claude hỏi 5 câu chiến lược
- Target audience là ai, độ tuổi, nghề nghiệp
- Color mood mong muốn: vibrant trẻ trung hay corporate sang trọng
- Key message muốn truyền tải trong 10 giây đầu
- CTA chính là gì: đăng ký free trial hay mua khoá học luôn
- Tham khảo 2-3 landing page bạn thích
Bước 2: Claude tổng hợp brief Claude xuất file brief 1 trang gọn, gửi lại confirm với khách trước khi vào Figma.
Bước 3: Claude tạo wireframe trên Figma qua MCP Claude kéo component từ design system đã setup sẵn, lắp ghép theo brief:
- Hero section với headline 7 từ
- Trust badge logo 6 thương hiệu khách
- Features 3 cột với icon
- Testimonial slider
- Pricing 3 tier
- Final CTA section
Bước 4: Designer polish Designer mở Figma, chỉ cần tinh chỉnh spacing, typography, micro interaction. Khung sườn đã có.
🧱 Build Figma library tốt cho Claude reuse
Đây là phần quyết định chất lượng output. Đầu tư 1 ngày làm library, dùng 1 năm:
- Atomic components: button (primary, secondary, ghost), input, badge, avatar
- Molecules: card sản phẩm, navbar, footer, hero variant
- Organisms: section pricing, section testimonial, section FAQ
- Naming convention rõ ràng: ví dụ Button/Primary/Large thay vì Button1
- Auto layout chuẩn để component responsive
Claude đọc tên component qua MCP và biết cách lắp đúng cho từng use case.
⏱️ Tiết kiệm 4 giờ wireframe đầu tiên
Một agency UX 10 người ở quận 1 chia sẻ con số sau 30 ngày dùng pipeline:
- Wireframe đầu tiên: từ 4 giờ xuống 30 phút
- High fidelity mockup: từ 12 giờ xuống 6 giờ
- Design system updates: tự động khi Claude tạo component mới
- Designer focus vào micro animation, illustration, không tốn thời gian rough sketch
Kết quả: Capacity tăng 60 phần trăm, agency nhận được nhiều dự án hơn mà không cần thuê thêm designer.
💡 Use case bonus cho freelancer và founder
Không chỉ designer pro, pipeline này cũng cứu các vai khác:
- Founder không biết Figma: tự tạo pitch deck mockup gửi nhà đầu tư
- PM: tự làm prototype demo cho stakeholder review
- Marketer: A/B test 5 phiên bản landing page khác nhau trong 1 giờ
- Freelancer: nhận thêm project mà không lo bottleneck thời gian
Một founder solo Việt vừa pitch xong vòng seed, dùng Claude cộng Figma MCP làm 12 mockup trong một tuần để demo cho 3 VC.
🔥 Tip pro: dùng Claude Opus 4.7
Dùng model Claude Opus 4.7 vì khả năng vision tốt hơn Sonnet, hiểu được Figma frame và component layout phức tạp. Câu lệnh thường dùng:
- Tạo landing page mới với hero và 3 features
- Update component Button trong design system
- Tạo variant mobile cho frame Desktop hiện tại
- Generate 5 phiên bản hero khác nhau cho A/B test
Bạn sẽ dùng pipeline này cho dự án nào trước?
#ClaudeMCP #FigmaDesign #ProductDesign #UIWorkflow #VibeAICoder
