design-md

design-md - Stitch 设计系统文档生成技能

技能概述

design-md 是一个专业的设计系统分析技能，能够自动分析 Stitch 项目并生成语义化的 DESIGN.md 文档，将设计语言转化为可复用的设计规范。

适用场景

设计系统文档化

当你需要将现有的 Stitch 项目设计转化为结构化的设计文档时，design-md 可以自动提取色彩、排版、组件样式等设计要素，生成规范的 DESIGN.md 文件。

设计规范统一

团队协作中，design-md 帮助设计师和开发者建立统一的设计语言理解，确保新生成的屏幕与现有设计保持一致的视觉风格。

设计资产分析

在进行项目迁移或设计重构时，design-md 可以快速分析现有设计系统的所有设计要素，包括颜色方案、几何形状、阴影深度等细节。

核心功能

智能设计提取

通过 Stitch MCP 服务器获取项目的屏幕元数据和设计资产，自动解析 HTML/CSS 代码，提取 Tailwind 类名、自定义 CSS 和组件模式，将技术参数转化为自然语言描述。

语义化色彩映射

不仅提取颜色的十六进制代码，还为每种颜色赋予描述性名称（如 "Deep Muted Teal-Navy #294056"）并说明其功能用途（如 "用于主要操作按钮"）。

几何与深度翻译

将技术性的 CSS 属性转换为设计师友好的描述语言，例如将 "rounded-full" 描述为 "Pill-shaped（药丸形）"，将阴影效果描述为 "Whisper-soft diffused shadows（轻柔扩散阴影）"。

常见问题

design-md 技能是什么？用来做什么？

design-md 是一个专门为 Stitch 项目设计系统分析而开发的技能。它的核心功能是分析现有的 Stitch 项目屏幕，自动提取并整理所有设计要素（包括色彩、排版、组件样式、布局原则等），最终生成一个结构化的 DESIGN.md 文件。这个文件可以作为设计系统的"唯一真实来源"，用于指导 Stitch 生成与现有设计风格一致的新屏幕。

如何使用 design-md 生成 DESIGN.md 文件？

使用 design-md 需要满足三个前提条件：访问 Stitch MCP 服务器、拥有至少一个包含设计屏幕的 Stitch 项目、参考 Stitch 有效提示指南。具体步骤包括：首先使用 list_tools 发现 Stitch MCP 前缀，然后通过 list_projects 和 list_screens 定位目标项目，接着使用 get_screen 获取屏幕元数据和设计资产，最后解析 HTML/CSS 并按照指定结构生成 DESIGN.md 文件。

生成的 DESIGN.md 文件包含哪些内容？

DESIGN.md 文件包含五个主要部分：1) 视觉主题与氛围描述项目的整体美学风格；2) 色彩方案与角色列出所有关键颜色的描述性名称、十六进制代码和功能用途；3) 排版规则说明字体家族、字重使用和字间距特征；4) 组件样式详细描述按钮、卡片、表单等组件的形状、颜色和行为；5) 布局原则解释留白策略、边距和网格对齐方式。所有描述都使用自然语言而非技术术语，便于设计师理解和参考。