styleseed-design-review

Featured

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.

Web & Frontend 950 stars 88 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
99
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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, ...

Details

Author
bitjaru
Repository
bitjaru/styleseed
Created
5 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-review-gate

Scored 0–100 design review gate for UI/frontend code — tells you exactly why it "looks AI-generated" and how to fix it, ordered by score gain. Use when a React/Tailwind/HTML interface looks off, generic, or unfinished; when the user asks for a "design score", "design gate", "does this look AI-generated", or to make UI look "designed, not generated"; and as a self-gate right after generating any UI, before showing the user. Self-contained; cherry-picked from the open-source StyleSeed design engine (MIT), with Andy's house rules layered on top.

2 Updated 1 months ago
b1rdmania
AI & Automation Listed

design-review

Visual craft review of UI changes — hierarchy, typography, color, depth, states and motion, with severity and a false-positive filter. Complements codereview (which does not look at the visuals). Use before opening a UI PR, or when asked to "review the screen" / "it looks generic".

0 Updated 5 days ago
mateusands
Web & Frontend Listed

awesome-review

Audit an existing UI, component, page, or frontend codebase against the AwesomeDesignSystem standard — detect generic "AI slop", taste issues, and accessibility failures, then report prioritized, concrete fixes. Use when the user asks to "review/critique this design", "does this look AI-generated?", "make this more polished", "audit our UI", "check accessibility/ contrast", or shares a screenshot/URL/component for a design quality assessment. Acts as an independent evaluator (never praises by default ��� it hunts for what's wrong and how to fix it).

2 Updated 3 weeks ago
Yu-aimaker