Frontend Design
Frontend & Design
Creates distinctive, production-grade frontend interfaces that break free from generic AI aesthetics.
Overview
Frontend Design is an anti-"AI slop" skill that steers AI agents away from cookie-cutter output — no more default Inter/Roboto fonts, gratuitous purple gradients, or identical card-grid layouts. Instead, it pushes toward bold, intentional aesthetic directions that give each project a unique visual identity.
The skill provides concrete guidance on typography, color, motion, spatial composition, and background textures, enabling the agent to produce interfaces that look hand-crafted rather than template-generated.
When to Use
- Starting a new frontend project and want a distinctive visual identity
- Redesigning an existing UI that looks too "generic AI"
- Need a specific aesthetic direction: brutalist, maximalist, retro-futuristic, organic, luxury, editorial, etc.
- Want opinionated typography and color choices instead of safe defaults
- Building landing pages, portfolios, or marketing sites where visual impact matters
Key Features
- Anti-"AI slop" rules — explicitly avoids overused fonts, color schemes, and layout patterns
- Bold aesthetic directions — brutalist, maximalist, retro-futuristic, organic, luxury, editorial, and more
- Typography-first approach — distinctive font selections with strong hierarchy and personality
- Color with intent — palettes chosen for mood and brand alignment, not just "looks nice"
- Motion design — purposeful animations and transitions that enhance UX
- Spatial composition — unconventional layouts, asymmetry, and whitespace as a design element
- Backgrounds & textures — gradients, noise, grain, patterns, and layered depth
Example Prompts
text
"Design a brutalist portfolio site with bold typography and raw textures"
"Create a luxury e-commerce landing page — no generic AI aesthetic"
"Build a retro-futuristic dashboard with distinctive color and motion"Source
- Skill folder:
skills/frontend-design/ - Standard: agentskills.io