Stitch Agent Skills

Google Labs 出品的 UI 设计 Agent 技能库，专为 Stitch MCP Server 生态打造。

功能介绍

Stitch Skills 让 AI 编码助手具备专业级 UI 设计能力。每个技能遵循 Agent Skills 开放标准，兼容 Claude Code、Cursor、Gemini CLI 等主流 Agent。

7 个核心技能：

• stitch-design：统一设计入口，处理提示词增强、设计系统合成、高保真屏幕生成
• stitch-loop：从单个提示词生成完整多页面网站，自动文件组织和验证
• design-md：分析 Stitch 项目并生成 DESIGN.md 设计文档
• enhance-prompt：将模糊的 UI 想法优化为 Stitch 专用提示词
• react-components：将 Stitch 屏幕转为 React 组件系统，自动验证和设计 Token 一致性
• remotion：用 Remotion 从 Stitch 项目生成产品演示视频（平滑过渡、缩放、文字覆盖）
• shadcn-ui：shadcn/ui 组件集成专家，帮助发现、安装、定制组件

安装步骤

# 查看所有可用技能
npx skills add google-labs-code/stitch-skills --list

# 安装特定技能
npx skills add google-labs-code/stitch-skills --skill react:components --global
npx skills add google-labs-code/stitch-skills --skill stitch-design --global
npx skills add google-labs-code/stitch-skills --skill remotion --global

# 全局安装所有技能
npx skills add google-labs-code/stitch-skills --global

使用示例

安装 stitch-loop 后，AI Agent 可以从一句话生成完整网站：

帮我生成一个 SaaS 落地页，包含 Hero、Features、Pricing、FAQ 四个页面

安装 react-components 后：

把这个 Stitch 屏幕转换成 React 组件，使用 TypeScript 和 Tailwind CSS

安装 remotion 后：

为这个 App 生成一个 30 秒的产品演示视频

GitHub: https://github.com/google-labs-code/stitch-skills (4.8k stars)