技能介绍

当AI设计陷入「生成感」陷阱

你可能遇到过这样的场景：用AI生成的界面初看完整，细看却充满「机器制造感」——颜色搭配混乱（比如同时出现#2A2A2A和#000000两种黑）、组件布局重复（4个一模一样的KPI卡片）、动效生硬（所有交互都用200ms匀速）。这些不是数据缺失的问题，而是AI缺乏设计判断力：它知道「要放一个按钮」，但不知道「这个按钮该和卡片保持多少间距」「阴影该用多淡的透明度」。

StyleSeed如何重建设计决策链

StyleSeed的核心是69条视觉规则+48个React组件+11个斜杠命令的组合，从三个层面修正AI的设计输出：

规则层：用约束替代自由发挥

颜色纪律：强制使用#2A2A2A作为主黑色（比纯黑更柔和），建立5级灰度体系，最多保留1个强调色（如Toss的蓝、Stripe的紫）
空间节奏：要求章节高度交替（如64px→80px→64px），数字与单位比例严格保持2:1（如12,000/月而非12,000 每月）
阴影边界：规定阴影不透明度上限为4%（避免「浮起来的卡片」），暗模式自动用边框替代阴影

组件层：用结构化降低随机性

48个shadcn风格组件（基于Tailwind CSS v4 + Radix UI）内置规则约束：

KPI卡片组件强制要求「3+1」组合（3个数据卡+1个趋势卡），避免4个相同卡片的机械感
按钮组件内置弹簧动画（入场）和缓出动画（退场），而非统一匀速

命令层：用流程固化设计审查

通过11个斜杠命令（如/ss-page生成页面、/ss-review审查设计）建立设计检查流程：

/ss-audit会扫描页面中是否存在「4个相同KPI卡」「超过1个强调色」等违反规则的结构
/ss-lint会检查阴影透明度是否超过4%、章节高度是否交替

适用边界与注意点

规则需与业务场景结合：69条规则是品牌无关的基础约束，实际使用时需根据业务类型（如B端后台/C端电商）调整规则优先级（例如后台更重视信息密度，电商更强调视觉引导）
组件定制需谨慎：虽然支持shadcn风格的定制，但过度修改可能破坏规则约束（例如强行给按钮加第二个强调色）
品牌皮肤需适配：内置的Toss/Stripe等品牌皮肤是设计参考，实际使用时需替换为自己的品牌色（避免直接使用竞品配色）