Quand l'utiliser : You asked Claude for a landing page and got yet another purple-gradient hero with rounded cards.
Déroulement
-
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.✓ Copié
→ 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.✓ Copié
→ 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.✓ Copié
→ Diff removing the usual suspects
Résultat : A landing page that looks like someone cared.
Pièges
- 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
Quand l'utiliser : Your dashboard works but looks like every other shadcn-based app.
Déroulement
-
Diagnose
Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ Copié
→ 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).✓ Copié
→ Named references with concrete applications
-
Apply incrementally
Start with typography only — fix hierarchy without touching layout.✓ Copié
→ Diff changing font-size, letter-spacing, weight only
Résultat : A dashboard with opinions.
Pièges
- Over-designing and breaking accessibility — Keep AA contrast; visual identity doesn't require light-gray-on-white
Quand l'utiliser : Your buttons, cards, and inputs were each generated independently and now clash.
Déroulement
-
Inventory
Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ Copié
→ Variance table per token
-
Propose tokens
Propose a consolidated design token set with one radius scale, one shadow scale, one spacing ramp.✓ Copié
→ Token JSON / Tailwind config
Résultat : A token set that makes the library feel like one thing.