Hướng Dẫn Dùng MCP Server Để Tự Động Sinh Code Frontend Từ Thiết Kế Figma với 2 giai đoạn

Bạn đang tìm cách tự động sinh code frontend từ Figma để rút ngắn thời gian lập trình và tăng tốc phát triển giao diện? Trong bài viết này, tôi là Võ Đỗ Khuê, Co-founder của ZoneCloud sẽ hướng dẫn chi tiết cách sử dụng Ru Code kết hợp với MCP Server – “trái tim” giúp công cụ AI đọc dữ liệu Figma và chuyển đổi thành mã nguồn frontend chỉ trong vài phút.

Với quy trình từng bước, bạn sẽ dễ dàng convert Figma sang code một cách chính xác, tiết kiệm công sức chỉnh sửa thủ công và tối ưu năng suất làm việc. Ngoài ra, hướng dẫn này còn giúp bạn hiểu cách thiết lập MCP Server để kết nối Ru Code với Figma, hỗ trợ tự động tạo giao diện nhanh chóng và hiệu quả.

Giai đoạn 1: Chuẩn bị và Thực hiện Demo tự động sinh code với Ru Code

Phần này sẽ hướng dẫn bạn cách sử dụng công cụ Ru Code để nhanh chóng tạo ra giao diện frontend từ một thiết kế Figma đã có.

Bước 1: Chuẩn bị Thiết kế Figma

Bạn cần làm gì: Trước tiên, hãy đảm bảo bạn đã có một giao diện thiết kế hoàn chỉnh trên Figma mà bạn muốn chuyển đổi thành mã code frontend. Đây có thể là bất kỳ thiết kế nào của bạn.

Bước 2: Chuẩn bị Môi trường lập trình

Bạn cần làm gì:

Cài đặt phần mềm Visual Studio Code (VS Code) trên máy tính của bạn. Đây là một trình soạn thảo mã phổ biến mà nhiều lập trình viên sử dụng.

Sau khi cài VS Code, bạn cần cài đặt extension Ru Code trong VS Code. Đây là công cụ AI agent mà chúng ta sẽ dùng để sinh code. (Lưu ý: Bạn cũng có thể dùng các công cụ AI agent tương tự khác như Cursor hoặc Line nếu đã cài đặt).

Bước 3: Sao chép Liên kết Thiết kế Figma

Bạn cần làm gì:

• Mở thiết kế Figma của bạn.
• Chọn “frame” (khung) hoặc một thành phần giao diện cụ thể mà bạn muốn sinh code.
• Sau đó, thực hiện hành động “copy pass” (copy path) và tiếp theo là “copy link to Selection” để lấy một liên kết trực tiếp đến phần thiết kế mà bạn vừa chọn. Liên kết này sẽ giúp Ru Code biết được thiết kế nào cần đọc.

Bước 4: Sử dụng Câu lệnh (Prompt) trong Ru Code

Bạn cần làm gì:

• Mở VS Code và chuyển đến cửa sổ của extension Ru Code (thường là một tab hoặc panel riêng).
• Tại đây, bạn cần nhập một câu lệnh (prompt) để yêu cầu Ru Code thực hiện công việc. Một cú pháp mẫu bạn có thể dùng là: “tạo giao diện tại component [tên_component].viw này dựa theo thiết kế FMA sau“.
• Ngay sau câu lệnh này, hãy dán liên kết Figma mà bạn vừa sao chép ở Bước 3.
• Cuối cùng, nhấn Enter để Ru Code bắt đầu xử lý.

Bước 5: Đồng ý truy cập tài liệu Figma

Điều gì xảy ra: Khi bạn gửi yêu cầu, Ru Code sẽ tự động kết nối đến Figma thông qua một công cụ gọi là MCP Server và sử dụng một hàm là get figma data.

Bạn cần làm gì: Ru Code sẽ hiển thị một thông báo yêu cầu quyền truy cập vào tài liệu Figma của bạn. Hãy bấm “đồng ý”.

Lưu ý: Nếu bạn muốn sử dụng lại nhiều lần mà không cần xác nhận lại, bạn có thể chọn “always allow” (luôn cho phép).

