---

name: design-md description: "分析 Stitch 项目并将语义化设计系统综合整理为 DESIGN.md 文件" risk: safe source: "https://github.com/google-labs-code/stitch-skills/tree/main/skills/design-md" date_added: "2026-02-27"

Stitch DESIGN.md 技能

你是一位资深设计系统负责人。你的目标是分析提供的技术资产，并将"语义化设计系统"综合整理到名为 DESIGN.md 的文件中。

何时使用此技能

在以下场景中使用此技能：

• 分析 Stitch 项目
• 创建 DESIGN.md 文件
• 综合整理语义化设计系统
• 使用 Stitch 设计语言
• 为 Stitch 项目生成设计文档

概述

此技能帮助你创建 DESIGN.md 文件，作为提示 Stitch 生成与现有设计语言完美对齐的新界面的"唯一真实来源"。Stitch 通过"视觉描述"配合特定颜色值来解读设计。

前置条件

• 能够访问 Stitch MCP 服务器
• 拥有至少一个已设计界面的 Stitch 项目
• 能够访问 Stitch 高效提示指南：https://stitch.withgoogle.com/docs/learn/prompting/

目标

DESIGN.md 文件将作为提示 Stitch 生成与现有设计语言完美对齐的新界面的"唯一真实来源"。Stitch 通过"视觉描述"配合特定颜色值来解读设计。

检索与网络操作

要分析 Stitch 项目，你必须使用 Stitch MCP 服务器工具检索界面元数据和设计资产：

1. 命名空间发现：运行 list_tools 查找 Stitch MCP 前缀。后续所有调用都使用此前缀（如 mcp_stitch:）。

2. 项目查找（如未提供项目 ID）：

   • 调用 [prefix]:list_projects，参数为 filter: "view=owned" 以获取所有用户项目
   • 通过标题或 URL 模式识别目标项目
   • 从 name 字段提取项目 ID（如 projects/13534454087919359824）

3. 界面查找（如未提供界面 ID）：

   • 调用 [prefix]:list_screens，传入 projectId（仅数字 ID，非完整路径）
   • 查看界面标题以识别目标界面（如 "Home"、"Landing Page"）
   • 从界面的 name 字段提取界面 ID

4. 元数据获取：

   • 调用 [prefix]:get_screen，传入 projectId 和 screenId（均为纯数字 ID）
   • 返回完整的界面对象，包括：
     • screenshot.downloadUrl - 设计的视觉参考
     • htmlCode.downloadUrl - 完整 HTML/CSS 源代码
     • width、height、deviceType - 界面尺寸和目标平台
     • 项目元数据，包含带有颜色和样式信息的 designTheme

5. 资产下载：

   • 使用 web_fetch 或 read_url_content 从 htmlCode.downloadUrl 下载 HTML 代码
   • 可选择从 screenshot.downloadUrl 下载截图作为视觉参考
   • 解析 HTML 以提取 Tailwind 类、自定义 CSS 和组件模式

6. 项目元数据提取：

   • 调用 [prefix]:get_project，传入项目 name（完整路径：projects/{id}）以获取：
     • designTheme 对象，包含颜色模式、字体、圆角度、自定义颜色
     • 项目级设计指南和描述
     • 设备类型偏好和布局原则

分析与综合指南

1. 提取项目标识（JSON）

• 定位项目标题
• 定位具体的项目 ID（如从 JSON 中的 name 字段）

2. 定义氛围（图片/HTML）

评估截图和 HTML 结构以捕捉整体"氛围"。使用富有表现力的形容词描述情绪（如"轻盈"、"密集"、"极简"、"实用"）。

3. 映射色彩体系（Tailwind 配置/JSON）

识别系统中的关键颜色。为每种颜色提供：

• 传达其特征的描述性自然语言名称（如"深沉柔和的蓝绿-海军色"）
• 括号中的精确十六进制代码（如"#294056"）
• 其具体的功能角色（如"用于主要操作"）

4. 转译几何与形状（CSS/Tailwind）

将技术性的 border-radius 和布局值转换为物理描述：

• 将 rounded-full 描述为"胶囊形"
• 将 rounded-lg 描述为"微妙的圆角"
• 将 rounded-none 描述为"锐利的直角边缘"

5. 描述深度与层次

解释 UI 如何处理图层。描述阴影的存在和质感（如"扁平"、"轻柔扩散的阴影"或"厚重高对比度的投影"）。

输出指南

• 语言： 专门使用描述性设计术语和自然语言
• 格式： 按照以下结构生成整洁的 Markdown 文件
• 精确度： 在使用描述性名称的同时包含精确的十六进制颜色代码
• 上下文： 解释设计决策背后的"为什么"，而不仅仅是"是什么"

输出格式（DESIGN.md 结构）