整理 Stitch 设计系统
design-md · Google Labs Code分析已有 Stitch 项目，把配色、字体、间距与组件规律整理成 DESIGN.md，供后续页面沿用。
- 输出
- DESIGN.md
- 需要
- 已有 Stitch 项目与 Stitch MCP
ZIP · 17 KB · Apache-2.0
用途与边界
- 准备什么
- 已有 Stitch 项目，以及用来确定视觉风格的参考页面。
- 运行条件
- Stitch MCP 和项目访问权限，以及能读取页面素材、写入 Markdown 的 AI 工具。
- 使用边界
- 主要用于 Stitch 项目，不是通用的 Figma 导出器。该仓库属于实验项目，作者明确说明它不是受正式支持的 Google 产品。
试一个设计任务
技能加载后，复制任务并替换为你的需求。
使用 design-md，分析我的 Stitch 项目 [项目 ID]，以 [页面名称] 为参考。读取页面和 HTML，把配色的准确数值、字体、间距与组件规律整理成 DESIGN.md。区分已有设计事实和建议规则，并说明新页面如何沿用这套风格。安装说明
适用于 Claude 的 Code／项目入口；聊天和 Cowork 的技能在账户设置中管理。
放入技能目录，或使用安装命令
下载并解压，保留完整的 design-md 文件夹，放入项目的 .claude/skills/ 目录。
或在项目终端运行命令，需要 Node.js / npx。命令获取作者最新版本，可能与下载包不同。
查看原作者安装说明npx skills add google-labs-code/stitch-skills --skill design-md --agent claude-code确认技能已加载
重新打开工具，在技能列表中确认 design-md 可用。若没有出现，请按原作者说明检查安装目录。
检查结果
- 设计变量数值能对应到参考页面的真实样式。
- 已有样式与建议规则有清楚区分。
- 规范能为下一张页面提供可复用的指导。