[Series AI] MCP Figma To Code – Claude Task Master

Chào anh em! Rất vui được gặp lại mọi người ở bài viết thứ 9 trong series Cursor AI for Developers.

Chúng ta đã đi qua một hành trình dài từ việc setup IDE, hiểu về kiến trúc Lục giác cho đến việc "cắm phích" MCP để mở rộng sức mạnh cho AI. Nhưng có một nỗi đau mà từ Frontend đến Backend dev đều ít nhất một lần nếm trải: Cầm bản thiết kế Figma và bắt đầu công cuộc "soi" từng pixel, copy từng mã màu, đo từng khoảng cách padding/margin.

Công việc này không khó, nhưng nó cực kỳ tốn thời gian và nhàm chán. Hôm nay, mình sẽ giới thiệu với anh em một combo "hủy diệt" giúp biến từ Design sang Code chỉ trong vài giây: MCP Figma kết hợp với "siêu trợ lý" Claude Task Master.

1. MCP Figma: Khi AI trực tiếp "soi" thiết kế

Ở bài trước, anh em đã biết MCP là gì rồi. Khi anh em cài đặt MCP Figma Server, Cursor không còn nhìn bản thiết kế qua những tấm ảnh screenshot mờ nhạt nữa. Nó truy cập trực tiếp vào API của Figma để đọc:

Cấu trúc các Layer.
Thông số CSS chính xác (Typography, Spacing, Border Radius).
Các biến màu (Variables/Tokens) mà Designer đã định nghĩa.

Thay vì anh em phải gõ: "Hãy viết cái button màu xanh giống trong ảnh", anh em chỉ cần đưa link Figma và nói: "Hãy code cho tôi Component Header dựa trên Frame @Header-Desktop trong file Figma này".

2. Claude Task Master: Người quản lý quy trình (Task Orchestrator)

Tại sao lại gọi là Task Master? Khi chuyển từ Design sang Code, nó không đơn giản là gõ một hồi là xong. Quy trình chuẩn phải là:

Phân tích: Đọc bản thiết kế, nhận diện các Component dùng lại (Reusable Components).
Setup: Định nghĩa Tailwind Config hoặc CSS Variables dựa trên Design System.
Thực thi: Viết code HTML/JSX và CSS.
Review: Đối chiếu code vừa viết với thông số thực tế trong Figma.

Claude (đặc biệt là model 3.5 Sonnet) cực kỳ giỏi trong việc đóng vai một Project Manager. Nó sẽ chia nhỏ yêu cầu của anh em thành các task nhỏ và sử dụng MCP Figma để thực hiện từng bước một cách cực kỳ kỷ luật.

3. Thực chiến: Từ Figma sang React + Tailwind trong 1 nốt nhạc

Hãy tưởng tượng anh em đang cần làm một trang Dashboard phức tạp.

Bước 1: Kết nối Mở Cursor, gọi Agent và đưa URL file Figma: "Tôi muốn build trang Dashboard này. Hãy dùng MCP Figma để đọc file thiết kế và liệt kê cho tôi các Color Tokens và Typography chuẩn."

Bước 2: Lên cấu trúc "Dựa trên thiết kế, hãy phân tích xem tôi nên chia thành bao nhiêu Component nhỏ. Sau đó, setup file tailwind.config.js sao cho khớp với các giá trị spacing và color trong Figma."

Bước 3: Gõ code (The Magic) Chỉ cần bôi đen một vùng trong Figma hoặc copy ID của Frame đó: "Hãy code cho tôi Component StatCard này bằng React + Tailwind. Chú ý sử dụng đúng Font-weight và Shadow như trong thiết kế. Đảm bảo nó Responsive theo cả bản Mobile trong Figma."

Kết quả: Anh em sẽ nhận được một đoạn code sạch sẽ, chuẩn chỉnh đến từng pixel (Pixel-perfect) mà không cần phải mở tab Figma lên để đo đạc thủ công.

4. Tại sao Combo này lại "bá đạo"?

Độ chính xác: Không còn chuyện "nhìn nhầm" màu hay "đo sai" padding. AI đọc thông số từ API nên con số là tuyệt đối.
Tính đồng nhất: AI sẽ tự động sử dụng các biến CSS/Tailwind đã định nghĩa, giúp code của anh em cực kỳ clean và dễ maintain.
Tốc độ: Những task mất cả buổi sáng giờ đây chỉ tốn của anh em vài phút prompt.

5. Tạm kết bài 9

Việc "Cắt HTML/CSS" giờ đây đã bước sang một trang mới. Chúng ta không còn là những "thợ cắt" nữa, mà là những người điều phối (Orchestrator). Với MCP Figma và Claude, anh em có thể tập trung hoàn toàn vào việc xử lý logic nghiệp vụ khó nhằn ở Backend, còn phần giao diện hãy cứ để "đội quân Agent" lo.

Bài viết cuối cùng: Buổi kết thúc Series

Hành trình 10 buổi của chúng ta sắp đi đến hồi kết. Ở bài cuối cùng, mình sẽ giới thiệu một "con quái vật" thực sự từ nhà Anthropic vừa mới ra mắt – Claude Code (phiên bản Terminal của Claude) và cách nó phối hợp với các Sub-Agents để giải quyết các task khổng lồ.

Đồng thời, mình sẽ tổng kết lại lộ trình (Roadmap) để anh em trở thành một AI-Powered Developer thực thụ trong năm 2026 này.

👉 [Series Cursor AI - Bài 10] Buổi 10 – Claude Code – Sub-Agents – Review Course

Anh em đã thử dùng AI để code giao diện chưa? Có gặp khó khăn gì ở phần CSS không? Chia sẻ ngay bên dưới để mình cùng giải đáp nhé!