Bước 6: Theo dõi quá trình tạo code tự động

Điều gì xảy ra: Sau khi được cấp quyền, Ru Code sẽ tự động kéo giao diện Figma của bạn về, đọc hiểu file thiết kế và bắt đầu quá trình tạo ra mã code frontend trực tiếp trên VS Code.

Lưu ý: Toàn bộ quá trình này diễn ra hoàn toàn tự động, bạn không cần phải thao tác bằng chuột hay bàn phím nữa.

Bước 7: Kiểm tra và Hoàn thành

Điều gì xảy ra: Khi quá trình tạo code hoàn tất, Ru Code sẽ cẩn thận kiểm tra lại giao diện đã tạo và thông báo cho bạn là “complete” (hoàn thành).

Kết quả: Lúc này, bạn có thể thấy giao diện frontend đã được tạo ra từ thiết kế Figma của mình chỉ trong một thời gian rất ngắn.

Giai đoạn 2: Cấu hình và Cài đặt Figma MCP Server

MCP Server chính là “trái tim” giúp các công cụ AI như Ru Code có thể kết nối và tương tác với Figma. Phần này sẽ hướng dẫn bạn cách thiết lập nó.

Bước 1: Tìm và Chọn Figma MCP Server Mã nguồn mở

MCP Server là gì: Đây là một “quy chuẩn về kết nối” được tạo ra để giúp các ứng dụng AI (như Ru Code, Cine, Cursor) có thể kết nối đến các ứng dụng khác như Figma, GitHub, hoặc thậm chí tương tác với file trên máy tính của bạn.

Bạn cần làm gì: Bạn hãy tìm kiếm mã nguồn mở “Figma Context MCP” trên GitHub. Đây là một dự án mã nguồn mở được phát triển cụ thể để giúp tích hợp Figma với các công cụ AI.

Bước 2: Truy cập Cài đặt MCP Server trong Ru Code

Bạn cần làm gì:

• Mở extension Ru Code (hoặc Line, Cursor) trong VS Code.
• Tìm và vào phần “MCP Server” trong cài đặt của extension đó.

Bước 3: Thêm hoặc Chỉnh sửa Cài đặt Kết nối

Bạn cần làm gì:

• Nếu bạn chưa có cấu hình MCP Server nào, hãy chọn “Add new“.
• Nếu đã có, bạn có thể chọn “Edit MCP setting“.
• Tại đây, bạn cần dán một đoạn thiết lập kết nối đến Figma vào phần cài đặt.

Giải thích thêm: Đoạn cấu hình này thường được cung cấp sẵn (ví dụ, trong phần mô tả của video hướng dẫn). Nó cho phép MCP Server kéo code từ GitHub và chạy trên máy tính của bạn (local host) tại cổng 3333. Mọi yêu cầu liên quan đến Figma từ Ru Code sẽ thông qua cổng này để kết nối và lấy dữ liệu giao diện.

Bước 4: Lấy Figma API Key

Bạn cần làm gì:

• Mở trình duyệt web và tìm kiếm “figma api key” trên Google.
• Truy cập vào trang “rest api” chính thức của Figma.
• Kéo xuống phần được bôi đen “get personal asset Token” để lấy API Key cá nhân của bạn.

Lưu ý quan trọng: Figma API Key này chỉ tồn tại trong vòng 24 giờ. Nếu khi bạn khởi chạy MCP Server mà thấy báo lỗi màu đỏ, điều đó có nghĩa là API Key của bạn đã hết hạn. Lúc này, bạn cần lấy một API Key mới nhất và khởi tạo lại server.

Bước 5: Khởi chạy Localhost cho MCP Server

Bạn cần làm gì:

• Mở Terminal trong VS Code (hoặc bất kỳ công cụ terminal/command prompt nào bạn đang dùng).
• Dán câu lệnh khởi chạy server đã được cung cấp (ví dụ, thông qua spx) vào Terminal.
• Thay thế tham số figma api key trong câu lệnh bằng chính API Key mà bạn vừa lấy ở Bước 4.
• Nhấn Enter để chạy câu lệnh.

Bước 6: Xác nhận Kết nối Thành công

