anti-slop-frontend — build UI that isn't templated

For new landing pages, portfolios, and marketing sites. Every rule here is contextual — read the brief first, then pull only what fits. (Distilled in our own way from the anti-slop ideas in Leonxlnx/taste-skill, MIT.)

0. Read the brief before touching code

Infer: page kind (SaaS / consumer / agency / portfolio / editorial), vibe words the user used, references they named, audience (the audience picks the aesthetic, not your taste), and any existing brand assets. Then state a one-line Design Read before generating:

"Reading this as: <page kind> for <audience>, <vibe> language, leaning <design system / aesthetic>."

If the read genuinely forks, ask one question. If you can infer it, don't ask — declare and proceed.

1. Three dials (baseline 8 / 6 / 4)

• DESIGN_VARIANCE (1 symmetry → 10 chaos): 8
• MOTION_INTENSITY (1 static → 10 cinematic): 6
• VISUAL_DENSITY (1 airy → 10 packed): 4

Adjust from the read: minimalist/Linear → ~5/3/2 · premium consumer → ~7/6/3 · agency/Awwwards → ~9/8/3 · trust-first/public-sector → ~3/2/5.

2. Use real design systems, honestly

If the brief reads enterprise / Material / Carbon / Fluent / Primer / public-sector / shadcn / Tailwind — install and use the official package; don't hand-recreate its CSS or import its tokens then override 90%. One system per project. For pure aesthetics (glass, bento, brutalist, editorial) there's no official package — build native CSS + Tailwind and label borrowed inspiration honestly.