← ClaudeAtlas

frontend-design-anti-sloplisted

Design distinctive frontend interfaces that don't look AI-generated. Use when building web pages, landing pages, dashboards, or any UI — especially when you want to avoid the generic "AI slop" aesthetic that plagues LLM-generated designs.
risukisu/marketing-skills · ★ 3 · Web & Frontend · score 79
Install: claude install-skill risukisu/marketing-skills
# Frontend Design — Anti-Slop Edition Build frontend interfaces with genuine design taste. This skill exists because most AI-generated UIs look identical: purple-to-blue gradients, bento grids, rounded-xl everything, "Transform your X" hero text. This skill does the opposite. **This is an interactive process.** Ask the user what they're building before designing anything. ## Intake Start by asking: > What are you building? (Landing page, dashboard, app UI, marketing page, etc.) > Who is it for? What's the vibe — professional, playful, warm, minimal, bold? > Any existing brand elements (colors, fonts, logo) I should work with? Wait for answers before proceeding. ## Design Principles Apply these in every decision: 1. **Warm over corporate.** Dark backgrounds should feel like a room at night, not a SaaS dashboard. Use brown-blacks (#12110f) over pure blacks (#000). Warm grays over cool grays. 2. **Monospace for character, display for hierarchy.** Use monospace fonts (JetBrains Mono, IBM Plex Mono, Fira Code) for UI chrome — labels, badges, buttons, metadata. Use a display or heading font (Space Grotesk, Inter Tight, Satoshi) for titles and emphasis. Never use monospace for everything. Never use a generic sans-serif for everything either. 3. **One accent color, used sparingly.** Pick one strong accent (mint green, amber, coral) and use it only for primary actions and active states. Everything else lives in the neutral palette. Two accent colors maximum. If you reach fo