Các công cụ AI chuyển thiết kế thành code tốt nhất, phân loại theo điểm xuất phát của bạn

Một bài đăng trên diễn đàn cộng đồng của Figma kể rằng khi chọn thư viện component và biến trong Figma Make, kết quả nhận về là “màu sắc gần như không có độ tương phản và cỡ chữ chẳng hợp lý chút nào.” Cũng người dùng đó cho biết kết quả tốt hơn khoảng 90% khi không chọn thư viện nào cả. Đó là kiểu thất bại cần dùng để đánh giá mọi công cụ: hoặc nó dựng bằng các component sẵn có của team bạn, hoặc nó dựng một UI song song mà sau này bạn phải đi đối chiếu lại.

Các công cụ AI chuyển thiết kế thành code tốt nhất không cạnh tranh trên cùng một bậc thang, vì chúng bắt đầu từ những đầu vào khác nhau. Ảnh chụp màn hình, file Figma, prompt viết tay và codebase hiện có mang lượng cấu trúc rất khác nhau.

Hãy chọn theo thứ bạn đang có trong tay. File Figma thì dùng bộ chuyển đổi như tính năng sinh code tích hợp của Figma, Anima hoặc Builder.io Visual Copilot. Ảnh chụp màn hình thì dùng screenshot-to-code. Prompt thì dùng v0, Lovable hoặc Bolt. Codebase hiện có thì dùng một coding agent đọc design system của bạn qua Model Context Protocol (MCP).

Tóm tắt nhanh

• Dùng tính năng sinh code tích hợp của Figma nếu bạn trả phí Figma; chỉ dùng screenshot-to-code khi không có file thiết kế; chọn v0, Lovable hoặc bolt.diy tùy theo nơi deploy, cách tính phí và nhu cầu về model key; và dùng Figma MCP kèm ánh xạ Code Connect khi bạn có codebase và design system.
• Trước khi áp dụng bất kỳ công cụ nào, hãy sinh một màn hình mà bạn đã có component, rồi kiểm tra output xem có mã màu hex và giá trị pixel bị hardcode không, và có component nào được khai báo mới ở chỗ lẽ ra phải import từ thư viện của bạn không.
• Bạn có thể chạy bolt.diy, screenshot-to-code và Penpot trên máy chủ do mình kiểm soát, nhưng mỗi công cụ đều có điểm cần lưu ý: bolt.diy ngừng có commit từ tháng 2 đến tháng 10 năm 2026 và bản phát hành gắn tag gần nhất là từ tháng 5 năm 2025, screenshot-to-code cần API key của model, còn Penpot tự host thì đi sau bản cloud.
• Việc tái sử dụng component hiệu quả nhất khi công cụ có ánh xạ tường minh, như Figma MCP với Code Connect hoặc tính năng lập chỉ mục design system của Builder.io, nhưng output sinh ra vẫn cần review, nên hãy dành thời gian dọn dẹp cho mọi hướng đi.

Chọn công cụ theo điểm xuất phát của bạn

Ảnh chụp màn hình chỉ chứa pixel, không có gì khác. File Figma có thêm tên component, biến và quy tắc bố cục, còn codebase chứa chính các component, nên đầu vào quyết định loại công cụ nào có dữ liệu để làm việc.

Bài kiểm tra một màn hình cho việc tái sử dụng component và token

Người dùng Make nhận được kết quả tốt hơn khi không chọn thư viện không cần dùng cả tuần mới phát hiện ra vấn đề. Nó lộ ra ngay ở những trang đầu tiên được sinh ra, và đó là lý do chỉ một màn hình là đủ để kiểm tra bất kỳ ứng viên nào:

1. Chọn một màn hình mà team bạn đã dựng từ các component sẵn có, chẳng hạn form cài đặt hoặc thẻ bảng giá.
2. Sinh màn hình đó bằng công cụ bạn đang cân nhắc, dùng cùng loại đầu vào mà bạn sẽ dùng cho việc mới.
3. Tìm trong output các giá trị bị hardcode: mã màu hex thô như #3B82F6, cỡ chữ theo pixel như font-size: 14px và khoảng cách cố định. So sánh với tần suất nó dùng tên token, biến CSS hoặc class theme của bạn.
4. Kiểm tra các import. Output khai báo mới một Button hoặc Card thay vì import của bạn từ thư viện component là đã dựng một UI song song.
5. Xác nhận framework và cách viết style khớp với repo. HTML thuần với style inline là phải viết lại, dù bản xem trước trông thế nào.

Trong Stack Overflow Developer Survey 2025, 66% lập trình viên gọi “các giải pháp AI gần đúng nhưng chưa hẳn đúng” là nỗi bực bội lớn nhất của họ với AI. Đây là kết quả về công cụ lập trình AI nói chung, không phải nghiên cứu về chuyển thiết kế thành code, nhưng một màn hình trông đúng mà lại hardcode mọi màu sắc thì chính là “gần đúng” theo đúng nghĩa đó.

Lưu ý: Hãy chạy bước kiểm tra này trước khi triển khai một công cụ cho cả team. Một màn hình sinh ra chỉ tốn vài phút; một tháng output chứa giá trị hardcode đã merge sẽ tốn cả một sprint để dọn dẹp.

Bước kiểm tra này đọc code. Còn màn hình render ra có còn khớp với thiết kế hay không là câu hỏi riêng, dành cho một công cụ tự host được như BackstopJS, vốn chạy kiểm tra hồi quy giao diện.

Nếu bạn có file Figma đã hoàn thiện

Các công cụ AI chuyển Figma thành code trong nhóm này đều bắt đầu từ cùng một file, và khác biệt thực tế giữa chúng là code cuối cùng nằm ở đâu: trên canvas, trong một prototype được host, hay trong một bản xuất của bên thứ ba.

Tính năng sinh code tích hợp của Figma

Bạn chọn một frame, component hoặc section trong Figma Design, mở agent và yêu cầu HTML và CSS, component React hoặc một framework cụ thể. Figma cho biết bạn có thể trỏ agent tới design system của mình để output tham chiếu token, biến và cấu trúc component của bạn thay vì placeholder chung chung. Cùng trang đó ghi rằng tính năng này có trên mọi gói trả phí của Figma. Tính đến tháng 10 năm 2026, tính năng này đang ở giai đoạn beta mở, nên mức dùng credit và các giới hạn có thể thay đổi.

Output nằm lại trong file dưới dạng một thread mà developer có thể mở ra. Không có bước host hay deploy, đây là hạn chế nếu bạn muốn một prototype chạy được, và là ưu điểm nếu bạn muốn code để dán vào repo.

Figma Make

Figma Make là một môi trường riêng, vận hành bằng prompt. Theo Figma, Make xuất ra HTML, CSS và JavaScript cho prototype front-end, kèm trình soạn thảo tích hợp để chỉnh sửa. Bạn có thể dùng thử trên gói Starter miễn phí, và nó hỗ trợ tích hợp Supabase để mô phỏng dữ liệu thật.

Các công cụ riêng của Figma làm những việc khác nhau. Make tạo prototype chạy được từ prompt cộng một frame. Trình sinh code trên canvas biến các frame đã chọn thành code bằng thư viện của file. Figma MCP cho phép coding agent trong repo của bạn đọc trực tiếp component và biến.

Anima, Builder.io Visual Copilot và Locofy

Visual Copilot của Builder.io liệt kê output cho React, Qwik và Angular, cùng Kotlin và Flutter cho mobile, với style bằng Tailwind CSS hoặc CSS Modules. Về tái sử dụng, cùng trang đó nêu tên Custom Component Mapping, tính năng gắn component Figma với component trong codebase của bạn. Tài liệu của Builder hiện đánh dấu tính năng ánh xạ component thủ công là đã lỗi thời (deprecated), thay bằng tính năng lập chỉ mục component, và ghi rõ đây là tính năng của gói Enterprise, nên hãy kiểm tra tài liệu hiện tại và gói của bạn trước.

Gói miễn phí của Anima cho phép 5 lượt sinh code trong plugin Figma, cùng 5 tin nhắn chat mỗi ngày và 5 lượt import Figma trong AI Playground. Tính đến tháng 10 năm 2026, giá Enterprise bắt đầu từ $500 mỗi tháng, thanh toán theo năm.

Anima cũng chạy một MCP server, và code sinh ra qua đó bị tính vào cùng hạn mức sinh code. Locofy là một bộ chuyển đổi file Figma khác trong nhóm này.

Nên bắt đầu với bộ chuyển đổi Figma nào

Hãy bắt đầu với tính năng sinh code tích hợp của Figma nếu team bạn trả phí Figma: nó đọc thư viện của file mà không cần bước export, và trên gói trả phí thì bài kiểm tra một màn hình không đòi thêm gói đăng ký mới. Chuyển sang Builder.io Visual Copilot khi bạn muốn output import các component trong codebase (hãy xem tài liệu của nó để biết ánh xạ hoặc lập chỉ mục component áp dụng thế nào với gói của bạn), hoặc khi bạn muốn output mobile Kotlin hay Flutter mà nó liệt kê đích danh.

Dùng Figma Make cho prototype bấm được để trình bày với người khác. Code bạn định merge thì nên tạo bằng tính năng sinh code trên canvas của Figma hoặc Builder.io Visual Copilot.

Nếu bạn chỉ có ảnh chụp màn hình

screenshot-to-code là lựa chọn mã nguồn mở mặc định ở đây: giấy phép MIT, khoảng 80.000 sao trên GitHub và vẫn có commit trong năm 2026. Đưa cho nó một hình ảnh, nó trả về HTML với Tailwind hoặc CSS, React hoặc Vue, cùng một số stack khác. Có bản host sẵn tại screenshottocode.com nếu bạn không muốn tự chạy gì cả.

AI screenshot-to-code chỉ có thể làm việc với những gì hình ảnh thể hiện, nên giới hạn nằm ở đầu vào. Ảnh chụp màn hình không có định danh component, không có biến, không có trạng thái hover hay focus, và không có breakpoint responsive. Thứ trả về chỉ là bản dựng lại của một frame tĩnh ở một độ rộng, và mọi token đều phải đoán từ màu pixel.

screenshot-to-code là công cụ phù hợp khi không có file thiết kế, chẳng hạn khi cần khớp một bố cục tham khảo hoặc dựng lại một trang cũ mà không ai có file Figma. Nếu có file Figma thì hãy bắt đầu từ đó, vì file chứa những thông tin mà ảnh chụp màn hình đã bỏ đi.

Nếu bạn chỉ có prompt

Khi không có design system để khớp theo, các đánh đổi chuyển sang ba chỗ khác: công cụ tính phí bạn thế nào, bạn sửa được bao nhiêu phần code, và ứng dụng được sinh ra có thể phát triển đến đâu.

v0

Gói miễn phí của v0 có giới hạn 7 tin nhắn mỗi ngày, kèm deploy lên Vercel, đồng bộ GitHub và Design Mode trực quan. Mức sử dụng trả phí được tính theo token, và đơn giá token của các model v0 khác nhau giữa bốn cấp model, từ v0 Mini đến v0 Max Fast. Chi phí một phiên phụ thuộc vào cấp bạn chọn và cuộc hội thoại kéo dài bao lâu.

Lovable

Lovable tính phí bằng credit. Ở Default Mode, chi phí thay đổi theo độ phức tạp của tác vụ, còn Plan Mode tốn 1 credit cho mỗi tin nhắn. Gói miễn phí có 5 build credit được cấp mỗi ngày, tối đa 30 credit mỗi tháng.

Một người bình luận trong một thread Reddit so sánh Bolt và Lovable viết rằng Bolt cho “gần như toàn quyền kiểm soát” code, trong khi Lovable dường như chỉ hiển thị diff của code “mà không có quyền chỉnh sửa.” Đó là trải nghiệm của một người dùng, nên hãy kiểm tra trình soạn thảo hiện tại trước khi cho rằng điều đó vẫn đúng.

Bolt.new và bolt.diy

Bolt.new là sản phẩm được host sẵn. bolt.diy là phiên bản mã nguồn mở tương ứng, cho phép bạn chọn LLM cho từng prompt từ hơn 21 nhà cung cấp, bao gồm model chạy local qua Ollama. Nó không bắt buộc phải có cơ sở dữ liệu; Supabase chỉ là tích hợp tùy chọn. Hãy kiểm tra lịch sử commit và điều khoản giấy phép trước khi xây dựng trên nó.

Google Stitch

Google đã ra mắt lại Stitch vào tháng 3 năm 2026 với canvas vô hạn, tương tác bằng giọng nói và một design agent, theo bài viết của Winbuzzer về đợt thiết kế lại. Cũng bài viết đó cho biết thiết kế có thể xuất sang định dạng Figma hoặc các framework code như React, và một MCP server kết nối Stitch với Claude Code, Gemini CLI, Cursor và Antigravity. Điều đó đặt Stitch ở giữa hướng prompt và hướng codebase: nó bắt đầu từ prompt, nhưng có thể chuyển thiết kế cho một agent đang làm việc trong repo của bạn.

Nên bắt đầu với công cụ prompt nào

Trong một cuộc thảo luận trên Hacker News về Lovable và Bolt, một người bình luận cho rằng khi backend được giao hết cho Supabase, mức trần để xây phần mềm hữu ích bằng hai công cụ này là “thấp đến khó tin.” Người này có tiết lộ họ đang xây một sản phẩm cạnh tranh, nên hãy đọc đó như một ý kiến am hiểu nhưng có lợi ích liên quan, không phải một phép đo.

Có file Figma trong tay cũng không tự động loại bỏ hướng này. Trong cùng thread Reddit về Bolt và Lovable, một người bình luận khác nói họ chưa bao giờ đưa Figma vào vì việc đó có vẻ “khó hơn và phiền hơn so với chỉ viết prompt” cho thiết kế họ muốn.

Chọn v0 khi team bạn deploy trên Vercel và muốn đồng bộ GitHub ngay từ ngày đầu. Chọn Lovable khi bạn muốn lên kế hoạch build bằng các tin nhắn Plan Mode có chi phí cố định trước khi tiêu build credit, và hãy kiểm tra trình soạn thảo của nó trước nếu bạn định sửa code bằng tay.

Chọn bolt.diy khi bạn cần dùng model key của riêng mình hoặc chạy model local, và hãy coi nó là công cụ làm prototype trừ khi hoạt động mới trở lại của nó duy trì được. Thử Stitch khi bạn muốn thiết kế sinh từ prompt mà sau đó có thể chuyển cho coding agent trong repo của bạn qua MCP server của nó.

Nếu bạn đã có codebase và design system

Hướng này hoạt động ngay trong repo của bạn, nơi agent đọc chính các component. Cái giá là công thiết lập, và ngay cả khi đó, các cơ chế được ghi trong tài liệu chỉ làm tăng khả năng tái sử dụng; không cơ chế nào được ghi là đảm bảo điều đó.

Figma MCP

Theo Help Center của Figma, Figma MCP server có thể sinh code từ các frame đã chọn sau khi đọc component, biến, dữ liệu layout, nội dung FigJam và tài nguyên Make. Nó dùng Code Connect để giữ code đó khớp với component của bạn, và server từ xa còn có thể ghi ngược lại lên canvas.

Có hai phiên bản: server từ xa, được Figma khuyến nghị cho phần lớn người dùng, và server desktop cho một số trường hợp cụ thể của tổ chức và doanh nghiệp.

Về cơ chế, MCP cung cấp cho coding agent một luồng dữ liệu thiết kế có cấu trúc. Khi agent kiểm tra một frame, server gửi component, style và biến của frame đó, và blog của Figma giải thích rằng khi các phần tử này được ánh xạ sang code qua Code Connect, agent có thể lấy từ tài nguyên code của bạn. Không có ánh xạ đó, nó vẫn nhận được ngữ cảnh style và viết component từ đầu.

Agent là do bạn chọn. Hướng dẫn thiết lập của Figma được viết cho Claude Code, và tài liệu MCP của OpenCode đề cập cả server local lẫn server từ xa. Việc chọn Claude Code hay OpenCode quy về sự tiện lợi của dịch vụ được quản lý so với quyền kiểm soát nhà cung cấp, và lựa chọn đó chẳng có gì riêng cho công việc thiết kế.

