AI灵感世界AI Skills · 设计stitch-skills
入馆：2026 年 11 月 4 日
stitch-skills
配合 Google Stitch 的 Skill 合集，帮开发者把设计稿转成代码。
- 生态
- Agent Skills
- Skill 分类
- 设计
- 创建者 / 机构
- Google Labs（google-labs-code）
它是什么
Stitch Design Skills 是 Google Labs 团队（GitHub 组织 google-labs-code）发布的一组 Skill 和插件，配合 Google 的 AI 设计工具 Stitch 使用。它分三组：设计组可以用文字或图片生成界面、把现有前端代码上传成 Stitch 设计；构建组把 Stitch 设计稿转成 React、React Native 组件，或做成项目演示视频；工具组帮你改写提示词、生成 DESIGN.md 设计规范。它特别在设计和代码能双向转换，并遵循 Agent Skills 开放标准，Codex、Antigravity、Gemini CLI、Claude Code、Cursor 都能装。
亮点：
- react-components 会把设计稿拆成模块化的 Vite 加 React 组件，并做自动校验
- stitch-loop 能从一句提示生成多页网站
- react-vite-dashboard 里有读取区块链合约数据的看板写法
- README 写明它没有 Google 官方支持。
怎么用：
- 先按 Stitch 官方文档配好 Stitch MCP 服务
- 再安装插件，比如 Claude Code 运行 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
- 最后对 Agent 说任务，比如“把 Stitch 项目里的所有页面转成 React 组件”。
适合谁：
用 Stitch 出设计、再落到前端代码的开发者。
使用前提：
- 需要 Node 和能用 Stitch 的 Google 账号，并先配好 Stitch MCP 和对应的凭据。
- 设计和截图会上传到 Stitch，部分流程会联网抓取页面。
- 有些流程会全局安装 puppeteer；Web3 看板那项涉及钱包连接和合约读取，文档要求只读、不嵌入私钥，相关内容不构成投资建议。
- 使用这些功能前，请自己斟酌安全，由此产生的后果与本站无关，本站一概不负责。
- Stitch 的费用和额度以官网为准。
- 许可证是 Apache-2.0。
以上根据项目公开说明整理，本站没有实际测试。