Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:stitch

Sinh thiết kế bằng Google Stitch

Sinh thiết kế UI độ trung thực cao từ prompt, theo dõi quota, export HTML/Tailwind, ảnh và DESIGN.md, rồi bàn giao cho các skill triển khai frontend.

Kiểm tra thiết lập

Kiểm tra quota

Xác định project

Sinh màn hình

Nguyên tắc 01

Stitch tạo thiết kế tĩnh, không phải React production

Nguyên tắc 02

DESIGN.md là hợp đồng bàn giao

Nguyên tắc 03

Nhóm thiết kế theo repo hoặc plan đang hoạt động để truy vết

Nguyên tắc 04

Responsive và animation được bổ sung ở bước triển khai

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Kiểm tra thiết lập Xác nhận nơi đặt API key, SDK đã cài, project ID tùy chọn và MCP nếu cần ngữ cảnh thiết kế native.
2 Kiểm tra quota Chạy kiểm tra quota local để tham khảo trước khi sinh và giải thích rằng enforcement phía provider vẫn là nguồn quyết định.

Xử lý

Agent / skill thực thi

3 Xác định project Chọn project theo ID rõ ràng, tên project, biến môi trường, tự nhận diện repo git hoặc fallback claudekit-default.
4 Sinh màn hình Chạy script sinh Stitch với prompt thiết kế, tên project theo plan đang hoạt động, thiết bị hoặc nhu cầu variant.

Kiểm chứng

Gate, review, xác thực

5 Review hình ảnh Hiển thị preview thiết kế và lấy phản hồi người dùng trước khi yêu cầu redesign hoặc variant bổ sung.
6 Export artifact Export HTML/Tailwind, ảnh và DESIGN.md để agent triển khai dùng được đặc tả thiết kế cụ thể.

Đóng

Báo cáo, bàn giao, artifact

7 Bàn giao sang code Chuyển DESIGN.md cho frontend-design, ui-ux-pro-max hoặc ui-styling; DESIGN.md ưu tiên hơn mô tả bằng lời.
8 Ghi quota Tăng quota cục bộ sau khi sinh và giữ bản ghi project tách theo repo cho các phiên thiết kế sau.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:stitch [design prompt or action]

hoặc

/ak:stitch <generate|export|quota> ...

Đối số

[design prompt or action] Bắt buộc

Prompt thiết kế hoặc action

Brief màn hình, ràng buộc, thiết bị, nội dung, variant, export hoặc yêu cầu quota bằng ngôn ngữ tự nhiên. Không đưa secret, dữ liệu khách hàng hoặc brand asset chưa duyệt.

/ak:stitch "Generate two desktop checkout concepts, show previews, and export the selected screen to ./stitch-exports without implementing it"

Subcommand

generate Sinh thiết kế

/ak:stitch generate <prompt> [--project <id>|--project-name <title>] [--device MOBILE|DESKTOP|TABLET] [--variants <count>]

Tạo một Stitch screen hoặc các variant đã duyệt từ prompt cụ thể sau khi kiểm tra quyền truy cập, quota và ranh giới nội dung an toàn.

<prompt>: Concept UI cần sinh, gồm audience, nội dung, thiết bị và ràng buộc brand. Loại secret và dữ liệu nhạy cảm trước khi gửi.
--project <id>: Dùng lại đúng ID project Stitch hiện có thay vì lookup hoặc tự tạo.
--project-name <title>: Lookup hoặc tạo tên project Stitch có giới hạn, thường là repo/plan để truy vết phiên thiết kế.
--device MOBILE|DESKTOP|TABLET: Yêu cầu Stitch tạo layout mobile, desktop hoặc tablet. Tùy chọn này không biến HTML export thành responsive production.
--variants <count>: Chỉ yêu cầu thêm phương án thiết kế khi variant đã được duyệt rõ.

Kết quả: Screen ID, project ID, URL ảnh preview và variant ID tùy chọn để review visual.

/ak:stitch generate "A desktop checkout page with payment form and cart summary" --device DESKTOP --variants 2

export Export

/ak:stitch export <screen-id> [--format html|image|all] [--output <dir>]

Tải screen đã sinh và được duyệt thành HTML, ảnh hoặc cả hai kèm DESIGN.md bàn giao local.

<screen-id>: Screen Stitch đã sinh cần export. Dùng project ID hoặc project-name từ lần sinh khi cần.
--format html|image|all: Chọn HTML từ provider, ảnh preview hoặc tất cả output gồm DESIGN.md được suy ra.
--output <dir>: Thư mục chứa design.html, design.png và DESIGN.md; xác nhận trước khi ghi đè export có sẵn.

Kết quả: Đường dẫn file export chính xác cho design.html, design.png và DESIGN.md khi được yêu cầu.

/ak:stitch export screen-123 --format all --output ./stitch-exports/

quota Quota

/ak:stitch quota <check|increment|reset>

Đọc hoặc chỉnh bộ đếm credit local để tham khảo; quota phía provider vẫn là nguồn quyết định.

<check|increment|reset>: Dùng check trước khi sinh; không chạy increment lần nữa sau khi generation bundle đã tự đếm usage.

Kết quả: Tóm tắt quota local dạng JSON hoặc ghi chú rõ rằng giới hạn provider đã chặn generation.

/ak:stitch quota check

Tính năng đặc biệt

Sinh thiết kế

Biến prompt văn bản thành screen ID và URL ảnh preview.

Xuất file

Tạo design.html, design.png và DESIGN.md để triển khai.

Quota

Theo dõi bộ đếm local để tham khảo; quota phía provider vẫn là nguồn quyết định.

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Sinh và export concept Khuyến nghị

/ak:stitch generate "A desktop checkout page with payment form and cart summary" --device DESKTOP --variants 2 --project-name "my-saas/checkout"

Dùng khi:: Cần sinh UI qua provider và có artifact bàn giao để review trước khi triển khai.
Kết quả:: Kiểm tra quota local, xác định project Stitch, sinh hai variant desktop, hiển thị preview để review và chuẩn bị screen đã chọn cho export HTML/ảnh/DESIGN.md.

Sinh variant mobile

/ak:stitch generate "Mobile onboarding flow for a finance app with three calm trust-building screens" --device MOBILE --variants 3

Dùng khi:: Muốn khám phá thiết kế UI nhanh từ prompt cụ thể trước khi chọn hướng.
Kết quả:: Dùng action generate với target mobile, chỉ yêu cầu variant đã duyệt và trả screen hoặc variant ID cùng URL ảnh preview để người dùng chọn.

Export screen có sẵn

/ak:stitch export screen-123 --format all --output ./stitch-exports/

Dùng khi:: Một screen đã sinh đã được duyệt và cần trở thành đầu vào triển khai cụ thể.
Kết quả:: Chạy action export cho screen đã chọn và ghi design.html, design.png cùng DESIGN.md để frontend-design, ui-ux-pro-max hoặc ui-styling dùng đặc tả thiết kế.

Kiểm tra quota trước

/ak:stitch quota check

Dùng khi:: Trước khi sinh concept, variant hoặc redesign khi quota local tham khảo hoặc khả dụng provider có thể chặn lần chạy.
Kết quả:: Chạy action quota, báo usage và trạng thái còn lại theo bộ đếm local tham khảo, rồi dừng hoặc chọn workflow không qua provider đã duyệt khi không nên tiếp tục generation.

Phạm vi xử lý

sinh UI bằng AI
export Tailwind
bàn giao DESIGN.md
theo dõi quota
biến thể thiết kế