Stitch Skills

从源码设计规则到 Stitch 屏幕与 React 交付

三个插件串联本地设计文档、Stitch 生成与导入、前端转换。先按输入选技能，再准备该路径需要的服务和工具。

作者 google-labs-code

安装与上手查看 GitHub
Stitch Skills：从源码设计规则到 Stitch 屏幕与 React 交付 项目图片

作者列出的使用环境

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • OpenCode
  • Antigravity
GitHub Star
8,638
版本
1.0
资料核对
分类
设计与视频工程开发

第一次先提取一份能核对的设计文档

已有前端代码时，先生成本地 DESIGN.md，把样式规则与来源整理清楚；再决定是否上传 Stitch 继续设计。已有 Stitch 屏幕则可直接走 React 转换，并检查下载、路由与类型结果。

选一个任务，开始使用

如果你有 React/Tailwind 项目，先在仓库根目录安装插件并运行第一条本地提取任务。准备进入 Stitch 的任务时，再按作者连接说明配置 MCP，并用列出项目验证连接。

按手中的材料选任务

已有 React/Tailwind 项目，想弄清颜色、字体和组件规则时，从这一项开始。只读源码即可，不要求先运行应用或连接 Stitch。

  1. 安装项目级插件

    在目标项目的终端运行作者的 Claude Code 插件安装命令。按任务准备 stitch-design、stitch-build、stitch-utilities；第一项只需 design，生成主题还会用到 utilities，React 转换使用 build。完整保留所选技能的脚本、参考和示例。

    npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
    查看作者安装说明

    首次路径：在现有仓库生成 DESIGN.md

    打开目标 React/Tailwind 项目的根目录，确认助手能读取 package.json、全局 CSS、配置与组件文件。在终端执行上方安装命令，确保 stitch-design 已可用，再在 Claude Code 粘贴第一条任务提示词。本次配置明确为“只读源码、写本地文档、不上传”，无需先运行应用。完成后打开 .stitch/DESIGN.md，检查开头的 name/colors YAML，并挑主色、字体和断点回到原文件核对。想进入云端设计时，再准备 brief.md、copy.md 和 Stitch 项目。

    查看作者安装与前置条件

  2. 把这段话发给 AI

    提示词是编辑编写的操作方案，文件名和项目地址请替换成你的材料。结果为预期交付；本站未连接账号生成设计或执行这些脚本。

    使用 stitch::extract-design-md，分析当前 React/Tailwind 项目并写入 .stitch/DESIGN.md。 先读 package.json，查找实际的 Tailwind 配置、全局 CSS、theme/tokens 和根布局，再选 5–8 个有代表性的布局、按钮、卡片、导航和表单组件。配置文件不存在时按真实样式来源继续，不创建虚构配置。 文件以包含 name 和 colors 的 YAML 开头，再说明视觉基调、颜色用途、字体层级、组件状态、间距、断点及布局。保留真实数值；区分主题定义与组件覆盖，对近似颜色列出差异和整理建议，不把推断写成原始设计意图。 在文末附来源文件与关键规则的对应关系，列出无法从源码确认的内容。若已有 DESIGN.md，先阅读并保留仍有效的人工说明。 本次只做本地文档，不启动应用、不上传 Stitch。交付 .stitch/DESIGN.md，并用源文件抽查主色、字体、按钮状态和一个响应式断点。

  3. 检查你拿到的结果

    • 带 name/colors 前置数据及完整设计说明的 .stitch/DESIGN.md。
    • 样式规则与源文件的对应关系，组件覆盖和不确定项单独列明。
    • 主色、字体、状态和断点的源码核对记录。
    查看这项任务的作者说明
进一步了解这个 Skill

Stitch Skills 由 google-labs-code 仓库维护，按 design、build、utilities 三个插件组织。当前固定源码中有 16 个 SKILL.md；本页围绕四条实际路径展开，其他能力放在下方选择地图中。

它的价值在于把不同阶段的材料接起来：从源代码提取设计规则，从运行页面保存静态状态，在 Stitch 项目中建立主题、生成和修改屏幕，再将屏幕转为可继续开发的组件。各阶段保存的 DESIGN.md、HTML、截图和 metadata.json 让后续工作有明确依据。

连接要求取决于任务。源码盘点、SITE.md 和提示词整理可以先在本地完成；获取 Stitch 设计或在云端生成、编辑、上传时才需要服务连接。安装插件后仍要确认工具可用，相关脚本也只承担各自的提取、传输或检查工作。

来源与核验

资料核对

文档与实现按固定提交 0337446 核对；版本栏显示仓库最新发布 v1.0，该标签与本次源码快照不同。未安装插件、连接 Stitch、运行快照或生成应用。

作者说明作者安装与插件目录源码提取设计系统生成与修改屏幕设计系统创建与应用React 转换流程与检查Google 官方连接示例Apache-2.0 许可

继续了解相关技能

根据任务方向继续选择。

Baoyu Design五个设计入口：baoyu-design 推进界面方案与交付，claude-design 在画布里改字、调样式和比较。OpenDesign把简报、参考和设计规范交给 AI，在 OpenDesign 应用里生成网页原型或演示稿，边看边改。Taste Skill让 AI 从品牌材料或业务数据出发，确定设计方向、实现网页，并用浏览器截图检查官网与应用界面。Remotion 官方技能12 个官方入口覆盖建工程、动画、字幕、地图和导出，把 React 视频做成可验收的工程。