拼接设计品味

解决什么问题

用 Google Stitch 生成界面时，两个问题反复出现：默认输出的视觉语言趋于同质化，大量屏幕共享同一套圆角、配色与卡片结构；自然语言提示词对设计意图的表达过于松散，导致同一项目内不同页面的风格难以对齐。DESIGN.md 作为唯一事实来源，把项目的视觉约定压缩成 Stitch 可解析的结构化描述，让生成结果从“看起来能用”推进到“看起来是同一个产品”。

技能如何工作

技能的核心动作是分析项目意图并输出一份可复用的 DESIGN.md。它按以下方向组织内容：

• 定义视觉氛围：用密度、方差、动效三个维度描述设计基调，例如在「画廊式通透」与「驾驶舱式紧凑」之间选择信息密度，而不是笼统地写“界面要高级”。
• 校准色彩与排版：提供中性色、强调色的精确色值，明确字体堆栈、字号层级，并为按钮、卡片、输入框等组件定义交互状态与边框处理方式。
• 编码布局与动效：把栅格策略、间距逻辑与响应式规则写成具体约定；动效部分描述弹簧物理与微交互的触发方式，避免每次都依赖默认过渡效果。
• 明确反模式：列出需要避免的 AI 常见设计套路，例如滥用渐变背景、过度圆角、缺乏层级的阴影与重复布局。

生成的 DESIGN.md 可以被 Stitch 的 Visual Description 机制直接解读，也可以配合 Stitch MCP Server 在 Cursor、Antigravity 或 Gemini CLI 中做程序化集成。

适用边界与注意点

• 该技能只负责生成并优化 DESIGN.md 规范，不直接渲染界面，也不具备像素级修正能力。
• 语义规则对 Stitch 的生成质量影响有限，实际效果仍取决于 Stitch 对描述的解析能力，以及项目本身是否已经具备稳定的设计方向。
• 三个氛围维度需要按项目类型调参。默认基线偏向「均衡日用应用」，做数据密集型界面时应手动向高密度方向调整，做展示型页面时则相反。
• 如果项目已有设计系统，建议先提炼现有规范再写入 DESIGN.md，否则可能出现规则冲突，拉低生成一致性。