DESIGN.md详解：stitch-skills中设计的唯一事实来源

DESIGN.md详解stitch-skills中设计的唯一事实来源【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills在 AI 编程 Agent如 Gemini CLI、Claude Code、Cursor中做界面生成时如何保证几十张屏幕风格一致stitch-skills的答案是一个文件DESIGN.md。它遵循 Agent Skills 开放标准为 Google Stitch MCP 服务提供一系列设计技能而DESIGN.md正是其中设计的唯一事实来源Source of Truth——一份用自然语言写成的设计系统说明书让 Stitch 生成的每一个新页面都与你现有的设计语言完美对齐。一、什么是 DESIGN.md为什么它是唯一事实来源 想象你要让 AI 连续生成一个电商站的 10 个页面。没有规范时每次生成都可能换一套配色、换一种圆角风格而有了DESIGN.md所有关键设计决策——颜色、字体、圆角、阴影、间距——都被沉淀在同一个文件里。核心理念Stitch 通过视觉描述Visual Descriptions 精确色值来理解设计。DESIGN.md把零散的 CSS 值和截图翻译成 Stitch 能读懂的语义化设计系统。它之所以是唯一事实来源体现在三点特性说明单一入口上传到 Stitch 后设计令牌Design Tokens存储在项目级生成新屏幕时无需在提示词中重复描述人机皆读开发者能直接读懂并修改AI 也能精确解析全链路复用生成设计、提示词增强、多页面循环建站、代码构建全部引用同一份文件相关技能入口可见design-md 技能说明、manage-design-system 技能说明。二、DESIGN.md 长什么样五大核心章节 无论通过哪种方式生成DESIGN.md都遵循统一的语义结构见 官方示例 DESIGN.mdVisual Theme Atmosphere视觉主题与氛围用编辑级文案描述整体气质例如精致极简的静谧空间呼吸感十足的留白并列出关键特征清单。Color Palette Roles色彩与角色每种颜色都有描述性名称 精确 Hex 值 功能角色三个要素按功能分组基础色背景、表面强调与交互色CTA 按钮、选中态文字层级主/次/三级文本功能状态色成功、警告、信息示例写法❌#294056叫 Blue → ✅ 叫Deep Muted Teal-Navy (#294056)角色是主 CTA 按钮与激活导航。Typography Rules字体规则字体家族的气质描述几何感人文感 完整的 H1~正文层级字号、字重、字距、行高以及背后的用意。Component Stylings组件样式按钮、卡片、导航、表单四类核心组件的形状、配色、悬停/聚焦态与过渡时长。注意这里写的是柔和圆角 8px而非rounded-lg——把技术值翻译成物理描述是 DESIGN.md 的关键手法。Layout Principles布局原则最大内容宽度、网格系统、断点策略、空白节奏如 8px 基础单位、5-8rem 分区间距、对齐与响应式行为。Stitch 生成笔记可选专门写给 Stitch 的语言指南该说whisper-soft diffused shadows而不是shadow-sm让生成风格稳定不跑偏。三、DESIGN.md 的三种生成方式 ✨stitch-skills 提供了互补的三条路径覆盖从 Stitch 项目提炼、从源码逆向、从零制定高标准三种场景方式 1design-md —— 从 Stitch 项目提炼适合已有设计屏幕的项目。Agent 通过 Stitch MCP 拉取屏幕截图、HTML 代码与designTheme元数据自动完成检索 → 提取令牌 → 翻译为自然语言 → 合成 DESIGN.md。参考design-md SKILL.md方式 2extract-design-md —— 从前端源码逆向适合有代码库但还没跑起来的项目依赖缺失、构建损坏都可以。它直接读取样式表、组件文件、Tailwind 配置与主题令牌文件无需构建和运行应用探测信号识别框架/工具package.json含reactReact / Next.jstailwind.config.js/tsTailwind CSStheme.ts/tokens.js设计令牌文件仅.css/.scss文件原生 CSS / SASS它还内置了分框架的提取参考文档如 react-tailwind.md、vue.md。输出统一写入项目的.stitch/DESIGN.md。参考extract-design-md SKILL.md方式 3taste-design —— 生成反平庸的精品设计规范如果你还没有现成设计只想直接定标准该技能生成强制高级感的 DESIGN.md包含严格字体规范、校准过的配色、非对称布局等反通用模板规则防止 AI 产出千篇一律的界面。参考taste-design SKILL.md四、上传到 Stitch从文档变成官方设计系统 本地写好DESIGN.md只是第一步manage-design-system技能负责把它变成 Stitch 项目级的正式设计系统上传 DESIGN.md—— 推荐用内置的 upload_to_stitch.py 脚本它对 Markdown 做 base64 编码后调用批量创建屏幕接口绕过输出令牌限制创建设计系统—— 调用create_design_system_from_design_md工具从 YAML 前言中解析色板令牌自动填充主题应用到屏幕—— 用apply_design_system把设计系统套用到已有屏幕。⚠️ 贴心设计上传前 Agent必须先暂停并请你确认展示即将创建的设计系统摘要显示名、关键颜色、字体、圆角得到明确批准才会执行。完成后项目里会同步维护 metadata.json 格式的元数据记录projectId、屏幕清单与设计系统摘要方便后续技能接力。五、真实工作流中 DESIGN.md 如何发挥作用 DESIGN.md不是孤立的文档而是整条 Stitch 工作流的中枢神经提示词增强enhance-prompt每次优化提示词时自动检查项目里有没有DESIGN.md有则把色板、字体、组件样式注入DESIGN SYSTEM (REQUIRED)区块没有则提示你创建多页循环建站stitch-loop从单条提示词生成整站时每个页面的提示词都必须携带DESIGN.md第 6 节的设计系统区块这是它保证全站风格一致的关键机制代码构建react-vite-dashboard把 Stitch 屏幕转成 React Vite 仪表盘时直接从DESIGN.md读取colors.*、typography.*、spacing.*映射为 CSS 变量设计令牌保真落地到生产代码一键迁移code-to-design把现有前端代码迁入 Stitch 时自动串联提取设计系统 → 上传 DESIGN.md → 创建设计系统完整链路。六、快速上手三步拥有你的设计系统 ⚡安装技能以 Claude Code 为例npx plugins add google-labs-code/stitch-skills --scope project --target claude-code完整安装说明见 README.md生成文档对 Agent 说分析 Stitch 项目projects/123并生成 DESIGN.md或扫描/src提取设计系统到.stitch/DESIGN.md上传应用说上传我们的设计系统.stitch/DESIGN.md并应用到所有屏幕确认摘要后即可完成。七、写出高质量 DESIGN.md 的 5 条最佳实践 ✅描述要具体避免蓝色圆角这类泛词用海洋深青色 (#0077B6)柔和曲线边角功能导向每个设计元素都要说明用在哪而非只描述外观精确数值自然语言后紧跟括号内的精确值Hex 色值、像素值术语统一全文使用同一套命名方便 AI 与开发者对齐理解;去重合并代码中常见的近似色如#333与#2C2C2C应合并为一个有代表性的名称。完整检查清单见 design-md 质量清单。结语在 stitch-skills 中DESIGN.md用一个朴素的 Markdown 文件解决了 AI 界面生成最大的痛点——风格漂移。它既是开发者可维护的设计文档也是 Stitch、增强提示、多页建站、代码构建共享的唯一事实来源。如果你正准备用 AI Agent 批量生成界面不妨先从一份DESIGN.md开始。【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考