When to use: You asked Claude for a landing page and got yet another purple-gradient hero with rounded cards.
Flow
-
Name the aesthetic
Use cc-frontend-skills. Build a landing page for my book in the style of mid-century Penguin paperback covers — restrained type, one accent color, generous whitespace.✓ Copied
→ Layout draft with specific type choices, not a shadcn hero
-
Iterate on grid and type
Tighten the typographic scale to a 1.333 modular scale; use Charter or similar serif.✓ Copied
→ Concrete CSS with named fonts, not 'sans-serif'
-
Strip AI tells
Audit for AI-design tells: emoji headers, excessive shadow-lg, gradient text, identical card layouts. Kill them.✓ Copied
→ Diff removing the usual suspects
Outcome: A landing page that looks like someone cared.
Pitfalls
- Claude reverts to defaults after a few iterations — Pin the style ref in each follow-up prompt — don't rely on context to carry it
When to use: Your dashboard works but looks like every other shadcn-based app.
Flow
-
Diagnose
Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ Copied
→ Concrete list: 'everything is lg-rounded, shadows on every card, gradient CTA, grid is always 3-col'
-
Propose an alternative
Suggest an aesthetic direction anchored to one data-dense design reference (Bloomberg terminal, Figma's inspector panel).✓ Copied
→ Named references with concrete applications
-
Apply incrementally
Start with typography only — fix hierarchy without touching layout.✓ Copied
→ Diff changing font-size, letter-spacing, weight only
Outcome: A dashboard with opinions.
Pitfalls
- Over-designing and breaking accessibility — Keep AA contrast; visual identity doesn't require light-gray-on-white
When to use: Your buttons, cards, and inputs were each generated independently and now clash.
Flow
-
Inventory
Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ Copied
→ Variance table per token
-
Propose tokens
Propose a consolidated design token set with one radius scale, one shadow scale, one spacing ramp.✓ Copied
→ Token JSON / Tailwind config
Outcome: A token set that makes the library feel like one thing.