beavon2010/claude-skills

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）：

   • 调用 [前缀]:list_projects，设置 filter: "view=owned" 以检索所有用户项目
   • 根据标题或 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. 描述深度与层次

解释 UI 如何处理层级。描述阴影的存在和质量（例如“扁平”、“如耳语般柔和的扩散阴影”或“厚重、高对比度的投影”）。

输出指南

• 语言：仅使用描述性设计术语和自然语言
• 格式：按照以下结构生成干净的 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”而不是“宽大圆角”）
• ❌ 遗漏颜色代码或仅使用描述性名称
• ❌ 忘记解释设计元素的功能角色
• ❌ 在氛围描述中过于模糊
• ❌ 忽略微小的设计细节，如阴影或间距模式