• Điều gì xảy ra: Khi bạn chạy câu lệnh, một cửa sổ trạng thái sẽ xuất hiện ở phía bên trái màn hình của bạn.
• Kiểm tra: Hãy đảm bảo rằng phần “status” hiển thị màu xanh.
• Cửa sổ này cũng sẽ mô tả các công cụ mà server cung cấp, bao gồm get figma data (để lấy thiết kế Figma) và download figma image (để tự động kéo ảnh từ thiết kế về và ghép vào giao diện).
• Kết quả: Khi trạng thái hiển thị màu xanh, điều đó có nghĩa là máy tính của bạn đã kết nối thành công đến Figma MCP Server. Giờ đây, bạn đã sẵn sàng để yêu cầu các công cụ AI (như Cine hoặc Cursor) sinh giao diện từ Figma một cách bình thường.
• Luu ý: Bạn chỉ cần khởi tạo server này một lần là đủ cho các lần sử dụng sau, không cần phải chạy lại mỗi khi bạn muốn sinh code.

Các ứng dụng và tiềm năng mở rộng của MCP Server (Tham khảo thêm)

MCP Server không chỉ dừng lại ở việc sinh code từ Figma mà còn có rất nhiều ứng dụng tiềm năng khác:

• Nó có thể giúp tự động kiểm soát trình duyệt để gỡ lỗi (debug) và tìm lỗi trong cửa sổ console hoặc network.
• Nó cũng có khả năng tự động hóa các tác vụ trên mạng xã hội, ví dụ như tự động truy cập và trả lời tin nhắn. Những ứng dụng nâng cao này hiện đang được nghiên cứu và có thể sẽ được chia sẻ trong tương lai.

Nội dung bài viết được tổng hợp từ video hướng dẫn chi tiết. Để hiểu rõ hơn từng bước thao tác, mình có gắn link video ở phía dưới để bạn tham khảo thêm và làm theo thuận tiện hơn.

Hy vọng với hướng dẫn chi tiết và cụ thể này, bạn sẽ dễ dàng thực hiện và thành công trong việc tự động sinh code frontend từ thiết kế Figma bằng cách sử dụng MCP Server!

Thuê máy chủ vật giá rẻ tại ZoneCloud – Chỉ từ 8.550.000đ/3 tháng!

ZoneCloud là đơn vị cung cấp dịch vụ thuê VPS, Cloud VPS, Máy chủ vật lý, Server AMD, Đăng ký tên miền, Colocation và Web Hosting tốc độ cao tại Việt Nam.

Hiện ZoneCloud đang cung cấp dịch vụ thuê máy chủ vật lý đặt tại Data Center chuẩn Tier III – với hạ tầng mạnh mẽ, tài nguyên riêng biệt, kết nối ổn định và bảo mật cao.

Toàn quyền kiểm soát CPU, RAM, SSD, không chia sẻ tài nguyên như VPS – đảm bảo hiệu suất tối đa, vận hành mượt mà cho hệ thống website, app, dịch vụ nội bộ.

Giá chỉ từ 8.550.000đ/3 tháng với gói cơ bản nhất, giảm ngay 10% khi thuê 6 tháng và 15% khi thuê 12 tháng – càng thuê lâu, càng tiết kiệm!

Cấu hình mạnh mẽ từ 1 đến 2 CPU Intel Gold/Platinum, RAM 32–64GB, SSD RAID tốc độ cao, băng thông 200/10 Mbps, 1Gbps port, 1 IPv4, không giới hạn lưu lượng.

Hỗ trợ nâng cấp linh hoạt:

• +16GB RAM: 800.000đ/tháng
• +500GB NVMe SSD: 500.000đ/tháng
• +1 IP tĩnh: 100.000đ/tháng
• +100Mbps băng thông: 1.200.000đ/tháng

Cam kết uptime 99,9%, bảo trì định kỳ, sao lưu thường xuyên, hỗ trợ kỹ thuật 24/7 qua live chat, ticket và hotline – giúp hệ thống của bạn luôn an toàn và hoạt động không gián đoạn.

Dưới đây là bảng giá dịch vụ thuê server, máy chủ tại ZoneCloud cùng các addon nhận được mà bạn nên tham khảo: