Các công cụ lập trình có AI như Claude Code hay Cursor đã viết mã giao diện khá tốt. Điểm vướng nằm ở chỗ khác: bản thiết kế — màu, khoảng cách, component, design system — thường nằm trong một công cụ riêng mà agent không đọc được, càng không sửa được. Kết quả là agent tự đoán giao diện, còn designer phải so từng màn hình để kéo lại cho đúng.
Năm 2026, khoảng trống này đang được lấp bằng Model Context Protocol (MCP): chuẩn mở cho phép agent kết nối vào công cụ thiết kế để đọc và ghi trực tiếp. Bài này xem ba lựa chọn tiêu biểu: pen.dev, Figma và Penpot.
pen.dev: canvas thiết kế nằm ngay cạnh mã nguồn
pen.dev là công cụ thiết kế vector được xây cho quy trình có agent ngay từ đầu. Nó chạy như ứng dụng desktop trên macOS, Windows và Linux, đồng thời có extension cho VS Code, Cursor, Windsurf, cùng một CLI cài qua npm để tự động hóa.
Điểm khác biệt nằm ở định dạng file. Bản thiết kế lưu thành file .pen — cấu trúc JSON mô tả cây đối tượng, tương tự HTML hay SVG, có tài liệu schema công khai. Vì là file văn bản đặt cùng thư mục dự án, agent đọc được cả thiết kế lẫn mã trong một lần.
Chuyển thiết kế thành mã do agent đảm nhận chứ không qua bộ xuất cố định. Tài liệu liệt kê React, Next.js, Vue, Svelte, HTML/CSS; Tailwind, CSS Modules; shadcn/ui, Radix, MUI. Chiều ngược lại, agent có thể dựng lại component đang có trong mã thành bản thiết kế. pen.dev kết nối nhiều mô hình (Claude, OpenAI, Gemini, Qwen, DeepSeek…), nhập được file Figma, và hỗ trợ MCP lẫn CLI.
Về chi phí, trang giá của pen.dev ghi sản phẩm hiện miễn phí và có thể có gói trả phí trong tương lai.
Nguồn: pen.dev · Định dạng .pen · Design ↔ Code · Bảng giá
Figma: mở canvas cho agent, trên nền design system có sẵn
Ngày 24/03/2026, Figma công bố cho agent ghi trực tiếp lên canvas qua MCP server của mình. Thông qua công cụ use_figma, agent tạo và sửa frame, component, variant, biến và auto layout — dùng chính component và variable trong thư viện của đội thay vì tự vẽ mới.
Figma đi kèm các "skill": tập chỉ dẫn viết bằng markdown hướng agent làm việc theo cách của đội, ví dụ tạo thư viện, áp design system hay đồng bộ token. Các client được nêu gồm Claude Code, Codex, Cursor, Copilot trong VS Code, Warp và một số công cụ khác.
Điều kiện sử dụng cần đọc kỹ. Theo trung tâm trợ giúp của Figma, ghi lên canvas dành cho seat Full và Dev trên gói trả phí, trong đó seat Dev chỉ đọc ngoài bản nháp; tính năng chỉ chạy qua MCP server remote. Figma cho biết tính năng miễn phí trong giai đoạn beta và sẽ chuyển sang tính phí theo mức sử dụng. Tài liệu cho nhà phát triển cũng nêu giới hạn 20 KB mỗi phản hồi và chưa hỗ trợ hình ảnh.
Lợi thế lớn nhất của Figma không nằm ở tính năng agent, mà ở chỗ phần lớn đội thiết kế đã có design system ở đó. Agent làm việc trên thư viện sẵn có thì đầu ra khớp thương hiệu ngay từ đầu.
Nguồn: Figma Blog — Agents, Meet the Figma Canvas · Figma Help — Figma MCP server · Figma Developers — Write to canvas
Penpot: mã nguồn mở, tự triển khai được
Penpot là công cụ thiết kế và prototype chạy trên trình duyệt, mã nguồn mở theo giấy phép MPL-2.0. Doanh nghiệp có thể dùng bản SaaS hoặc tự triển khai bằng Docker, Kubernetes. Penpot làm việc với các chuẩn mở như SVG, CSS, HTML và JSON.
MCP server của Penpot là bản chính thức, chạy theo hai cách: bản remote do Penpot vận hành, hoặc bản local cài qua npm trên máy của bạn. Một plugin trong Penpot nối file đang mở với MCP server. Agent có thể đọc trang, component, style, token; và ghi: tạo, đổi tên, sắp xếp component, áp token, sinh variant hay màn hình mới. MCP server miễn phí.
Với tổ chức không được phép đưa bản thiết kế lên dịch vụ đám mây nước ngoài, tổ hợp Penpot tự triển khai cùng MCP server local là lựa chọn hiếm hoi giữ toàn bộ dữ liệu trong hạ tầng của mình.
Nguồn: Penpot Help — MCP server · Penpot trên GitHub
Nên chọn công cụ nào
- Đội đã có design system trên Figma: dùng MCP server của Figma. Chi phí chuyển đổi thấp nhất, nhưng cần gói trả phí và nên dự trù phần phí theo mức sử dụng sau giai đoạn beta.
- Dữ liệu thiết kế phải nằm trong hạ tầng nội bộ (khu vực công, ngân hàng, năng lượng): Penpot tự triển khai với MCP server local. Không mất phí bản quyền, đổi lại cần người vận hành.
- Đội do lập trình viên dẫn dắt, muốn bản thiết kế nằm trong repository cạnh mã: pen.dev. Hiện miễn phí và gắn chặt với IDE, nhưng là sản phẩm trẻ, mô hình giá chưa định hình — phù hợp thử nghiệm trên dự án nhỏ trước.
Ứng dụng cho đội Mendix: Developer và BA
Mendix 11 đã mở MCP theo cả hai chiều. Từ Studio Pro 11.8, Maia MCP Client cho Maia gọi công cụ của MCP server bên ngoài, tài liệu Mendix nêu rõ ví dụ kết nối Figma. Từ Studio Pro 11.10, Studio Pro MCP Server cho agent bên ngoài như Claude Code dùng năng lực của Maia ngay trong dự án. Cộng với Atlas UI Kit for Figma, bản thiết kế và ứng dụng Mendix giờ nối được với nhau khá trực tiếp.
Với Business Analyst
- Dựng mockup từ user story bằng Atlas UI Kit for Figma. Component trong kit ánh xạ 1:1 với widget và layout của Studio Pro, nên màn hình BA vẽ ra là màn hình Developer dựng lại được, không phát sinh widget tự viết ngoài dự kiến.
- Cho agent dựng nhanh vài phương án màn hình qua MCP của công cụ thiết kế, rồi duyệt với người dùng nghiệp vụ trước khi viết một dòng microflow nào. Sửa trên mockup rẻ hơn nhiều so với sửa trên ứng dụng.
- Atlas UI Kit chính thức hiện dành cho Figma. Nếu đội dùng Penpot hoặc pen.dev, nên dựng lại bộ component cốt lõi của Atlas (nút, form, data grid, layout) làm thư viện riêng để mockup không vượt quá những gì Mendix có sẵn.
- Ghi chú ngay trên mockup các trường dữ liệu, quy tắc kiểm tra và quyền truy cập. Đó là đầu vào trực tiếp cho domain model, validation và phân quyền, thay vì để Developer tự suy ra từ hình vẽ.
Với Mendix Developer
- Kết nối Figma MCP vào Maia MCP Client (Studio Pro 11.8 trở lên, xác thực bằng personal access token) để Maia đọc ngữ cảnh thiết kế khi dựng trang. Lưu ý Maia chỉ hỗ trợ MCP server remote qua HTTP hoặc SSE và chỉ dùng phần tools.
- Dùng Maia for Pages với ảnh wireframe hoặc ảnh chụp mockup (tối đa 512 KB) để sinh khung trang. Từ Studio Pro 11.9, Maia dựng được trang tùy chỉnh và sửa trang có sẵn; Maia lấy bố cục chứ không sao chép màu sắc, nên phần theme vẫn đi qua Atlas.
- Chuyển design token thành theme: Atlas 4 trong Studio Pro 11 dùng biến CSS (ví dụ --brand-primary) trong custom-variables.scss. Agent đọc variable từ Figma, token từ Penpot hoặc biến trong file .pen, rồi sinh file này — kết quả là một file văn bản xem lại được trong code review.
- Kết nối Studio Pro MCP Server (11.10 trở lên) vào Claude Code cùng MCP của công cụ thiết kế: một agent vừa đọc thiết kế vừa làm domain model, microflow trong Studio Pro. Ở bản 11.10, MCP Server chưa sinh được trang, và token AI tính vào tài khoản nhà cung cấp mô hình của bạn.
- Pluggable widget của Mendix là component React viết bằng JavaScript hoặc TypeScript. Khi cần widget tùy biến, mã React mà agent sinh từ bản thiết kế (ví dụ qua pen.dev) là điểm khởi đầu tốt, trước khi đóng gói theo Pluggable Widgets API.
Cả hai vai trò nên coi đầu ra của agent là bản nháp. Agent rút ngắn khâu dựng khung; quyết định về nghiệp vụ, dữ liệu và phân quyền vẫn cần người duyệt.
Nguồn: Mendix — Atlas UI Kit for Figma · Maia MCP Client · Studio Pro MCP Server · Maia for Pages · Atlas 4 · Pluggable Widgets API
Với doanh nghiệp Việt Nam
Cả ba công cụ đều giải cùng một bài toán: để agent làm việc trên nguồn sự thật chung của giao diện thay vì tự đoán. Câu hỏi quyết định vì thế ít khi là tính năng, mà là design system của bạn đang ở đâu và dữ liệu thiết kế được phép nằm ở đâu.
Một lưu ý thực tế: agent chỉ giỏi bằng design system nó được đưa vào. Nếu thư viện component rời rạc, đặt tên tùy tiện, token không nhất quán, agent sẽ nhân bản sự lộn xộn đó nhanh hơn con người. Dành thời gian chuẩn hóa thư viện trước khi mở cửa cho agent thường mang lại nhiều giá trị hơn việc chọn đúng công cụ.