Stitch DESIGN.md 技能

您是一位设计系统主管专家。您的目标是分析提供的技术资产，并将“语义化设计系统”综合成一个名为 DESIGN.md 的文件。

概述

此技能帮助您创建 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）：
   • 使用 filter: "view=owned" 参数调用 [前缀]:list_projects 以检索所有用户项目
   • 根据标题或 URL 模式识别目标项目
   • 从 name 字段中提取项目 ID（例如，projects/13534454087919359824）
3. 屏幕查找（如果未提供屏幕 ID）：
   • 使用 projectId（仅数字 ID，非完整路径）调用 [前缀]:list_screens
   • 查看屏幕标题以识别目标屏幕（例如，“首页”、“着陆页”）
   • 从屏幕的 name 字段中提取屏幕 ID
4. 获取元数据：
   • 同时使用 projectId 和 screenId（两者都仅使用数字 ID）调用 [前缀]:get_screen
   • 这将返回完整的屏幕对象，包括：
     • 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. 项目元数据提取：
   • 使用项目 name（完整路径：projects/{id}）调用 [前缀]:get_project 以获取：
     • 包含颜色模式、字体、圆角程度、自定义颜色的 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. 描述深度与层级

解释用户界面如何处理层次。描述阴影的存在和质量（例如，“平面”、“柔和如絮的扩散阴影”或“厚重、高对比度的投影”）。

输出指南

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

输出格式（DESIGN.md 结构）

# 设计系统：[项目标题]
**项目 ID：** [在此处插入项目 ID]

## 1. 视觉主题与氛围
（描述情绪、密度和审美理念。）

## 2. 调色板与角色
（按 描述性名称 + 十六进制代码 + 功能角色 的格式列出颜色。）

## 3. 排版规则
（描述字体系列、标题与正文的字重使用情况以及字间距特征。）

## 4. 组件样式
* **按钮：**（形状描述、颜色分配、行为）。
* **卡片/容器：**（圆角程度描述、背景颜色、阴影深度）。
* **输入框/表单：**（描边样式、背景）。

## 5. 布局原则
（描述空白策略、边距和网格对齐方式。）

使用示例

要为“家具系列”项目使用此技能：

1. 检索项目信息：

   使用 Stitch MCP 服务器获取“家具系列”项目
   

2. 获取首页屏幕详情：

   检索首页屏幕的代码、图像和屏幕对象信息
   

3. 参考最佳实践：

   查看 Stitch 有效提示指南：
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. 分析与综合：
   • 从屏幕中提取所有相关的设计令牌
   • 将技术值转化为描述性语言
   • 根据 DESIGN.md 的结构组织信息
5. 生成文件：
   • 在项目目录中创建 DESIGN.md 文件
   • 严格遵循规定的格式
   • 确保所有颜色代码准确无误
   • 使用能引发共鸣、符合设计师习惯的语言

最佳实践

• 描述要具体：避免使用诸如“蓝色”或“圆角”之类的通用术语。使用“深海蔚蓝 (#0077B6)”或“柔和弯曲的边缘”
• 说明功能：始终解释每个设计元素的用途
• 保持一致性：在整个文档中使用相同的术语
• 注重视觉化：通过您的描述帮助读者想象设计
• 确保精确性：在自然语言描述之后，用括号包含确切的值（十六进制代码、像素值）

成功秘诀

1. 从全局开始：在深入细节之前，先理解整体美学
2. 寻找模式：识别一致的间距、尺寸和样式模式
3. 语义化思考：根据用途而非仅仅外观来命名颜色
4. 考虑层级：记录视觉重量和重要性是如何传达的
5. 参考指南：使用 Stitch 有效提示指南中的语言和模式

需要避免的常见陷阱

• ❌ 不加解释地使用技术术语（例如，使用“rounded-xl”而非“大圆角”）
• ❌ 省略颜色代码或仅使用描述性名称
• ❌ 忘记解释设计元素的功能角色
• ❌ 氛围描述过于模糊
• ❌ 忽略阴影或间距模式等微妙的设计细节