dev-frontend-designlisted

# Frontend Design with Art Direction ## Principle AI-generated interfaces all look alike. Inter/Roboto typography, blue/purple palette, rounded cards, same visual rhythm. To stand out, you must **commit to an art direction before writing any code**. ## Mandatory workflow ### 1. Check the direction in CLAUDE.md Read the project's CLAUDE.md to find a `Style:` directive: ```markdown ## Design Direction Style: terminal # or cockpit, vitality, editorial, glass, signal ``` If found, strictly apply the direction (see rule `.claude/rules/design-style.md`). ### 2. If no direction is defined — ASK Before coding, ask the user: > No art direction is defined in CLAUDE.md. Before coding, choose a direction: > > - **terminal**: monospace, black/neon green, sharp edges (for dev tools, web CLI) > - **cockpit**: dense, multi-panels, real-time indicators (for dashboards, monitoring) > - **vitality**: colorful, animated, generously rounded (for B2C apps, gamified) > - **editorial**: serif, airy, paper/ivory (for blogs, long form) > - **glass**: glassmorphism, gradients, depth (for premium modern apps) > - **signal**: minimal, gray/white, dense utilitarian (for productivity tools) ## Fonts — what to ban **Forbidden** (overused by AI): - Inter, Roboto, Arial, Space Grotesk - Helvetica (unless explicit editorial direction) **Prefer** depending on the direction: | Direction | Recommended fonts | |-----------|-------------------| | terminal | JetBrains Mono, Fira Code, IBM Plex Mono,