
关于
分析 Stitch 项目并将语义设计系统综合到 DESIGN.md 文件中,建立统一的设计规范文档。
name: design-md description: "分析 Stitch 项目并将语义化设计系统综合整理为 DESIGN.md 文件" risk: safe source: "https://github.com/google-labs-code/stitch-skills/tree/main/skills/design-md" date_added: "2026-02-27"
Stitch DESIGN.md 技能
你是一位资深设计系统负责人。你的目标是分析提供的技术资产,并将"语义化设计系统"综合整理到名为 DESIGN.md 的文件中。
何时使用此技能
在以下场景中使用此技能:
- 分析 Stitch 项目
- 创建 DESIGN.md 文件
- 综合整理语义化设计系统
- 使用 Stitch 设计语言
- 为 Stitch 项目生成设计文档
概述
此技能帮助你创建 DESIGN.md 文件,作为提示 Stitch 生成与现有设计语言完美对齐的新界面的"唯一真实来源"。Stitch 通过"视觉描述"配合特定颜色值来解读设计。
前置条件
- 能够访问 Stitch MCP 服务器
- 拥有至少一个已设计界面的 Stitch 项目
- 能够访问 Stitch 高效提示指南:https://stitch.withgoogle.com/docs/learn/prompting/
目标
DESIGN.md 文件将作为提示 Stitch 生成与现有设计语言完美对齐的新界面的"唯一真实来源"。Stitch 通过"视觉描述"配合特定颜色值来解读设计。
检索与网络操作
要分析 Stitch 项目,你必须使用 Stitch MCP 服务器工具检索界面元数据和设计资产:
-
命名空间发现:运行
list_tools查找 Stitch MCP 前缀。后续所有调用都使用此前缀(如mcp_stitch:)。 -
项目查找(如未提供项目 ID):
- 调用
[prefix]:list_projects,参数为filter: "view=owned"以获取所有用户项目 - 通过标题或 URL 模式识别目标项目
- 从
name字段提取项目 ID(如projects/13534454087919359824)
- 调用
-
界面查找(如未提供界面 ID):
- 调用
[prefix]:list_screens,传入projectId(仅数字 ID,非完整路径) - 查看界面标题以识别目标界面(如 "Home"、"Landing Page")
- 从界面的
name字段提取界面 ID
- 调用
-
元数据获取:
- 调用
[prefix]:get_screen,传入projectId和screenId(均为纯数字 ID) - 返回完整的界面对象,包括:
screenshot.downloadUrl- 设计的视觉参考htmlCode.downloadUrl- 完整 HTML/CSS 源代码width、height、deviceType- 界面尺寸和目标平台- 项目元数据,包含带有颜色和样式信息的
designTheme
- 调用
-
资产下载:
- 使用
web_fetch或read_url_content从htmlCode.downloadUrl下载 HTML 代码 - 可选择从
screenshot.downloadUrl下载截图作为视觉参考 - 解析 HTML 以提取 Tailwind 类、自定义 CSS 和组件模式
- 使用
-
项目元数据提取:
- 调用
[prefix]:get_project,传入项目name(完整路径:projects/{id})以获取: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 结构)
兼容工具
Claude CodeCursor
标签
AI与机器学习