quieter
Reduce visual intensity in designs while preserving refinement, sophistication, and functional clarity.
- Systematically addresses color saturation, contrast extremes, visual weight, animation excess, and compositional complexity to create calmer, more approachable interfaces
- Requires frontend-design skill context and the Context Gathering Protocol; stops to clarify purpose, audience, and what's working before proceeding
- Guides refinement across five dimensions: color (desaturation, muted tones, reduced variety), visual weight (typography, hierarchy, whitespace), simplification (remove decorative elements), motion (shorter distances, gentler easing), and composition (grid alignment, consistent spacing)
- Maintains design quality and character through intentional restraint, not elimination; preserves hierarchy, personality, and functional affordances
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 /impeccable — 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 /impeccable teach first.
Assess Current State
Analyze what makes the design feel too intense:
- 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
More from pbakaus/impeccable
polish
Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
85.5Kcritique
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
83.0Kimpeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
82.6Kaudit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
82.2Kanimate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
82.1Kadapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
82.1K
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/skillsweb-design-guidelines
Vercel's Web Interface Guidelines covering spacing, typography, interaction, and accessibility
vercel-labs/agent-skillsvercel-composition-patterns
React composition patterns for flexible, scalable UI component architecture
vercel-labs/agent-skillsui-ux-pro-max
Advanced UI/UX patterns for complex interfaces and interaction design
nextlevelbuilder/ui-ux-pro-max-skillsleek-design-mobile-apps
Mobile-first design principles for iOS and Android app interfaces
sleekdotdesign/agent-skills