name: ui-scoredescription: Score a UI file’s design quality 0-100 against StyleSeed’s design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.risk: criticalsource: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-scoresource_repo: bitjaru/styleseedsource_type: communitydate_added: 2026-07-01license: MITlicense_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE设计评分何时使用当需要依据 StyleSeed 设计语言为 UI 文件的设计质量打分0-100——按类别细分、找出最严重的问题、并给出优先修复列表时使用此技能。它是 /ss-review 的量化版本。/ss-review告诉你哪里有问题。/ss-score告诉你整体有多好以及先修什么——一个数字加上类别细分让你能像跟踪测试覆盖率一样跟踪 UI 质量。何时不使用提交前快速通过/不通过检查 → 使用/ss-lint带修复建议的完整文字审查 → 使用/ss-review非 UI 文件逻辑、配置——打分没有意义评什么对文件或目录中的每个文件在六个加权类别上打分它们对应设计语言。总分为 100。类别权重依据色彩纪律18DESIGN-LANGUAGE §1、§18、§72 VISUAL-CRAFT §C4层级与排版18§2、§3、§4、§16 字号表 VISUAL-CRAFT §C2布局与节奏14§13、§14、§15、§61 VISUAL-CRAFT §C1卡片与层次感12§7、§8、§12、§1 VISUAL-CRAFT §C3状态与可访问性18§11、§70、§71、§72 VISUAL-CRAFT §C3动效与交互8§24、§59 engine/motion一致性12VISUAL-CRAFT §C0每轴一个选择如何给每个类别打分对每个类别从满分开始根据阅读代码时发现的违规扣分。要具体、有据可依——引用行号。色彩纪律20——扣分项任何#000/text-black各 −4上限 −8装饰性使用超过一种强调色−5用 emoji 作为 UI 图标多色、破坏单一强调色−5正常/OK/보통状态使用了状态色而非中性灰−4大多数/每一行都用了状态色无严重程度层级−4装饰性色调金色星标、彩虹分类圆点替代强调色/灰色−3存在语义令牌却硬编码十六进制色每个 −2上限 −6仅用颜色传达状态−4。层级与排版20——扣分项数字/单位不是约 2:1−4字号不在字号表内 / 大小用text-[var(--…)]−5所有内容同权重、无清晰主次−5正文行高过挤或错误−3。布局与节奏15——扣分项内容在裸背景上而非卡片内−6用px-4/px-8/mx-4而非px-6/mx-6−3同一区块类型连续重复−4无space-y-6节奏−3。卡片与层次感15——扣分项用 1px 边框承担本应由色调阴影完成的分隔−4阴影透明度超约 8% / 明显过重−4无卡片/背景色调分隔−5。状态与可访问性20——扣分项数据界面缺少空/加载/错误状态各 −5上限 −10对比度低于正文 4.5:1 / 大文本 3:1−6触摸目标 44px−4无可视焦点 /outline:none−5纯图标控件无aria-label−3。动效与交互8——扣分项使用随机/临时淡入淡出而非具名种子/关键词−3动效延迟内容或阻碍操作−4自定义动效无prefers-reduced-motion处理−3滚动联动/视差禁止§59−5。一致性12——“每轴一个选择法则VISUAL-CRAFT §C0。每个轴在文件中混杂而非统一即扣分混合圆角个性如锐利面板 胶囊按钮−5使用两个以上互相竞争的强调色做强调−4混合阴影语言/光源方向−3混合图标族、填充模式或描边粗细−3嵌套元素用相同圆角而非内层 外层 − 内边距−2按钮/输入框控件高度不一致−2。这个类别最能预示看起来像 AI 生成”——权重应放在系统级一致性证据上而非单个组件的美观度。每个类别最低扣到 0。合计得总分。输出格式## 设计评分70 / 100 (src/app/Dashboard.tsx) ████████████████░░░░░░ C- 色彩纪律 13/18 ▓▓▓░ #000 标题 (l.12,40)橙色蓝色绿色强调色 (l.28-34) 层级与排版 15/18 ▓▓▓▓ 首页数字/单位 1:1 (l.18) 布局与节奏 11/14 ▓▓▓░ 两行相同的 KPI (l.22-31) 卡片与层次感 8/12 ▓▓░░ 1px 边框承担分隔 (l.22) 状态与可访问性 11/18 ▓▓░░ 无空/加载状态缺少焦点环 (l.55) 动效与交互 6/8 ▓▓▓░ 默认淡入非具名种子 一致性 6/12 ▓▓░░ 锐利卡片 (l.22) 胶囊按钮 (l.48)3 种强调色 (§C0) ### 优先修复分数提升最大 1. 为订单列表添加空 加载状态 → 7 状态 (§71) 2. 统一圆角选柔和 8-12px 收敛为一种强调色 → 9 一致性色彩 (§C0, §2) 3. 去掉 1px 边框改用色调 ≤8% 阴影 → 4 卡片 (§7) 修复后重新评分约 92 / 100。使用字母等级90 A · 80-89 B · 70-79 C · 60-69 D · 60 F。门禁模式作为向用户展示 UI 前的质量门禁使用质量门禁CLAUDE.md / AGENTS.md是将/ss-score作为循环运行而非一次性操作为刚生成的 UI 打分。如果 80应用优先修复列表用/ss-review完成修改然后重新评分。最多重复约 3 次或直到 ≥ 80。向用户展示 UI附最终得分和一行已修复…。及格线是下限而非上限——达到 ≥ 80 就停止不要追求 100。关键在于绝不让任何初稿、明显不协调的 UI 到达用户手中。尤其不要带着彩虹状态列表、emoji 图标、双强调色或缺状态的情况下以低于 80 发布——这些正是门禁存在的意义要拦截的信号。规则阅读文件——依据真实证据行号评分绝不猜测。优先修复列表按分数提升排序而非仅按严重程度——目标是通往更好数字的最快路径。对目录先打印每个文件的一行得分再给出得分最低文件的完整细分。纯评分模式不自动修改。/ss-score负责测量/ss-review和/ss-motion负责修复。在门禁模式见上中你执行修复-重评循环直到达到下限。作为门禁≥ 80 是向用户展示前的下限——但不要过度打磨为了追求 95→100 而推迟发布比发布一个干净的 85 更糟。限制仅在任务与其上游来源和本地项目上下文明确匹配时使用此技能。在应用更改前验证命令、生成的代码、依赖、凭据和外部服务行为。不要将示例视为环境特定测试、安全审查或破坏性/高成本操作的用户批准替代品。