何时使用： 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.