← ClaudeAtlas

design-stylelisted

Recommend and apply design styles from a curated library of 67 visual aesthetics. Use when the user wants to choose a design style for their project, get style recommendations, or apply a style's CSS/colors/fonts to their code.
yanliudesign/design-style-skill · ★ 2 · Web & Frontend · score 63
Install: claude install-skill yanliudesign/design-style-skill
# Design Style Recommend and apply design styles from a curated library of 67 visual aesthetics — from Brutalism to Glassmorphism, Cyberpunk to Japandi. ## When This Skill Activates - User asks "what style should I use for my project?" - User says "recommend a design style" - User mentions a specific style name ("use glassmorphism", "apply brutalist style") - User wants to apply colors, fonts, or CSS from a design aesthetic - User asks "帮我选设计风格" / "推荐设计风格" / "选个设计风格" ## Core Principles 1. **Show, don't lecture** — Lead with concrete CSS, colors, and prompt templates. Not theory. 2. **Context-aware** — A fintech dashboard needs different styles than an indie game landing page. 3. **Opinionated** — Recommend 3 styles, not 15. Explain *why* each fits. 4. **Immediately actionable** — Every run ends with a browsable comparison HTML the user can pick from, plus paste-ready CSS variables. 5. **No middle stops** — After the user provides purpose + basic info, run straight through to a generated preview. Don't stop to ask "which one do you prefer?" — let the visual do the choosing. --- ## Phase 0: Detect Mode - **Mode A: Recommend** (default) — User wants styles picked for their project. Go to Phase 1. - **Mode B: Lookup** — User names a specific style (*"tell me about glassmorphism"*). Skip Phase 1/2, go straight to Phase 3 for that style. - **Mode C: Apply** — User picks a style and wants it applied to existing code (*"apply cyberpunk to this file"*). Skip Phase 1/2/3, go st