styleseed-design-review

Name: styleseed-design-review
Author: bitjaru

396installs73forks

How to install styleseed-design-review?

bitjaru/styleseed/styleseed-design-review

$npx -y skills add bitjaru/styleseed --skill styleseed-design-review

Installs into the current project.

Summary

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,

Files · 1

View on GitHub

SKILL.md

1	# StyleSeed Design Review
2
3	## Overview
4
5	A UI reads as "AI-generated" not because the components are ugly, but because the **parts
6	don't agree with each other** — mixed corner radii, three accent colors, pure-black text,
7	no hierarchy, missing states, robotic copy. This skill reviews a UI file (or a whole
8	directory) against a concrete design rubric, scores it 0–100, and returns a prioritized
9	fix list. It reviews and recommends; it never edits or deletes without you asking.
10
11	Full rule set (74 rules) and components: https://github.com/bitjaru/styleseed
12
13	## When to use
14
15	- A React / Tailwind / HTML UI "looks off," generic, or unfinished and you can't say why.
16	- You want a design score / pre-ship check.
17	- The user asks to make UI "look professional / polished / designed, not AI-generated."
18	- After generating UI, to verify it before shipping.
19
20	## How to review
21
22	Read the file(s). Score these seven categories (total 100); start each at full marks
23	and subtract for violations you can cite by line. Be specific and evidence-based.
24
25	### 1. Coherence — 20 (the #1 "AI-generated" tell)
26	One choice per axis, applied everywhere. Deduct for each mixed axis:
27	- mixed corner radii — e.g. a sharp card with pill buttons (−6)
28	- two or more accent colors used for emphasis (−5)
29	- emoji used as UI icons (🚗🧺⭐ as list/nav/status/category markers) — injects many uncontrolled hues; use one line-icon set in currentColor (−6)
30	- mixed shadow languages / light directions (−3)
31	- mixed icon families, fill modes, or stroke weights (−3)
32	- inconsistent control heights (buttons/inputs differ) (−3)
33
34	### 2. Color discipline — 16
35	- pure black (`#000` / `text-black`) text — the refined black is ~`#2A2A2A` (−4 each, cap −8)
36	- hardcoded hex where a semantic token exists (−2 each, cap −6)
37	- a normal / OK / default ("보통") state shown in a status color instead of neutral grey (−4)
38	- status color on most/every row (no severity hierarchy — color should mark the minority that needs attention) (−4)
39	- decorative hues — gold stars, rainbow category dots, a different color per card — instead of accent/grey (−3)
40	- status conveyed by color alone, no icon/text (−4)
41	- contrast below WCAG AA (4.5:1 body, 3:1 large/UI) (−6)
42
43	### 3. Hierarchy & typography — 16
44	- number and its unit not ~2:1 (48px number / 24px unit) (−4)
45	- everything the same size and weight, no clear primary (−5)
46	- arbitrary font sizes; no scale (−4)
47	- wrong line-height (loose on display, cramped on body) (−3)
48
49	### 4. Layout & spacing — 12
50	- content on a bare page background, not in cards (−6)
51	- off-grid spacing (7/13/19px instead of an 8px scale) (−3)
52	- the gap around a group not larger than the gap inside it (−3)
53	- the same section type repeated in a row (−4)
54
55	### 5. States — 12
56	- missing empty / loading / error state on a data surface (−5 each, cap −10)
57	- empty state with no next action; error that blames instead of helping (−4)
58
59	### 6. UX writing — 12
60	- buttons that don't name the action ("Submit" / "OK" instead of "Send $2,400") (−4)
61	- error copy that blames or uses system-speak ("Invalid input", "An error occurred") (−4)
62	- two terms for one concept (delete vs remove); filler words ("please", "successfully") (−2)
63
64	### 7. Motion & polish — 12
65	- ad-hoc fades instead of one consistent, named feel (−3)
66	- motion that delays content or blocks an action (−4)
67	- no `prefers-reduced-motion` handling on custom motion (−3)
68	- a single hard black shadow instead of a layered, low-opacity, tinted one (−2)
69
70	Clamp each category at 0; sum to a total. Bands: 90+ A · 80–89 B · 70–79 C · 60–69 D · <60 F.
71
72	## Output format
73
74	```
75	## Design Score: 72 / 100 (src/Dashboard.tsx) C
76
77	Coherence 13/20 sharp cards (l.22) + pill buttons (l.48); 3 accent hues
78	Color discipline 12/16 #000 headings (l.12, 40)
79	Hierarchy & type 15/16 number/unit 1:1 on hero (l.18)
80	Layout & spacing 10/12 two identical KPI rows (l.22-31)
81	States 7/12 no empty/loading state on the orders list
82	UX writing 8/12 "Submit" button (l.55); "Invalid input" (l.61)
83	Motion & polish 10/12 one hard black shadow (l.22)
84
85	### Fix first (highest score gain)
86	1. Unify radius (pick soft 8–12px) + collapse to one accent → +11 coherence/color
87	2. Add empty + loading states to the orders list → +7 states
88	3. Rename "Submit" → "Send $2,400"; "Invalid input" → "Check the card number" → +6 copy
89
90	Re-score after: ~90 / 100.
91	```
92
93	## Rules
94
95	- Review from real evidence (cite line numbers);

