技能参考

Stitch Design Skills 分为三个插件。每个技能都遵循 Agent Skills 开放标准，并可与任何兼容的编码智能体配合使用。

stitch-design

用于创建、捕获和管理设计的核心设计工作流。

code-to-design

编排完整的导入流水线：检测框架 → 提取静态 HTML → 提取设计 token → 上传到 Stitch。

依赖项： extract-static-html、extract-design-md、upload-to-stitch

generate-design

根据文本或图片生成新屏幕、编辑现有屏幕，并创建设计变体。

MCP 工具： generate_screen_from_text、edit_screens、generate_variants、list_projects、create_project、list_design_systems

manage-design-system

上传 DESIGN.md 规格，创建项目级设计系统，并将其应用到屏幕。

MCP 工具： create_design_system_from_design_md、apply_design_system、list_design_systems、upload_design_md

extract-design-md

从 React、Vue、Svelte、Angular、原生 CSS 或 Tailwind 等前端源代码中逆向推导出 DESIGN.md。无需构建步骤。

流水线： 扫描源代码树 → 检测框架 → 提取 token → 规范化 → 去重 → 生成 DESIGN.md

extract-static-html

从正在运行的 Web 应用中捕获自包含的 HTML 快照，内联 CSS 并将图片转换为 base64。

upload-to-stitch

通过独立脚本把本地素材（图片、HTML）上传到 Stitch REST API，从而绕过 LLM 的输出 token 限制。

stitch-build

基于 Stitch 设计进行代码生成和媒体合成。

react-components

把 Stitch 屏幕转换为模块化的 React 组件层级，同时提取 Tailwind 主题并进行基于 AST 的校验。

remotion

使用 Remotion 从 Stitch 项目生成演示视频，支持弹簧动画缩放效果和可配置的转场。参见 生成演示视频。

shadcn-ui

集成 shadcn/ui 组件的专业指导——包括使用 Radix UI 和 Tailwind CSS 进行发现、安装和定制。

stitch-utilities

在流水线两端提升质量。

design-md

分析现有 Stitch 项目中的屏幕，并根据渲染输出综合生成 DESIGN.md。这是设计 → token 方向（与 extract-design-md 的代码 → token 方向相对）。

MCP 工具： list_screens、get_screen、upload_design_md、list_projects、get_project

enhance-prompt

把模糊的想法转化为结构化、可直接用于生成的提示词，并附上 UI/UX 关键词、设计系统上下文和页面结构。

stitch-loop

使用接力棒模式编排自主的多页站点生成。参见 构建多页站点。

taste-design

生成符合反同质化标准的高端 DESIGN.md 文件——包括经过校准的色彩科学、音程字号阶梯、弹簧物理动效，以及一份明确的反模式目录。参见 创建高端设计系统。

单独安装技能

推荐安装完整插件套件。如果你只需要特定技能：

# Design only (generate and edit screens)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::generate-design,stitch::manage-design-system,enhance-prompt

# Import existing code (full migration pipeline)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::code-to-design,stitch::extract-design-md,stitch::extract-static-html,stitch::upload-to-stitch

# Code generation (Stitch to React)
npx skills add google-labs-code/stitch-skills \
  --skills react:components,shadcn-ui

许多技能之间存在相互依赖。选择性地安装之前，请先查看上文的依赖项列表。