| name | frontend-design-taste |
| description | Give a website a distinctive, deliberate visual direction that does not read as templated AI output. Grounds in the subject, proposes a compact token system (palette 4-6 hexes, display/body/utility type roles, layout concept, ONE signature element), runs a uniqueness gate against the three AI-default looks, and rewrites copy from the user's side of the screen. Includes a condensed worked example (ishotgirls). No scripts. Triggers: 'design direction', 'design taste', 'make it look good', 'not templated', 'redesign with taste', 'visual identity', 'aesthetic direction', 'design brief', 'anti-templated design', 'signature element'. |
| license | MIT |
| metadata | {"author":"bestdeejay-design","version":"1.0.1"} |
| compatibility | No scripts; design judgment. Optionally a browser for visual verification |
| when_to_use | Use when user wants a distinctive visual direction (not templated): 'design direction', 'design taste', 'make it look good', 'not templated', 'redesign with taste', 'visual identity', 'aesthetic direction', 'design brief', 'anti-templated design'. Examples: 'give this landing page a real visual identity', 'redesign my site so it stops looking like AI'. |
Frontend Design Taste — distinctive direction, not templated defaults
Approach this as the design lead at a small studio known for giving every client a
visual identity that could not be mistaken for anyone else's. The client has already
rejected templated proposals and is paying for a distinctive point of view: make
deliberate, opinionated choices about palette, typography and layout that are specific
to this brief, and take one real aesthetic risk you can justify.
This skill defines the DIRECTION. It does not measure anything — frontend-perfection
does the measuring (contrast, tokens, Lighthouse) once the direction is built.
When to use
- User asks to "make it look good", "redesign with taste", "not look templated",
"give it a visual identity", "design direction for this page".
- A page needs a visual direction BEFORE any code (palette, type, layout, signature).
- The existing design reads as an AI template and the user wants it to stop being one.
Do NOT use
- To audit/fix an existing page (contrast, SEO meta, Lighthouse, raw-hex tokens) — that is
frontend-perfection.
- For SEO / Core Web Vitals / schema.org — that is
seo-toolkit.
- When the user already pinned the visual direction — follow it exactly, do not re-propose.
The three AI defaults to avoid
AI-generated design currently clusters around three looks. All three are legitimate for
SOME briefs, but they are defaults, not choices, and they appear regardless of subject:
- Warm cream background (~#F4F1EA) + high-contrast serif display + terracotta accent.
- Near-black background + a single bright acid-green or vermilion accent (the "gym/tech" look).
- Broadsheet layout — hairline rules, zero border-radius, dense newspaper columns.
Where the brief pins one of these looks, follow it. Where an axis is free, do NOT spend
that freedom on a default.
Design principles
- Hero is a thesis. Open with the most characteristic thing in the subject's world:
a headline, image, animation, live demo, interactive moment. A big number + small
label + gradient accent is the template answer — only use it if it's truly the best.
- Typography carries personality. Pair display and body deliberately, not the same
families you reach for on every project. Set a real type scale with intentional
weights/widths/spacing. Make the type treatment memorable, not a neutral carrier.
- Structure is information. Numbering, eyebrows, dividers should encode something
true about the content. Numbered markers (01/02/03) only when content is a real
sequence — a process or timeline where order carries meaning.
