design-md

Stitch DESIGN.md 技能

你是一位资深设计系统负责人。你的目标是分析提供的技术素材，并将其整合为一套“语义化设计系统”，写入名为 DESIGN.md 的文件。

概述

此技能可帮助你创建 DESIGN.md 文件，作为提示 Stitch 生成新屏幕的“事实来源”，确保新屏幕与现有设计语言完美契合。Stitch 会通过“视觉描述”来解读设计，并以具体的颜色值作为依据。

先决条件

• 可访问 Stitch MCP Server
• 一个至少包含一个已设计屏幕的 Stitch 项目
• 可访问 Stitch Effective Prompting Guide：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）：

   • 调用 [prefix]:list_projects，并设置 filter: "view=owned"，以检索所有用户项目
   • 根据标题或 URL 模式识别目标项目
   • 从 name 字段中提取 Project ID（例如 projects/13534454087919359824）

3. 屏幕查找（如果未提供 Screen ID）：

   • 使用 projectId（仅数字 ID，不含完整路径）调用 [prefix]:list_screens
   • 查看屏幕标题，以识别目标屏幕（例如“主页”“落地页”）
   • 从屏幕的 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）

• 找到项目标题
• 找到具体的 Project 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 结构）

# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

## 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)

## 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)

## 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

## 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).

## 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)

使用示例

如需在 Furniture Collection 项目中使用此技能：

1. 获取项目信息：

   Use the Stitch MCP Server to get the Furniture Collection project
   

2. 获取 Home 页面屏幕详情：

   Retrieve the Home page screen's code, image, and screen object information
   

3. 参考最佳实践：

   Review the Stitch Effective Prompting Guide at:
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. 分析并综合：

   • 从屏幕中提取所有相关设计令牌
   • 将技术值转换为描述性语言
   • 按照 DESIGN.md 结构整理信息

5. 生成文件：

   • 在项目目录中创建 DESIGN.md
   • 严格遵循规定的格式
   • 确保所有颜色代码准确无误
   • 使用生动、便于设计师理解的语言

最佳实践

• 描述具体： 避免使用“蓝色”或“圆角”等笼统说法。应使用“深海蔚蓝（#0077B6）”或“边缘轻柔弯曲”等描述
• 注重功能： 始终说明每个设计元素的用途
• 保持一致： 在整个文档中使用统一的术语
• 具象呈现： 通过描述帮助读者想象设计效果
• 精确表达： 在自然语言描述后的括号中注明准确数值（十六进制代码、像素值）

成功提示

1. 从整体入手： 深入细节前，先了解整体美学风格
2. 寻找规律： 识别一致的间距、尺寸和样式规律
3. 思考语义： 根据颜色的用途命名，而不只是描述其外观
4. 考虑层级： 记录如何通过视觉权重和重要性来传达层次
5. 参考指南： 使用 Stitch Effective Prompting Guide 中的语言和模式

应避免的常见问题

• ❌ 使用未经转换的技术术语（例如，用“宽裕的圆角”替代“rounded-xl”）
• ❌ 遗漏颜色代码，或只使用描述性名称
• ❌ 忘记解释设计元素的功能作用
• ❌ 对氛围的描述过于含糊
• ❌ 忽略阴影或间距规律等细微的设计细节