Stitch Skills cho AI Agent: Thư viện skill của Google

Vấn đề nó giải quyết

Google Stitch mở một MCP server để agent tạo và quản lý thiết kế, nhưng nối một coding agent vào đó thường có nghĩa là tự viết prompt và glue cho từng tác vụ — chuyển code này thành thiết kế, tạo ba biến thể màn hình, đồng bộ dự án sang React. Việc đó bị làm lại trong mọi repo và mọi agent. Bộ này đóng gói các workflow đó thành skill tái dùng được để phần prompt và kiểm tra nằm ở một chỗ.

Đây là gì?

Stitch Skills là một bộ Stitch skills cho AI agent, do Google Labs (google-labs-code) phát hành dưới giấy phép Apache-2.0. Mỗi skill theo chuẩn mở Agent Skills từ agentskills.io, nên cùng một skill chạy được trên Codex, Antigravity, Gemini CLI, Claude Code và Cursor. Repo gom skill thành ba plugin — stitch-design, stitch-build và stitch-utilities — và mỗi skill là một thư mục gồm SKILL.md, script cho việc kiểm tra và kết nối mạng, checklist tài nguyên và ví dụ tham chiếu. README nói rõ đây không phải sản phẩm được Google hỗ trợ chính thức.

Vì sao đang được chú ý

Stitch skills cho AI agent nằm ở giao điểm của hai thứ đang được chú ý: Google Stitch như một bộ sinh thiết kế, và chuẩn mở Agent Skills như một cách di động để dạy coding agent workflow mới. Repo đã thu hút khoảng 6.900 sao GitHub, và điểm bán là một thư mục skill chạy y hệt trên Claude Code, Cursor, Codex và Gemini CLI thay vì bị khóa vào một agent. Nó phủ trọn vòng lặp — prompt text ra thiết kế, thiết kế ra React hay React Native, và quay lại một hệ thống DESIGN.md.

Tính năng chính

• ✓Plugin stitch-design: các skill chuyển code thành thiết kế, tạo và chỉnh sửa màn hình, quản lý hệ thống thiết kế và upload asset lên một dự án Stitch
• ✓Plugin stitch-build: các skill biến màn hình Stitch thành component React hoặc React Native, tạo video walkthrough bằng Remotion và tích hợp shadcn/ui
• ✓Plugin stitch-utilities: enhance-prompt (biến ý tưởng mơ hồ thành prompt tối ưu cho Stitch), stitch-loop (site nhiều trang từ một prompt) và các bộ sinh DESIGN.md
• ✓Dựng trên chuẩn mở Agent Skills, nên một skill chạy trên Codex, Antigravity, Gemini CLI, Claude Code và Cursor mà không cần viết lại
• ✓Mỗi skill đi kèm SKILL.md cùng script, tài nguyên và ví dụ — phần logic prompt và kiểm tra được check-in trong repo, không để bạn tự lo
• ✓Cài toàn bộ dạng plugin qua marketplace, hoặc lấy từng skill riêng lẻ bằng lệnh npx skills

Trường hợp dùng tốt nhất

• •Upload một codebase frontend sẵn có vào một dự án Stitch để di trú hoặc lặp lại trên thiết kế
• •Tạo màn hình mới, chỉnh sửa màn hình sẵn có, hoặc sinh nhiều biến thể thiết kế từ một prompt ngôn ngữ tự nhiên
• •Chuyển màn hình Stitch thành hệ component React hoặc React Native với tính nhất quán về design token
• •Trích một hệ thống thiết kế DESIGN.md thẳng từ mã nguồn, rồi áp lại nó lên các màn hình
• •Dựng một website nhiều trang từ một prompt duy nhất bằng skill stitch-loop

Cách cài đặt / dùng thử

Cài các plugin toàn cục qua marketplace Stitch Skills. Với Codex: `codex plugin marketplace add google-labs-code/stitch-skills --ref main`, rồi cài bất kỳ trong stitch-design, stitch-build hoặc stitch-utilities. Với Claude Code: `npx plugins add google-labs-code/stitch-skills --scope project --target claude-code`; với Cursor, đổi thành `--scope workspace --target cursor`. Để lấy skill lẻ thay vì cả plugin, chạy `npx skills add google-labs-code/stitch-skills`. Điều kiện tiên quyết: Stitch MCP server phải được cấu hình và chạy trong môi trường agent của bạn trước, theo tài liệu setup Stitch MCP của Google, nếu không các skill không có gì để giao tiếp.

Cách sử dụng

Các skill điều khiển bằng prompt. Khi plugin và Stitch MCP server đã sẵn sàng, bạn ra lệnh bằng ngôn ngữ thường và skill xử lý workflow — ví dụ "Make a browse tab for a mobile app for romance and date night ideas," "Convert all screens in Stitch project projects/123 to React components," hoặc "Scan /src and extract the design system into .stitch/DESIGN.md." README liệt kê một ví dụ prompt cho từng skill. Lưu ý các skill thường phụ thuộc lẫn nhau, nên nếu cài lẻ bạn cần thêm cả các dependency của chúng.

Lựa chọn thay thế

Ai nên thử — và ai nên bỏ qua

Các đội đã dùng Google Stitch và điều khiển một coding agent — Claude Code, Codex, Cursor hay Gemini CLI — muốn một cách lặp lại được để đi từ prompt tới thiết kế tới React mà không phải viết lại glue mỗi lần. Nếu bạn không dùng Stitch, hoặc không muốn dựng Stitch MCP server và credentials trước, bộ này không có gì cho bạn. Nó cũng là tham chiếu tốt nếu bạn đang tìm hiểu cách chuẩn mở Agent Skills tổ chức một thư viện skill thật, đã phát hành.

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