Penpot MCP

Penpot là lựa chọn mã nguồn mở tương đương, và tài liệu của nó mô tả ba thành phần chính: một MCP server, một MCP plugin chạy bên trong Penpot để kết nối file bạn đang mở, và MCP client nơi bạn viết prompt. Bạn cấu hình nó từ trang Integrations trong tài khoản Penpot bằng một MCP key cá nhân. Thông qua đó, agent có thể đọc và sửa component, style, token và layer.

Cấu trúc của dự án vừa thay đổi gần đây. Repository penpot-mcp độc lập có thông báo rằng nó đã được lưu trữ vào tháng 2 năm 2026, với nội dung được gộp vào repository chính của Penpot. Các hướng dẫn viết dựa trên repo cũ có thể mô tả một cách thiết lập khác.

Claude Design

Anthropic ra mắt Claude Design vào tháng 4 năm 2026 dưới dạng bản research preview của Anthropic Labs cho người đăng ký Pro, Max, Team và Enterprise. Trong quá trình onboarding, Claude xây dựng một design system cho team của bạn bằng cách đọc codebase và file thiết kế, áp dụng nó cho các dự án sau, và đóng gói thiết kế hoàn chỉnh thành một gói bàn giao cho Claude Code.

UXPin, vốn cũng bán công cụ thiết kế của riêng mình, đã viết như sau trong tuần ra mắt:

“Các designer thử nghiệm Claude Design trong tuần này báo cáo sai font, màu nút không đúng và khoảng cách không nhất quán ngay trong vài phiên đầu tiên.”

Nên bắt đầu với thiết lập codebase nào

Dùng Figma MCP với một coding agent khi design system của bạn nằm trong Figma và bạn sẵn sàng làm phần ánh xạ Code Connect, vì chính phần ánh xạ đó phân biệt component được import với bản sao chỉ được style lại.

Dùng Penpot MCP khi bạn muốn một công cụ thiết kế mã nguồn mở mà agent có thể đọc và chỉnh sửa. Bản thân Penpot tự host được, nhưng tài liệu MCP của nó mô tả cách thiết lập qua tài khoản Penpot, nên hãy xác nhận quy trình trên instance của riêng bạn trước khi phụ thuộc vào nó.

Dùng Claude Design khi team bạn trả phí Claude và muốn thiết lập ít nhất, và hãy chạy bài kiểm tra một màn hình trước khi tin vào phiên bản design system mà nó tạo ra.

Chạy các lựa chọn mã nguồn mở trên máy chủ của riêng bạn

Ba trong số các công cụ này có thể chạy trên máy chủ do bạn kiểm soát, tức là đổi phần hosting của nhà cung cấp lấy việc tự bảo trì, và với bolt.diy cùng screenshot-to-code thì đổi đồng hồ tính credit lấy model key của bạn. Tính đến tháng 10 năm 2026, mỗi công cụ đều có một đánh đổi.

bolt.diy. Theo lịch sử commit của repository, dự án không có commit nào từ ngày 7 tháng 2 đến ngày 4 tháng 10 năm 2026, và bản phát hành gắn tag gần nhất, v1.0.0, ra mắt vào tháng 5 năm 2025. Dự án dùng giấy phép MIT, nhưng WebContainers API mà nó phụ thuộc (runtime trong trình duyệt dùng để chạy code được sinh ra) cần giấy phép khi dùng cho production trong môi trường thương mại, vì lợi nhuận.

Prototype và proof of concept không cần giấy phép đó. Trên thực tế, bolt.diy là lựa chọn hợp lý để làm prototype với key của bạn; hãy kiểm tra lại mức hoạt động của nó trước khi xây sản phẩm trên đó.

screenshot-to-code. Tự chạy nó cần ít nhất một key của nhà cung cấp model, từ OpenAI, Anthropic hoặc Gemini, cộng với một máy chủ do bạn bảo trì. Chi phí vận hành là phí sử dụng model cho mỗi lần sinh, do nhà cung cấp của key bạn cấu hình tính phí.

