用途
stitch-design-md 是一个设计系统文档生成技能，目标是把 Stitch 项目中已有的设计资产分析并综合为一份名为 DESIGN.md 的语义化设计系统文件。DESIGN.md 是提示 Stitch 生成与现有设计语言一致的新屏幕时的“事实来源”，Stitch 通过视觉描述和具体颜色值来理解设计。
主要能力
该技能通过 Stitch MCP 获取项目与屏幕数据，可调用 stitch-mcp-list-projects、stitch-mcp-list-screens、stitch-mcp-get-screen、stitch-mcp-get-project（或客户端带前缀的底层 MCP 工具）来检索元数据并下载 HTML/截图。分析过程包括：提取项目身份（标题与 Project ID）；从截图和 HTML 定义氛围（情绪、密度、美学）；映射色彩调色板（描述性名称、十六进制值、功能角色）；翻译几何与形状（如 rounded-full 对应“药丸形”、rounded-lg 对应“轻微圆角”、rounded-none 对应“锐利方角”）；描述深度与层次（阴影与图层，如“扁平”“极轻柔扩散阴影”“重投影”等）。
使用方式
前提条件：已配置 Stitch MCP Server；拥有至少一个已设计屏幕的 Stitch 项目。
当用户提供 Stitch 设计 URL 时：解析 URL 中的 projectId（/projects/ 之后、? 之前的部分）和 screenId（查询参数 node-id），直接调用 get_screen，无需先调用 list_projects 或 list_screens，随后下载资产并进入分析与综合。
当项目/屏幕 ID 未知时：先运行 list_tools 找到 Stitch MCP 前缀；若 Project ID 未知，调用 list_projects（filter: "view=owned"），按标题识别目标项目并从 name 中提取 Project ID；若 Screen ID 未知，调用 list_screens（仅传数字 projectId），按标题识别目标屏幕并提取 Screen ID；然后调用 get_screen 获取 screenshot.downloadUrl、htmlCode.downloadUrl、width、height、deviceType 和项目 designTheme；使用 web_fetch 或等价方式下载 HTML 与截图，解析 HTML 中的 Tailwind 类、自定义 CSS 和组件模式；最后调用 get_project（传完整路径 projects/{id}）获取 designTheme、字体、圆角、自定义颜色和布局原则。
输出格式
输出为 Markdown，结构包括：设计系统标题与 Project ID；视觉主题与氛围；色彩调色板与角色（描述性名称 + 十六进制 + 功能角色）；排版规则（字体族、标题与正文的字重、字距）；组件样式（按钮、卡片/容器、输入/表单）；布局原则（留白、边距、网格对齐）；以及供 Stitch 生成使用的设计系统说明（可复制进 Stitch 提示的语言与颜色引用）。
适用场景
首次使用时，从现有 Stitch 屏幕生成 DESIGN.md；多页面场景中，可用 stitch-ui-prompt-architect 将 DESIGN.md 第 6 节注入提示，用 stitch-loop 进行基于接力的多页构建；框架对齐时，针对特定框架约束（Layui、Element Plus、uView 等），可将 DESIGN.md 与对应的 stitch-ui-design-spec-* 契约结合使用。
限制与注意事项
约束：仅当用户明确提到“Stitch”或准备为 Stitch 生成准备设计系统文档时才使用此技能。常见误区包括：使用未翻译的技术术语（如直接写 rounded-xl 而非“宽大圆角”）、省略颜色代码或只写描述性名称、跳过设计元素的功能角色、氛围描述含糊、忽略阴影或间距模式。最佳实践要求描述性（如“海洋深蔚蓝 #0077B6”而非“蓝色”）、功能性（说明每个元素的用途）、一致性（术语统一）、精确性（自然语言后附精确值）。