技能介绍

直接让 AI 生成界面往往会陷入一种可预测的平庸感：高饱和度的紫蓝渐变、居中的 Hero 区块，以及千篇一律的圆角卡片。这种“AI 流水线质感”不仅缺乏品牌辨识度，还会让工程师在后续的代码微调中付出更多成本。stitch-design-taste 就是为了解决这个具体问题而生。它不提供现成的 UI 组件，而是为 Google Stitch 编写一份 DESIGN.md 语义化设计规范，作为 Stitch 生成界面的唯一事实来源（Single Source of Truth），用精确的规则引导 AI 产出更有质感的屏幕。

技能如何工作：从氛围到像素

这个技能的核心逻辑是将反套路的前端工程经验翻译成 Stitch 能读懂的自然语言规则。以下是它的关键步骤：

定义视觉氛围（Atmosphere）：不直接开始画图，而是先确定设计的密度（Density）、方差（Variance）和动效（Motion）。例如，在方差评分较高时，它会强制引入非对称布局，打破“对称即安全”的默认设定。
校准色彩与排版：严格限制调色板，最多只允许一种强调色，且严禁使用高饱和度的“AI 紫”。排版上明确禁用 Inter 字体，转而推荐 Geist 或 Satoshi 等更具独特性的字族，并在高密度场景下强制启用等宽数字。
构建组件行为：为按钮、卡片和输入框定义明确的交互状态和阴影规则。例如，按钮需要有物理按压反馈，而加载状态禁止使用通用的圆环 spinner，必须使用与布局尺寸匹配的骨架屏。
编排动效物理：放弃线性缓动，引入弹簧物理参数（Stiffness 100, Damping 20），并要求通过 transform 和 opacity 实现高性能的微交互，禁止直接动画 width 或 height。

适用边界与注意点

该技能具有极强的主观审美倾向，它不是中立的模板，因此不适合那些需要严格遵循标准、缺乏个性的后台管理系统（Dashboard）。

在使用时应特别注意：

依赖 Stitch 的理解能力：DESIGN.md 写得再好，最终渲染效果依然取决于 Stitch 的解析准确度，可能仍需人工介入调整。
规则冲突处理：如果你的业务必须使用居中的 Hero 区，需要在 DESIGN.md 中手动覆盖方差约束，否则会被技能强制改为非对称结构。
不要省略反模式：禁用列表（Anti-patterns）是防止 AI 发挥过度的关键，如禁止“Scroll to explore”之类的填充文案。建议保留这些强制约束，以确保输出的极简风格。