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