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 结构)

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

局限性

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