stitch

Google Stitch — 技能包

此文件夹包含用于使用 Google Stitch 的 6 个子技能。Google Stitch 是一个带有 MCP 服务的设计转代码平台。每个子技能都有自己的 SKILL.md，其中包含完整说明。

前提条件

大多数技能都需要连接 Stitch MCP Server。shadcn-ui 技能可独立使用 shadcn MCP 服务或 CLI。

---

🔀 流程编排协议（请先阅读）

你必须遵循此协议。 不要只加载一个子技能就停止。Stitch 技能包是一条流程——每个技能都会为下一个技能提供输入。你的任务是引导用户完成整个流程，并在每个技能完成后建议下一步。

完整流程（设计 → 代码 → 视频）

┌─────────────┐     ┌─────────────────┐     ┌──────────────┐     ┌───────────────┐     ┌──────────┐
│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │ ──→ │   react-      │ ──→ │ remotion │
│ STEP 1      │     │ STEP 2          │     │ STEP 3       │     │ components    │     │ STEP 5   │
│             │     │                 │     │              │     │ STEP 4        │     │          │
│ Extract the │     │ Polish prompts  │     │ Build pages  │     │ Convert HTML  │     │ Create a │
│ design      │     │ with design     │     │ iteratively  │     │ to production │     │ video    │
│ system      │     │ tokens from     │     │ using the    │     │ React/TS      │     │ showcase │
│ → DESIGN.md │     │ DESIGN.md       │     │ baton system │     │ components    │     │ of your  │
│             │     │ → next-prompt   │     │ → full site  │     │ → src/        │     │ screens  │
└─────────────┘     └─────────────────┘     └──────────────┘     └───────────────┘     └──────────┘
                                                                        │
                                                                  ┌─────┴──────┐
                                                                  ▼            │
                                                        ┌──────────────┐       │
                                                        │  shadcn-ui   │       │
                                                        │ COMPANION    │       │
                                                        │              │       │
                                                        │ Add polished │       │
                                                        │ UI component │       │
                                                        │ library      │       │
                                                        └──────────────┘       │

如何编排

完成任何子技能后，你必须：

1. 告诉用户已完成的工作
2. 说明流程中的下一个合理步骤
3. 询问用户是否要继续下一步
4. 如果用户同意，加载该子技能的 SKILL.md 并继续

流程示例：

✅ design-md complete → "Your DESIGN.md is ready. Next step: I can polish 
   your first page prompt using enhance-prompt so Stitch generates a 
   higher-quality result. Want to continue?"

✅ enhance-prompt complete → "Your prompt is optimized. Next step: I can 
   send this to Stitch and start building pages with stitch-loop. Ready?"

✅ stitch-loop complete → "Your site pages are built. Two options now:
   1. react-components — Convert these HTML pages into production React/TS
   2. remotion — Create a walkthrough video showcasing the screens
   Which would you like?"

✅ react-components complete → "Your React components are ready. You might 
   also want to:
   • Add shadcn/ui components for polished form inputs, buttons, dialogs
   • Create a remotion walkthrough video of the original designs
   Want either of those?"

决策树：从哪里开始

并非所有用户都会从第 1 步开始。请使用此决策树：

用户说……	从此处开始	然后建议……
“用 Stitch 帮我构建一个网站”	design-md（第 1 步）	完整流程
“我有一个 Stitch 项目，帮我统一风格”	design-md（第 1 步）	enhance-prompt → stitch-loop
“用 Stitch 生成一个页面”	enhance-prompt（第 2 步）	stitch-loop
“我有 Stitch HTML，帮我改成 React”	react-components（第 4 步）	使用 shadcn-ui 添加组件
“把我的 Stitch 屏幕做成视频”	remotion（第 5 步）	完成（独立使用）
“我需要 React 应用的 UI 组件”	shadcn-ui（配套技能）	完成（独立使用）
“帮我改进 Stitch 提示词”	enhance-prompt（第 2 步）	stitch-loop
“我已经有 DESIGN.md，帮我构建页面”	stitch-loop（第 3 步）	react-components

各技能用途（快速参考）

技能	用途	输入	输出	需要
design-md	从现有屏幕提取设计系统	包含屏幕的 Stitch 项目	DESIGN.md	Stitch MCP
enhance-prompt	将模糊的提示词润色为针对 Stitch 优化的提示词	用户想法 + 可选的 DESIGN.md	优化后的提示词 / next-prompt.md	无（Stitch MCP 可选）
stitch-loop	迭代构建多页面网站	DESIGN.md + next-prompt.md	site/public/ 中的完整网站	Stitch MCP
react-components	将 Stitch HTML 转换为可用于生产环境的 React/TS	Stitch 屏幕 HTML	src/ 中的 React 组件	Stitch MCP
remotion	根据屏幕截图制作演示视频	Stitch 项目屏幕截图	Remotion 项目 + .mp4	Stitch MCP + Remotion
shadcn-ui	添加精致的 UI 组件库	任意 React/Next.js 项目	components/ui/ 中的组件	shadcn CLI 或 MCP

---

子技能目录

使用任何子技能前，请阅读其链接的 SKILL.md。

1. design-md — 设计系统提取（第 1 步）

→ 阅读 SKILL.md

内容： 分析 Stitch 项目屏幕，并生成语义化的 DESIGN.md 文件，记录视觉设计系统（颜色、排版、深度、布局和组件样式）。

