← ClaudeAtlas

designlisted

Creates distinctive UI with preserved structure. Avoids generic AI aesthetics. Use when designing or refining user interfaces.
djnsty23/claude-auto-dev · ★ 3 · Web & Frontend · score 72
Install: claude install-skill djnsty23/claude-auto-dev
# Frontend Design > **Browser access.** Prefer the built-in browser tools (`mcp__Claude_Browser__*`) > when the session has them — that is the default in the desktop app. The > `agent-browser` commands below are the terminal-only fallback. The `browser` > skill owns the driver-selection rule; follow it before running either. Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. ## When to Use - Building web components, pages, or applications - Creating marketing/landing pages - UI that needs to look professionally designed - Any frontend where visual quality matters ## Design Thinking Before coding, commit to a **bold aesthetic direction**: 1. **Purpose**: What problem does this solve? Who uses it? 2. **Tone**: Pick an extreme: - Brutally minimal - Maximalist chaos - Retro-futuristic - Organic/natural - Luxury/refined - Playful/toy-like - Editorial/magazine - Brutalist/raw - Art deco/geometric - Soft/pastel - Industrial/utilitarian 3. **Differentiation**: What makes this unforgettable? Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is **intentionality, not intensity**. ## Implementation Create working code (React/Vue/HTML) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with clear aesthetic point-of-view - Meticulously refined in every detail - **Responsive across mobile (375px), tablet