People who liked this also viewed

6 picks

Type

styleseed-design-review

396installs73forks

View on GitHub

How to install styleseed-design-review?

bitjaru/styleseed/styleseed-design-review

$npx -y skills add bitjaru/styleseed --skill styleseed-design-review

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# StyleSeed Design Review
2
3	## Overview
4
5	A UI reads as "AI-generated" not because the components are ugly, but because the **parts
6	don't agree with each other** — mixed corner radii, three accent colors, pure-black text,
7	no hierarchy, missing states, robotic copy. This skill reviews a UI file (or a whole
8	directory) against a concrete design rubric, scores it 0–100, and returns a prioritized
9	fix list. It reviews and recommends; it never edits or deletes without you asking.
10
11	Full rule set (74 rules) and components: https://github.com/bitjaru/styleseed
12
13	## When to use
14
15	- A React / Tailwind / HTML UI "looks off," generic, or unfinished and you can't say why.
16	- You want a design score / pre-ship check.
17	- The user asks to make UI "look professional / polished / designed, not AI-generated."
18	- After generating UI, to verify it before shipping.
19
20	## How to review
21
22	Read the file(s). Score these seven categories (total 100); start each at full marks
23	and subtract for violations you can cite by line. Be specific and evidence-based.
24
25	### 1. Coherence — 20 (the #1 "AI-generated" tell)
26	One choice per axis, applied everywhere. Deduct for each mixed axis:
27	- mixed corner radii — e.g. a sharp card with pill buttons (−6)
28	- two or more accent colors used for emphasis (−5)
29	- emoji used as UI icons (🚗🧺⭐ as list/nav/status/category markers) — injects many uncontrolled hues; use one line-icon set in currentColor (−6)
30	- mixed shadow languages / light directions (−3)
31	- mixed icon families, fill modes, or stroke weights (−3)
32	- inconsistent control heights (buttons/inputs differ) (−3)
33
34	### 2. Color discipline — 16
35	- pure black (`#000` / `text-black`) text — the refined black is ~`#2A2A2A` (−4 each, cap −8)
36	- hardcoded hex where a semantic token exists (−2 each, cap −6)
37	- a normal / OK / default ("보통") state shown in a status color instead of neutral grey (−4)
38	- status color on most/every row (no severity hierarchy — color should mark the minority that needs attention) (−4)
39	- decorative hues — gold stars, rainbow category dots, a different color per card — instead of accent/grey (−3)
40	- status conveyed by color alone, no icon/text (−4)
41	- contrast below WCAG AA (4.5:1 body, 3:1 large/UI) (−6)
42
43	### 3. Hierarchy & typography — 16
44	- number and its unit not ~2:1 (48px number / 24px unit) (−4)
45	- everything the same size and weight, no clear primary (−5)
46	- arbitrary font sizes; no scale (−4)
47	- wrong line-height (loose on display, cramped on body) (−3)
48
49	### 4. Layout & spacing — 12
50	- content on a bare page background, not in cards (−6)
51	- off-grid spacing (7/13/19px instead of an 8px scale) (−3)
52	- the gap around a group not larger than the gap inside it (−3)
53	- the same section type repeated in a row (−4)
54
55	### 5. States — 12
56	- missing empty / loading / error state on a data surface (−5 each, cap −10)
57	- empty state with no next action; error that blames instead of helping (−4)
58
59	### 6. UX writing — 12
60	- buttons that don't name the action ("Submit" / "OK" instead of "Send $2,400") (−4)
61	- error copy that blames or uses system-speak ("Invalid input", "An error occurred") (−4)
62	- two terms for one concept (delete vs remove); filler words ("please", "successfully") (−2)
63
64	### 7. Motion & polish — 12
65	- ad-hoc fades instead of one consistent, named feel (−3)
66	- motion that delays content or blocks an action (−4)
67	- no `prefers-reduced-motion` handling on custom motion (−3)
68	- a single hard black shadow instead of a layered, low-opacity, tinted one (−2)
69
70	Clamp each category at 0; sum to a total. Bands: 90+ A · 80–89 B · 70–79 C · 60–69 D · <60 F.
71
72	## Output format
73
74	```
75	## Design Score: 72 / 100 (src/Dashboard.tsx) C
76
77	Coherence 13/20 sharp cards (l.22) + pill buttons (l.48); 3 accent hues
78	Color discipline 12/16 #000 headings (l.12, 40)
79	Hierarchy & type 15/16 number/unit 1:1 on hero (l.18)
80	Layout & spacing 10/12 two identical KPI rows (l.22-31)
81	States 7/12 no empty/loading state on the orders list
82	UX writing 8/12 "Submit" button (l.55); "Invalid input" (l.61)
83	Motion & polish 10/12 one hard black shadow (l.22)
84
85	### Fix first (highest score gain)
86	1. Unify radius (pick soft 8–12px) + collapse to one accent → +11 coherence/color
87	2. Add empty + loading states to the orders list → +7 states
88	3. Rename "Submit" → "Send $2,400"; "Invalid input" → "Check the card number" → +6 copy
89
90	Re-score after: ~90 / 100.
91	```
92
93	## Rules
94
95	- Review from real evidence (cite line numbers);

People who liked this also viewed

6 picks

Type