| name | styleseed-design-review |
| description | Reviews UI/frontend code and tells you exactly why it "looks AI-generated" — then how to fix it. Use it when a React/Tailwind/HTML interface looks off, generic, or unfinished, when you want a design score before shipping, or when asked to make UI look more professional, polished, or "designed, not generated." Self-contained; based on the open-source StyleSeed design engine. |
| source | bitjaru |
| license | MIT (https://github.com/bitjaru/styleseed/blob/main/LICENSE) |
| trigger | 需要审查 UI 设计质量 |
| input | UI 代码 |
| output | 设计审查报告 |
| next | 无 |
| dependencies | 无 |
StyleSeed Design Review
Overview
A UI reads as "AI-generated" not because the components are ugly, but because the parts
don't agree with each other — mixed corner radii, three accent colors, pure-black text,
no hierarchy, missing states, robotic copy. This skill reviews a UI file (or a whole
directory) against a concrete design rubric, scores it 0–100, and returns a prioritized
fix list. It reviews and recommends; it never edits or deletes without you asking.
Full rule set (74 rules) and components: https://github.com/bitjaru/styleseed
When to use
- A React / Tailwind / HTML UI "looks off," generic, or unfinished and you can't say why.
- You want a design score / pre-ship check.
- The user asks to make UI "look professional / polished / designed, not AI-generated."
- After generating UI, to verify it before shipping.
How to review
Read the file(s). Score these seven categories (total 100); start each at full marks
and subtract for violations you can cite by line. Be specific and evidence-based.
1. Coherence — 20 (the #1 "AI-generated" tell)
One choice per axis, applied everywhere. Deduct for each mixed axis:
- mixed corner radii — e.g. a sharp card with pill buttons (−6)
- two or more accent colors used for emphasis (−5)
- emoji used as UI icons (🚗🧺⭐ as list/nav/status/category markers) — injects many uncontrolled hues; use one line-icon set in currentColor (−6)
- mixed shadow languages / light directions (−3)
- mixed icon families, fill modes, or stroke weights (−3)
- inconsistent control heights (buttons/inputs differ) (−3)
2. Color discipline — 16
- pure black (
#000 / text-black) text — the refined black is ~#2A2A2A (−4 each, cap −8)
- hardcoded hex where a semantic token exists (−2 each, cap −6)
- a normal / OK / default ("보통") state shown in a status color instead of neutral grey (−4)
- status color on most/every row (no severity hierarchy — color should mark the minority that needs attention) (−4)
- decorative hues — gold stars, rainbow category dots, a different color per card — instead of accent/grey (−3)
- status conveyed by color alone, no icon/text (−4)
- contrast below WCAG AA (4.5:1 body, 3:1 large/UI) (−6)
3. Hierarchy & typography — 16
- number and its unit not ~2:1 (48px number / 24px unit) (−4)
