← ClaudeAtlas

quieterlisted

Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
AkaraChen/2code · ★ 23 · Web & Frontend · score 67
Install: claude install-skill AkaraChen/2code
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. ## MANDATORY PREPARATION Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. --- ## Assess Current State Analyze what makes the design feel too intense: 1. **Identify intensity sources**: - **Color saturation**: Overly bright or saturated colors - **Contrast extremes**: Too much high-contrast juxtaposition - **Visual weight**: Too many bold, heavy elements competing - **Animation excess**: Too much motion or overly dramatic effects - **Complexity**: Too many visual elements, patterns, or decorations - **Scale**: Everything is large and loud with no hierarchy 2. **Understand the context**: - What's the purpose? (Marketing vs tool vs reading experience) - Who's the audience? (Some contexts need energy) - What's working? (Don't throw away good ideas) - What's the core message? (Preserve what matters) If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. **CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. ## Plan Refinement Create a strategy to reduce intensity while maint