用途
design-md 用于分析 Stitch 项目，并综合出一份语义化的设计系统，输出为名为 DESIGN.md 的文件。该文件的定位是“事实来源”（source of truth），用于提示 Stitch 生成与既有设计语言完美对齐的新屏幕。技能说明 Stitch 通过“视觉描述”并辅以具体色值来理解设计。
主要能力
该技能引导使用者扮演“设计系统负责人”的角色，分析所提供的技术资产，并把设计信息整理为 DESIGN.md。分析维度包括：
- 提取项目身份，包括项目标题与具体 Project ID。
- 定义氛围：根据截图与 HTML 结构捕捉整体“感觉”，使用富有感染力的形容词描述情绪（如轻盈、密集、极简、实用主义）。
- 映射色彩：识别系统中的关键颜色，为每种颜色给出传达其特性的描述性自然语言名称、括号中的具体十六进制色值，以及其具体功能角色（如用于主要操作）。
- 转换几何与形状：把技术性的 border-radius 与布局值转译为物理描述，例如将 rounded-full 描述为“药丸形”，rounded-lg 描述为“轻微圆角”，rounded-none 描述为“锐利、方正的边缘”。
- 描述深度与层级：解释界面如何处理层次，描述阴影的存在与质感（如扁平、低语般柔和的漫射阴影、厚重高对比的投影）。
输出要求包括：语言上仅使用描述性设计术语与自然语言；格式上生成干净的 Markdown 文件并遵循规定结构；精确性上在描述性名称之外包含精确的十六进制色值；语境上解释设计决策背后的“为什么”，而不仅是“是什么”。
使用方式
使用该技能需满足以下前提条件：
- 可访问 Stitch MCP Server。
- 拥有一个至少包含一个已设计屏幕的 Stitch 项目。
- 可访问 Stitch Effective Prompting Guide：https://stitch.withgoogle.com/docs/learn/prompting/
检索与联网流程如下：
- 命名空间发现：运行 list_tools 找到 Stitch MCP 前缀，并在后续调用中使用该前缀（例如 mcp_stitch:）。
- 项目查找（若未提供 Project ID）：调用 [prefix]:list_projects，filter 为 "view=owned"，获取所有用户项目；按标题或 URL 模式识别目标项目；从 name 字段提取 Project ID（例如 projects/13534454087919359824）。
- 屏幕查找（若未提供 Screen ID）：使用 projectId（仅数字 ID，不是完整路径）调用 [prefix]:list_screens；查看屏幕标题识别目标屏幕（如 "Home"、"Landing Page"）；从 screen 的 name 字段提取 Screen ID。
- 元数据获取：使用 projectId 与 screenId（均仅为数字 ID）调用 [prefix]:get_screen，返回完整屏幕对象，包括 screenshot.downloadUrl（设计的视觉参考）、htmlCode.downloadUrl（完整 HTML/CSS 源代码）、width、height、deviceType（屏幕尺寸与目标平台），以及包含颜色与样式信息的项目元数据 designTheme。
- 资产下载：使用 web_fetch 或 read_url_content 从 htmlCode.downloadUrl 下载 HTML 代码；可选地从 screenshot.downloadUrl 下载截图作为视觉参考；解析 HTML 以提取 Tailwind 类、自定义 CSS 和组件模式。
- 项目元数据提取：使用项目名称（完整路径 projects/{id}）调用 [prefix]:get_project，获取包含颜色模式、字体、圆角、自定义颜色的 designTheme 对象，项目级设计指南与描述，以及设备类型偏好与布局原则。
分析与综合步骤对应上述主要能力中的五个维度。
输出格式（DESIGN.md 结构）为：
- 标题：Design System: [Project Title]
- Project ID: [Insert Project ID Here]
-
- Visual Theme & Atmosphere：描述情绪、密度与美学哲学。
-
- Color Palette & Roles：按“描述性名称 + 十六进制色值 + 功能角色”列出颜色。
-
- Typography Rules：描述字体家族、标题与正文的字重使用、字距特征。
-
- Component Stylings：包括 Buttons（形状描述、颜色分配、行为）、Cards/Containers（圆角描述、背景色、阴影深度）、Inputs/Forms（描边风格、背景）。
-
- Layout Principles：描述留白策略、边距与网格对齐。
使用示例（以 Furniture Collection 项目为例）：
- 检索项目信息：使用 Stitch MCP Server 获取 Furniture Collection 项目。
- 获取 Home 页面屏幕详情：检索 Home 页面的代码、图像与屏幕对象信息。
- 参考最佳实践：查阅 Stitch Effective Prompting Guide（https://stitch.withgoogle.com/docs/learn/prompting/）。
- 分析与综合：从屏幕中提取所有相关设计 token；把技术值转译为描述性语言；按 DESIGN.md 结构组织信息。
- 生成文件：在项目目录中创建 DESIGN.md；严格遵循规定格式；确保所有色码准确；使用富有感染力、对设计师友好的语言。
适用场景
适用于需要为 Stitch 项目建立设计系统文档、以便后续提示 Stitch 生成与既有设计语言一致的新屏幕的场景。技能中给出的具体示例为 Furniture Collection 项目中的 Home 页面。
限制与注意事项
该技能强调以下最佳实践：要描述性，避免“蓝色”“圆角”等泛化词，改用“Ocean-deep Cerulean (#0077B6)”或“轻柔弯曲的边缘”；要功能性，始终解释每个设计元素的用途；要一致，文档中术语保持一致；要视觉化，通过描述帮助读者想象设计；要精确，在自然语言描述后用括号包含精确值（十六进制色码、像素值）。
应避免的常见问题包括：使用未转译的技术术语（例如用“rounded-xl”而不是“慷慨的圆角”）；省略色码或仅使用描述性名称；忘记解释设计元素的功能角色；氛围描述过于模糊；忽略阴影或间距模式等细微设计细节。
其他具体功能限制、收费与价格信息、平台支持范围等事实在提供的资料中暂未提供。