设计规范提取：把现有界面变成可复用规则

---
name: design-md
description: 分析 Stitch 项目并将语义化设计系统综合到 DESIGN.md 文件中
allowed-tools:
  - "stitch*:*"
  - "Read"
  - "Write"
  - "web_fetch"
---

# 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 Server 工具检索屏幕元数据和设计资产：

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，而非完整路径）
   - 查看屏幕标题以识别目标屏幕（例如“首页”、“落地页”）
   - 从屏幕的 `name` 字段中提取屏幕 ID

4. **元数据获取**：
   - 使用 `projectId` 和 `screenId`（两者仅作为数字 ID）调用 `[prefix]: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}`）调用 `[prefix]:get_project` 以获取：
     - 包含颜色模式、字体、圆角、自定义颜色的 `designTheme` 对象
     - 项目级设计指南和描述
     - 设备类型偏好和布局原则

## 分析与综合指令

### 1. 提取项目身份 (JSON)
- 定位项目标题
- 定位特定的项目 ID（例如，来自 JSON 中的 `name` 字段）

### 2. 定义氛围 (图像/HTML)
评估屏幕截图和 HTML 结构以捕捉整体“氛围”。使用具有启发性的形容词来描述情绪（例如，“轻盈”、“浓郁”、“极简主义”、“实用主义”）。

### 3. 映射配色方案 (Tailwind Config/JSON)
识别系统中的关键颜色。对于每种颜色，请提供：
- 一个传达其特征的描述性自然语言名称（例如，“深沉柔和的蓝绿色-海军蓝”）
- 括号内具体的十六进制代码以确保精确度（例如，“#294056”）
- 其特定的功能角色（例如，“用于主要操作”）

### 4. 转换几何形状与轮廓 (CSS/Tailwind)
将技术性的 `border-radius` 和布局值转换为物理描述：
- 将 `rounded-full` 描述为“胶囊形”
- 将 `rounded-lg` 描述为“微圆角”
- 将 `rounded-none` 描述为“锐利的直角边缘”

### 5. 描述深度与层级
解释 UI 如何处理图层。描述阴影的存在及其质感（例如，“扁平化”、“轻柔的弥散阴影”或“沉重的高对比度投影”）。

## 输出指南

- **语言：** 仅使用描述性的设计术语和自然语言
- **格式：** 按照以下结构生成一个整洁的 Markdown 文件
- **精确度：** 在使用描述性名称的同时，包含准确的十六进制颜色代码
- **上下文：** 解释设计决策背后的“原因”，而不仅仅是“内容”

## 输出格式 (DESIGN.md 结构)

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

## 1. 视觉主题与氛围
(关于情绪、密度和美学理念的描述。)

## 2. 色彩板与角色
(按“描述性名称 + 十六进制代码 + 功能角色”列出颜色。)

## 3. 字体规则
(关于字体族、标题与正文的字重用法，以及字距特征的描述。)

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

## 5. 布局原则
(关于留白策略、页边距和网格对齐的描述。)
```

## 使用示例

将此技能用于家具系列项目：

1. **获取项目信息：**
   ```
   使用 Stitch MCP Server 获取 Furniture Collection 项目
   ```

2. **获取首页屏幕详情：**
   ```
   获取首页画面的代码、图片和画面对象信息
   ```

3. **参考最佳实践：**
   ```
   查阅 Stitch 有效提示词指南：
   https://stitch.withgoogle.com/docs/learn/prompting/
   ```

4. **分析与综合：**
   - 从屏幕中提取所有相关的设计令牌 (design tokens)
   - 将技术数值转换为描述性语言
   - 根据 DESIGN.md 结构组织信息

5. **生成文件：**
   - 在项目目录中创建 `DESIGN.md`
   - 严格遵守规定的格式
   - 确保所有颜色代码准确无误
   - 使用具有启发性且对设计师友好的语言

## 最佳实践

- **具有描述性：** 避免使用“蓝色”或“圆角”等泛泛而谈的术语。使用“深海蔚蓝 (#0077B6)”或“柔和的弧形边缘”
- **具有功能性：** 始终解释每个设计元素的作用
- **保持一致性：** 在整个文档中使用相同的术语
- **具象化：** 通过您的描述帮助读者想象设计效果
- **精确性：** 在自然语言描述后的括号内包含准确的数值（十六进制代码、像素值）

## 成功技巧

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

## 应避免的常见误区

- ❌ 使用未翻译的技术术语（例如，使用 "rounded-xl" 而不是 "大圆角"）
- ❌ 遗漏颜色代码或仅使用描述性名称
- ❌ 忘记解释设计元素的各种功能角色
- ❌ 氛围描述过于模糊
- ❌ 忽略阴影或间距模式等细微设计细节