Stitch 设计系统文档

要解决什么问题

用 Stitch 做界面时，新屏很容易和已有屏在颜色、圆角、阴影和语气上「各写各的」。Stitch 依赖视觉描述配合具体色值来理解设计；若缺少一份可引用的规范，提示词只能零散复述 Tailwind 类名，生成结果难以与现有项目对齐。

本技能面向「已有至少一个界面」的 Stitch 项目，把技术资产整理成项目根目录下的 DESIGN.md，作为引导 Stitch 生成新界面的单一事实来源（source of truth）。

技能如何工作

你以设计系统负责人的角色运作，通过 Stitch MCP Server 拉取可分析的数据，再按固定结构写入 DESIGN.md：

• 发现与定位：list_tools 确认 MCP 前缀；必要时 list_projects / list_screens 解析 projectId、screenId（仅用数字 ID）
• 拉取资产：get_screen 获取截图 URL、HTML/CSS 下载链、尺寸与 designTheme；get_project 补充项目级主题与指南
• 离线解析：下载 HTML，提取 Tailwind 类、自定义 CSS 与组件模式；截图用于把握整体格调
• 语义化综合：项目身份（JSON）、氛围（截图/HTML）、调色板（描述名 + # 色值 + 功能角色）、几何形状（如 rounded-full → 胶囊形）、层次与阴影

输出准则强调：描述性自然语言与精确十六进制色值并存，并解释「为什么」而不仅是「是什么」。撰写前应参考 Stitch Effective Prompting 中的表述习惯。

适用边界与注意点

• 前置条件：可访问 Stitch MCP；项目里至少有一个可参考界面；能联网拉取 htmlCode / screenshot。
• 常见失误：直接写 rounded-xl 而不翻译成设计语言；只写颜色昵称不写 # 值；不写元素的功能角色；氛围描述过于笼统。
• 本技能产出的是文档，不替代在 Stitch 里继续迭代界面；若项目尚无任何屏，应先完成至少一屏设计再运行本流程。