核心思想
作者的设计原则、与同类项目的差异化定位、关键工作流的简要介绍。文中提到的技能名称会自动链接到对应技能页。
Stitch Design Skills 是一套遵循 Agent Skills 开放标准的 Agent 技能集，为 Codex、Claude Code、Cursor 等编码代理扩展 Google Stitch 的设计与构建工作流。分为三个插件：
技能可组合，且依赖 Stitch MCP 服务。典型流程：增强提示词 → 在 Stitch 生成/编辑设计 → 提取/管理 DESIGN.md → 上传资源 → 构建到目标框架。通过插件市场或 npx skills add 选择性安装。最佳实践：选择性安装时务必包含全部依赖项。
技能关系
Skill → Skill 的使用关系，可跨层指向。同色块表示同一类技能形态。
技能组成
每个技能都为某种调用者设计——有的必须由你点名触发，有的则由模型自动按上下文加载。下面的两张卡片一眼看清整个技能集的触发分工。
这些技能期待被用户手动直接点名使用。
由模型在判断上下文相关时自动使用，通常不需要点名调用。
技能清单
通过分析 Stitch 项目（借助 MCP 工具）将语义化设计系统综合为 DESIGN.md。从屏幕提取颜色、字体与布局，并把技术值转为描述性语言。产出作为真理之源的文件，提升 Stitch 提示词一致性与新屏幕风格对齐。
将模糊的 UI 想法转化为面向 Stitch 优化的精致提示词：通过评估输入、注入设计系统上下文、应用关键词与结构增强。产出结构化提示词，提升 Stitch 生成质量与一致性。
将 Stitch 设计转换为生产级 React+Vite 仪表盘，使用 TanStack Query 与 DESIGN.md 令牌。提供 HTML 到 React 映射、Web3 就绪模式与无障碍检查。产出为结构清晰、令牌精准、可访问的前端项目。
使用 Remotion 从 Stitch 项目生成带平滑转场、缩放和文字叠加的演示视频。通过 Stitch MCP 获取界面，构建基于 React 的 Remotion 合成并渲染 MP4/WebM。价值：将静态设计转化为吸引人的视频演示，用于推介与文档。
提供 shadcn/ui 组件集成与构建专家指导。通过 MCP 工具发现组件，使用 CLI 安装，结合 Tailwind 与 cva 定制，并遵循可访问性最佳实践。产出配置正确、自主可控且可定制的 React UI，减少错误并加快开发。
教导智能体通过自主接力循环模式使用 Stitch 迭代构建网站。方法：读取接力任务、用 Stitch MCP 生成页面、整合 HTML、更新文档与下一棒。价值：持续、风格一致的多页站点生成，元数据持久化且编排方式无关。
通过依次调用 extract-static-html、extract-design-md、manage-design-system 和 upload-to-stitch，将现有前端代码转为 Stitch 设计。产出含独立 HTML 与 DESIGN.md 设计系统的 Stitch 项目，便于持续迭代优化。
分析前端源代码，无需构建应用即可提取完整设计系统并生成 DESIGN.md。先检测框架、映射目录、阅读参考，再从源文件提取颜色、排版、组件和布局。产出可供 Stitch 使用的设计文档，用于审计或迁移。
从任意 Web 应用提取自包含静态 HTML 文件，支持 Puppeteer 快照、浏览器子代理或 MockPage 兜底方案。将 CSS 与图片内联为 base64，产出可移植 HTML，用于设计提取或归档，无框架限制。
通过 MCP 工具从文本、图片或模型创建和编辑 Stitch 设计屏幕，并生成变体。使用提示增强流程结合设计映射与关键词，委派设计系统管理，本地下载资源。产出带元数据的结构化 UI 设计，支持迭代优化。
从现有界面或文字描述在 Stitch 中创建项目设计系统的“单一事实来源”。使用 MCP 工具与 upload-to-stitch 脚本生成 DESIGN.md、创建或更新设计系统并应用到界面。确保未来所有 UI 工作视觉语言一致。
通过强制的四阶段工作流（检索、提取样式、架构规范、执行）将 Google Stitch 设计转换为干净、模块化的 React 组件。使用下载脚本与校验工具，确保生成类型安全、主题映射、可导航且贴合设计的代码。
通过强制分阶段工作流将 Stitch 网页设计转为生产级 React Native 代码：用 MCP/脚本获取页面、提取主题令牌、按原子设计映射 HTML 为 RN 组件并保证类型安全。产出模块化、无障碍且对齐设计系统的 RN 源码。
通过 Python 脚本将本地图片、HTML、markdown 文件以 HTTP 方式上传到 Stitch 项目，绕过 MCP 的 base64 token 限制。关键步骤：查找 projectId、提取 API key、用户确认、运行脚本。价值：实现模型无法直接通过 MCP 上传的大文件资源入库。
为 Google Stitch 生成对 Agent 友好的 DESIGN.md 文件，通过严格字体、校准色彩、非对称布局和微动效强制 premium 反通用 UI 标准。方法：将前端工程指令转化为带数值和反模式的 Stitch 语义规则。价值：作为提示词事实来源，生成非通用、高品味界面。
