Tóm tắt nhanh:
ak-stitchnhờ Google Stitch vẽ màn hình bạn mô tả, cho bạn xem ảnh để góp ý, rồi xuất HTML dùng Tailwind, ảnh PNG và DESIGN.md. Các file đó được giao choak-frontend-design,ak-ui-ux-pro-maxhoặcak-ui-styling. Nó không viết component React hay Vue; hết lượt Stitch thì nó chỉ bạn sangak-ui-ux-pro-max.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn cần nhanh một bản thiết kế màn hình để có cái mà dựng code, hoặc muốn so vài phương án bố cục, bảng màu cạnh nhau. Không cần khi bạn đã có thiết kế và chỉ cần viết component: bản xuất của nó là HTML tĩnh, việc dựng code thuộc về skill khác.
flowchart LR
A["Ý tưởng màn hình"] --> B["ak-stitch"]
B --> C["Ảnh xem trước, HTML, DESIGN.md"]
C --> D["ak-frontend-design"]
C --> E["ak-ui-ux-pro-max"]
C --> F["ak-ui-styling"]
B --> G["Hết lượt: ak-ui-ux-pro-max"]Bốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Màn hình và screen ID | Làm sao xuất hay sửa đúng bản thiết kế bạn vừa xem? | Lần tạo trả về một screen ID kèm link ảnh. Lần xuất và lần sửa đều dùng lại ID đó. |
| Project Stitch theo repo | Thiết kế của repo này được cất ở đâu bên Stitch? | Repo my-shop có project my-shop riêng. Đang có plan checkout-flow thì thiết kế vào project my-shop/checkout-flow. |
| Lượt dùng và bộ đếm cục bộ | Còn tạo được bao nhiêu lần trong ngày? | Một màn hình kèm 3 biến thể tốn 4 lượt. Còn dưới 20% thì nó cảnh báo. |
| DESIGN.md | Skill dựng code đọc gì từ bản thiết kế? | Danh sách màu, cỡ chữ, khoảng cách và các khối như <nav>, <form>, viết bằng class Tailwind. |
Bộ đếm lượt nằm trên máy bạn và tự về 0 mỗi ngày theo giờ UTC; nó chỉ là ước lượng, không phải hạn mức thật của tài khoản.
Prompt mẫu cho một màn hình mới:
/ak-stitch Trang thanh toán cho app <tên app> trên mobile:
form nhập thẻ, tóm tắt giỏ hàng, nút "Thanh toán".
Xong khi: có ảnh để tôi duyệt, rồi xuất HTML và DESIGN.md.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-stitch: thiết kế UI bằng Google Stitch rồi giao sang dựng code" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-stitch". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-stitch
