메뉴
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.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ChonSong/skill-retriever --skill ui-score명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | ui-score |
| description | 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 | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-score |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
Use this skill when you need 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.
/ss-review tells you what's wrong. /ss-score tells you how good it is
overall and what to fix first — a single number plus a category breakdown, so
you can track UI quality like you track test coverage.
/ss-lint/ss-reviewScore the file (or each file in a directory) on six weighted categories that map to the design language. Total = 100.
| Category | Weight | Reads from |
|---|---|---|
| Color discipline | 18 | DESIGN-LANGUAGE §1, §18, §72 + VISUAL-CRAFT §C4 |
| Hierarchy & typography | 18 | §2, §3, §4, §16 + Font Size table + VISUAL-CRAFT §C2 |
| Layout & rhythm | 14 | §13, §14, §15, §61 + VISUAL-CRAFT §C1 |
| Cards & elevation | 12 | §7, §8, §12, §1 + VISUAL-CRAFT §C3 |
| States & a11y | 18 | §11, §70, §71, §72 + VISUAL-CRAFT §C3 |
| Motion & interaction | 8 | §24, §59 + engine/motion |
| Coherence | 12 | VISUAL-CRAFT §C0 (one choice per axis) |
For each category, start at full marks and subtract for violations you find by reading the code. Be specific and evidence-based — cite the line.
Color discipline (20) — deduct for: any #000/text-black (−4 each, cap −8);
more than one accent hue used decoratively (−5); emoji used as UI icons (multi-color,
breaks single accent) (−5); a normal/OK/"보통" state shown in a status color instead of
neutral grey (−4); (no severity hierarchy) (−4);
(gold stars, rainbow category dots) instead of accent/grey (−3);
hardcoded hex where a semantic token exists (−2 each, cap −6); status conveyed by color
alone (−4).
Hierarchy & typography (20) — deduct for: number/unit not ~2:1 (−4); font
sizes off the Font Size table / text-[var(--…)] for size (−5); everything the
same weight, no clear primary (−5); cramped or wrong line-height on body (−3).
Layout & rhythm (15) — deduct for: content on bare background, not in cards
(−6); px-4/px-8/mx-4 instead of px-6/mx-6 (−3); same section type
repeated in a row (−4); no space-y-6 rhythm (−3).
Cards & elevation (15) — deduct for: 1px borders doing separation work that tone+shadow should (−4); shadows over ~8% opacity / visibly heavy (−4); no card/background tone separation (−5).
States & a11y (20) — deduct for: missing empty/loading/error state on a data
surface (−5 each, cap −10); contrast below 4.5:1 body / 3:1 large (−6); touch
target < 44px (−4); no visible focus / outline:none (−5); icon-only control
without aria-label (−3).
Motion & interaction (8) — deduct for: random/ad-hoc fades instead of a named
seed/keyword (−3); motion that delays content or blocks an action (−4); no
prefers-reduced-motion handling on custom motion (−3); scroll-linked/parallax
(forbidden, §59) (−5).
Coherence (12) — the "one choice per axis" laws (VISUAL-CRAFT §C0). Deduct for
each axis that is mixed rather than unified across the file: mixed radius
personalities, e.g. sharp panel + pill buttons (−5); two+ competing accent hues used
for emphasis (−4); mixed shadow languages / light directions (−3); mixed icon
families, fill modes, or stroke weights (−3); same radius on a nested element instead
of inner = outer − padding (−2); inconsistent control heights for buttons/inputs
(−2). This is the category that most predicts "looks AI-generated" — weight evidence
of system-wide consistency, not per-component prettiness.
Clamp each category at 0. Sum to a total.
## Design Score: 70 / 100 (src/app/Dashboard.tsx)
████████████████░░░░░░ C-
Color discipline 13/18 ▓▓▓░ #000 headings (l.12,40); orange+blue+green accents (l.28-34)
Hierarchy & typography 15/18 ▓▓▓▓ number/unit 1:1 on hero (l.18)
Layout & rhythm 11/14 ▓▓▓░ two identical KPI rows (l.22-31)
Cards & elevation 8/12 ▓▓░░ 1px borders doing separation (l.22)
States & a11y 11/18 ▓▓░░ no empty/loading state; focus ring missing (l.55)
Motion & interaction 6/8 ▓▓▓░ default fade, not a named seed
Coherence 6/12 ▓▓░░ sharp cards (l.22) + pill buttons (l.48); 3 accent hues (§C0)
### Fix first (highest score gain)
1. Add empty + loading states to the orders list → +7 states (§71)
2. Unify radius (pick soft 8-12px) + collapse to one accent → +9 coherence+color (§C0, §2)
3. Drop the 1px borders, use tone + ≤8% shadow → +4 cards (§7)
Re-score after: ~92 / 100.
Use letter bands: 90+ A · 80-89 B · 70-79 C · 60-69 D · <60 F.
The Quality Gate (CLAUDE.md / AGENTS.md) is /ss-score run as a loop, not a one-off:
/ss-review to make the edits), then re-score.The pass bar is a floor, not a ceiling — get to ≥ 80 and stop; don't chase 100. The point is that no first-draft, obviously-incoherent UI reaches the user. Especially never ship below 80 with a rainbow status list, emoji icons, two accents, or missing states — those are the exact tells the gate exists to catch.
/ss-score measures; /ss-review and /ss-motion fix.
In Gate mode (above) you do fix-and-re-score until the floor is met.