适用场景：

• 开始新的多页面项目，需要设计系统参考
• 初次接触现有 Stitch 项目
• 需要在 Agent 生成的屏幕中保持一致的设计语言

输出： DESIGN.md 文件

➡️ 下一步： enhance-prompt — 使用 DESIGN.md 编写润色后的提示词，以生成页面。

2. enhance-prompt — 提示词增强（步骤 2）

→ 阅读 SKILL.md

**功能：**将模糊的 UI 想法转换为经过润色、结构清晰且针对 Stitch 生成进行优化的提示词。添加 UI/UX 关键词、设计系统上下文和页面结构。

适用场景：

• 用户给出模糊的提示词，例如“帮我做一个登录页面”
• 上一次 Stitch 生成的结果不理想
• 需要将 DESIGN.md 中的设计令牌注入提示词

**输出：**增强后的提示词文本或 next-prompt.md 文件

➡️ 下一步：stitch-loop — 将增强后的提示词输入迭代构建循环，以生成实际页面。

---

3. stitch-loop — 迭代构建循环（步骤 3）

→ 阅读 SKILL.md

**功能：**通过自主的接力循环构建多页面网站。每次迭代都会读取任务（next-prompt.md）、生成页面、将其集成、更新文档并写入下一项任务。

适用场景：

• 从头开始构建完整的多页面网站
• 需要自主、持续地生成页面
• 希望采用由站点地图驱动的结构化构建流程

依赖：design-md（用于 DESIGN.md）、enhance-prompt（用于接力提示词） 输出：site/public/ 中的完整网站、更新后的 SITE.md

**➡️ 下一步：**选择以下一项或两项：

• react-components — 将生成的 HTML 页面转换为可用于生产环境的 React/TypeScript 组件。
• remotion — 创建展示已完成界面的演示视频。

---

4. react-components — 设计转 React（步骤 4）

→ 阅读 SKILL.md

**功能：**将 Stitch 生成的 HTML 转换为模块化 React/TypeScript 组件，并提供恰当的 props 接口、模拟数据层和基于 AST 的验证。

适用场景：

• 将 Stitch 界面转换为生产级 React 代码
• 需要从 HTML 中提取类型安全、模块化的组件
• 希望自动验证组件架构

输出：src/ 中的 React 组件、src/data/mockData.ts 中的模拟数据

**➡️ 下一步：**可以考虑：

• shadcn-ui — 将自定义 UI 基础组件（按钮、输入框、对话框）替换为 shadcn/ui 组件，打造精致且易于访问的组件库。
• remotion — 如果尚未创建演示视频，可以使用它来创建。

---

5. remotion — 演示视频（步骤 5）

→ 阅读 SKILL.md

**功能：**使用 Remotion 根据 Stitch 项目截图生成演示视频，并添加平滑转场、缩放效果和文本叠加。

适用场景：

• 需要展示设计界面的视频
• 希望制作专业的应用演示
• 根据 Stitch 设计制作演示集锦

**注意：**对于一般的 Remotion 工作（非 Stitch 专用），请改用主 remotion 技能——它包含来自 Remotion 官方仓库的 25+ 个规则文件。

**输出：**Remotion 项目 + 渲染后的 .mp4

**➡️ 这通常是工作流中的最后一步。**没有自动的下一步，但你可以建议分享或发布视频。

---

6. shadcn-ui — 组件库（配套技能）

→ 阅读 SKILL.md

**功能：**提供集成 shadcn/ui 组件的专业指导，涵盖发现、安装、自定义、变体、区块和无障碍性。可与 shadcn MCP 服务或 CLI 配合使用。

适用场景：

• 在新项目中设置 shadcn/ui
• 安装或自定义 shadcn 组件
• 构建表单、数据表、身份验证布局或仪表板
• 需要使用 cva 的组件变体模式
• 使用 react-components 后——将自定义基础组件替换为 shadcn/ui

注意：此技能可独立于 Stitch 使用，适用于任何 React/Next.js 项目。可将其视为与主工作流搭配使用的配套技能，尤其适合在 react-components 之后使用。

输出：components/ui/ 中已安装的组件、已配置的 components.json

---

典型工作流

完整工作流（新项目）

1. design-md      → Analyze an existing screen → get DESIGN.md
2. enhance-prompt → Write a prompt for the next page → inject design tokens
3. stitch-loop    → Generate page → integrate → write next baton → repeat
4. react-components → Convert final HTML pages to production React
5. remotion       → Create a walkthrough video of the finished product

快速构建（单页面）

1. enhance-prompt → Polish the user's idea into a great prompt
2. Generate directly with Stitch MCP → get HTML
3. react-components → Convert to React (optional)

仅设计系统

1. design-md → Document an existing project's visual language

仅视频

1. remotion → Create a walkthrough video from existing Stitch screenshots

仅组件库

1. shadcn-ui → Set up and customize shadcn/ui components

独立使用

• shadcn-ui — 可随时用于 React/Next.js UI 组件开发（无需 Stitch）
• design-md — 可独立用于记录任何项目的设计系统
• enhance-prompt — 可独立用于改进任何 UI 生成提示词

致谢

• 基于 stitch-skills
• 这不是 Google 官方支持的产品。本项目不符合 Google 开源软件漏洞奖励计划的参与资格。