Penpot. Penpot tự host qua Docker Compose, hoặc Helm chart chính thức trên Kubernetes, OpenShift hay Rancher. Tài liệu của nó lưu ý rằng Docker image tự host được phát hành ngay sau các bản cập nhật SaaS, nên tính năng cloud mới sẽ đến instance của bạn với một độ trễ nhất định.

Chạy ở đâu tùy vào ai dùng chúng. Laptop là đủ để một mình thử bolt.diy hoặc screenshot-to-code. Máy chủ sẽ phù hợp khi cả team dùng chung một instance Penpot, hoặc khi các công cụ cần truy cập được cả lúc laptop của bạn đóng.

bolt.diy không có cấu hình tối thiểu chính thức, nên hãy lấy khoảng 4 GB RAM và 2 vCPU với ổ NVMe làm điểm khởi đầu cho một ứng dụng Node đơn lẻ như nó. Help Center của Penpot cho biết 4 CPU và 16 GB RAM là đủ để phục vụ hàng nghìn người dùng và bạn có thể phân bổ tài nguyên một cách dè dặt; với một instance cho team nhỏ cộng thêm coding agent trên cùng máy chủ, bắt đầu ở mức gần 8 đến 12 GB RAM là hợp lý. Nếu agent còn chạy trong một IDE trên trình duyệt ở máy đó, việc định cỡ cho Code Server với Claude Code là một phép tính riêng.

Tự host nghĩa là bạn vận hành máy chủ, áp dụng bản cập nhật và giữ an toàn cho model key. Nếu muốn bỏ qua bước cài đặt, chúng tôi cung cấp deploy một cú nhấp cho bolt.diy để dựng môi trường làm prototype và Penpot cho không gian thiết kế dùng chung trên Linux VPS có quyền root. Các coding agent như Claude Code và OpenCode cũng được deploy theo cách đó, dưới dạng ứng dụng riêng. Việc bảo trì vẫn là của bạn; phần thiết lập thì không.

Câu hỏi thường gặp

Figma Make hay v0, cái nào tốt hơn?

Điểm xuất phát của bạn quyết định. Figma Make hoạt động bên trong Figma, nhận một frame cộng prompt, và xuất ra HTML, CSS và JavaScript cho prototype front-end. v0 bắt đầu chỉ từ prompt, deploy lên Vercel và đồng bộ với GitHub. Chọn Make khi thiết kế đã có trong Figma, và v0 khi bạn bắt đầu từ một đoạn mô tả.

AI có thể chuyển ảnh chụp màn hình thành code chạy được không?

Có. Dự án mã nguồn mở screenshot-to-code biến ảnh chụp màn hình thành code HTML, React hoặc Vue bằng API key của OpenAI, Anthropic hoặc Gemini. Tuy vậy, kết quả là bản dựng lại của một frame tĩnh, không có định danh component, trạng thái tương tác hay breakpoint responsive, nên file Figma là đầu vào tốt hơn nếu có.

Có lựa chọn mã nguồn mở thay thế v0, Bolt hoặc Lovable không?

Có. bolt.diy là phiên bản mã nguồn mở tương ứng của Bolt.new và là lựa chọn tự host được trong số các công cụ prompt thành ứng dụng được nói đến ở đây. Nó dùng giấy phép MIT và hoạt động với model key của bạn, kể cả model local qua Ollama. Commit của nó đã ngừng từ tháng 2 đến tháng 10 năm 2026, và phụ thuộc WebContainers của nó cần giấy phép thương mại khi dùng cho production vì lợi nhuận, nên hãy kiểm tra cả mức hoạt động lẫn giấy phép trước khi xây sản phẩm trên nó.

Vì sao code do AI sinh ra lại bỏ qua design system của tôi?

Nhiều công cụ nhìn thiết kế của bạn như pixel hoặc một frame đã được làm phẳng, rồi ước lượng màu sắc, font và khoảng cách từ đó. Những công cụ đọc trực tiếp biến và cấu trúc component, như Figma MCP, có thể import component thật của bạn khi chúng được ánh xạ sang code qua Code Connect. Không có ánh xạ đó, agent dùng style của bạn làm ngữ cảnh và viết component mới.