用途:当用户想让应用界面更好看、觉得像模板、或询问如何达到 Stripe/Linear 品质时使用。核心目标是让界面看起来经过刻意设计,而非 AI 批量生成。
主要能力:给出可落地的视觉原则。层级上,要求每屏一个主焦点,使用尺寸、字重、颜色、空间四种手段拉开差距,主标题与正文至少相差两个字号级别,每页最多三种字重,正文色彩层级通常三级即可。留白上,组间间距应为组内间距的 2-3 倍,并规定页面边距、标题上方、区块之间、CTA 周围的最小间距。配色遵循 60-30-10:60% 中性作画布,30% 次级色,10% 强调色;交互元素用全饱和品牌色,容器用浅色变体,状态色背景中饱和、文字图标全饱和;分区背景、装饰色块、给每张卡片都加彩色强调均属误用。排版上建议 UI 只用 font-semibold 与 font-normal 两档,不用 font-light;正文宽度不超过 max-w-prose(约 65ch),大标题加 tracking-tight,全大写标签加 tracking-wide。构图与一致性上,全站只用一条对齐边(90% 场景左对齐),重复元素结构必须完全一致,跨页复用同一套导航、间距、标题层级、卡片与按钮变体;需要突出某一项时只使用一个差异点(边框色、徽标或轻微放大),而非三处同时不同。
使用方式:资料未提供具体安装命令或调用步骤,仅说明可参考 AI-SLOP-FIXES.md 做反模式修复、参考 REFERENCE-TEARDOWNS.md 查看真实产品案例;结构化审计清单由 design-review 技能提供。
适用场景:构建新 UI 时套用这些原则,或用户说界面“感觉不对”却说不清原因时排查。
限制:技能本身只给出设计原则与参考文档,未列出具体代码、命令或工具支持范围;效果与适用平台暂未提供。