技能介绍

为什么需要这份 DESIGN.md

Stitch 是一个用自然语言生成界面的工具，但它不理解设计品味。直接丢给它"做一个 dashboard"，它大概率给你一个卡片套卡片、蓝紫渐变、圆角加阴影的"AI 味"模板。问题不在 Stitch，而在提示词里缺少可执行的视觉约束。Stitch 的解释器靠 Visual Descriptions 工作——它需要你告诉它中性色的具体 hex、字号阶梯、组件的交互状态，而不是抽象的形容词。

这个技能做了什么

它把一套经过实战检验的反俗套前端设计规范，翻译成 Stitch 原生的语义规则，最终输出一份 DESIGN.md 作为单一事实来源。核心能力分四层：

视觉氛围定标：用密度、变化度、动效三个维度在 1–10 的光谱上打分。密度从"画廊呼吸感"到"驾驶舱密集"，变化度从"对称可预期"到"艺术化混沌"，动效从"静态克制"到"电影级编排"。三轴交叉决定了整体气质。
色彩校准：定义中性色板、强调色，并显式列出禁用模式（比如 AI 常见的蓝紫渐变背景、霓虹描边），所有颜色带 hex。
排版架构：指定字体栈、字号层级与行高，同时禁止某些 AI 常见的排版偷懒（如大字号小字重标题、无对比正文）。
组件行为与动效：按钮、卡片、输入框需要定义交互状态（hover、active、disabled），动效部分给出弹簧物理参数和微交互节奏。

生成的 DESIGN.md 覆盖七个模块：氛围、色彩、排版、组件、布局、动效、反模式清单。其中反模式清单是这份文档最有价值也最容易被省略的部分——它明确列出哪些"AI 设计俗套"禁止出现，让 Stitch 的每一次生成都回退到同一套品味基线。

适用边界

这个技能生成的是规范文档，不是最终像素。Stitch 的执行质量仍取决于其模型本身，DESIGN.md 只是约束。
三个光谱轴的默认基线是 Variance=5，如果你的项目风格明确（比如金融后台），需要手动拉满密度和动效轴。
需要 Google Stitch 访问权限；通过 MCP Server 接入 Cursor 或 Gemini CLI 时，技能输出的 DESIGN.md 需要你自己接入到提示链路里，技能本身不替你调 Stitch API。