# Design Md

> 分析 Stitch 项目并将语义设计系统综合到 DESIGN.md 文件中。触发词：Stitch项目分析、DESIGN.md创建、设计系统文档、Stitch设计语言、设计文档生成、语义设计系统、视觉主题分析、色彩映射、组件样式文档

- Skill: `kscz0000/design-md` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/design-md`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/design-md/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/design-md

---


# Stitch DESIGN.md 技能

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

## 何时使用此技能

在以下情况下使用此技能：
- 分析 Stitch 项目
- 创建 DESIGN.md 文件
- 综合语义设计系统
- 使用 Stitch 设计语言
- 为 Stitch 项目生成设计文档

## 概述

此技能帮助你创建 `DESIGN.md` 文件，该文件作为提示 Stitch 生成与现有设计语言完美对齐的新屏幕的"真实来源"。Stitch 通过"视觉描述"解释设计，并由特定的颜色值支持。

## 前提条件

- 访问 Stitch MCP Server
- 至少有一个已设计屏幕的 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. **项目查找**（如果未提供 Project ID）：
   - 使用 `filter: "view=owned"` 调用 `[prefix]:list_projects` 检索所有用户项目
   - 通过标题或 URL 模式识别目标项目
   - 从 `name` 字段提取 Project ID（例如 `projects/13534454087919359824`）

3. **屏幕查找**（如果未提供 Screen ID）：
   - 使用 `projectId`（仅数字 ID，非完整路径）调用 `[prefix]:list_screens`
   - 查看屏幕标题以识别目标屏幕（例如 "Home"、"Landing Page"）
   - 从屏幕的 `name` 字段提取 Screen 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 配置/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 获取家具系列项目
   ```

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" 而非"大圆角"）
- ❌ 省略颜色代码或仅使用描述性名称
- ❌ 忘记解释设计元素的功能角色
- ❌ 氛围描述过于模糊
- ❌ 忽略阴影或间距模式等微妙设计细节

## 局限性
- 仅当任务明确符合上述描述的范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准，请停止并请求澄清。