← ClaudeAtlas

frontend-designlisted

Create distinctive frontend interfaces that avoid generic AI aesthetics. Use when building web components, pages, artifacts, posters, or applications.
tomcounsell/ai · ★ 18 · Web & Frontend · score 71
Install: claude install-skill tomcounsell/ai
Produce production-grade frontend interfaces with a committed, distinctive aesthetic point of view. Success: an interface that makes someone ask "who made this?" — never "which AI made this?". The code must work, the details must be meticulous, and every choice must read as intentional. ## Commit to a direction first Before writing code, decide: - **Purpose**: what problem this interface solves, and for whom. - **Tone**: pick one extreme and execute it with precision — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian... These are inspiration, not a menu; design one true to the context. - **Constraints**: framework, performance, accessibility requirements. - **Differentiation**: the one thing someone will remember. Bold maximalism and refined minimalism both work. Intentionality is the standard, not intensity. ## Craft guidance Each area has a reference file with technique depth — load it when actually working in that area, not preemptively. ### Typography — [reference](reference/typography.md) Pair a distinctive display font with a refined body font on a modular scale with real size/weight contrast between levels. The invisible defaults (Inter, Roboto, Arial, Open Sans, system-ui as the sole typeface) and monospace-as-"technical"-shorthand are what make sites look AI-generated. ### Color & theme — [reference](reference/col