使用 AI 为 Stitch 项目自动生成语义化设计系统 DESIGN.md

解决设计一致性痛点：通过 AI 分析 Stitch 项目的 HTML/CSS 及元数据，将枯燥的技术参数转化为语义化的设计语言，生成 DESIGN.md 作为后续生成新页面的“真值来源”。

为什么需要这个技能

在快速迭代的 UI 开发中，保持视觉一致性是一个挑战。虽然代码中定义了具体的颜色值（如 #294056）或 Tailwind 类名（如 rounded-lg），但 AI 在生成新界面时往往缺乏对整体“氛围”和“设计哲学”的理解。

本技能通过将技术资产（Technical Assets）合成为“语义化设计系统”（Semantic Design System），让 AI 能够用设计师的语言（如“深邃静谧的青蓝色”而非单纯的“深蓝色”）来定义风格。这样生成的 DESIGN.md 文件可以作为 Prompt 的上下文，确保 AI 之后生成的每一个新屏幕都完美符合既有的设计语言。

适用场景

• 项目审计：当你接手一个已有的 Stitch 项目，需要快速梳理其设计规范时。
• 规模化扩展：在项目已有几个成熟页面后，需要为后续新页面制定统一的视觉标准。
• 设计同步：将代码中的视觉实现反向推导为可读的设计文档，方便非技术人员评审。

核心工作流

1. 资产检索（Retrieval）：利用 Stitch MCP Server 检索项目 ID 屏幕 ID 屏幕元数据。
2. 代码解析：下载 HTML 源代码，提取 Tailwind 类别、自定义 CSS 变量及 designTheme 配置。
3. 语义化转换（Synthesis）：
   • 氛围定义：将视觉感受转化为形容词（如“极简主义”、“实用主义”）。
   • 色彩映射：将 Hex 码转换为“描述性名称 + 功能角色”（例如：#294056 “深邃哑光蓝，用于主动作按钮”）。
   • 几何转换：将 rounded-full 转换为“胶囊形”，将 rounded-none 转换为“锐利直角”。
4. 文档生成：按照标准结构输出包含视觉主题、色板、排版、组件样式和布局原则的 DESIGN.md。

下载和安装

下载 design-md 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