Frontend Design
Source: mitsuhiko/agent-stuff (Apache-2.0)
Overview
Design and implement memorable frontend interfaces with a clear, intentional aesthetic. Output must be real, working code — not just mood boards. Design thinking + execution: every visual choice rooted in purpose and context.
When to Use
- Create a new web page, landing page, dashboard, or app UI
- Design or redesign frontend components or screens
- Improve typography, layout, color, motion, or visual polish
- Convert a concept or brief into a high-fidelity, coded interface
Inputs to Gather
Before coding, identify:
- Purpose & audience: What problem does this UI solve? Who uses it?
- Brand/voice: Any reference brands, tone, or visual inspiration?
- Technical constraints: Framework, CSS strategy, accessibility, performance
- Content constraints: Required copy, assets, data, features
If not provided, ask 2–4 targeted questions or state reasonable assumptions.
Design Thinking (Required)
Commit to a single, bold aesthetic direction. Name it and execute it consistently. Examples:
- Brutalist / raw / utilitarian
- Editorial / magazine / typographic
- Luxury / refined / minimal
- Retro-futuristic / cyber / neon
- Art-deco / geometric / ornamental
Avoid generic AI aesthetics. No "default" fonts, color schemes, or stock layouts.
Before writing code, define:
- Visual direction — one sentence that describes the vibe
- Differentiator — what should be memorable?
- Typography system — display + body fonts, scale, weight
- Color system — dominant, accent, neutral; CSS variables
- Layout strategy — grid rhythm, spacing scale
- Motion strategy — 1–2 meaningful interaction moments
Implementation Principles
- Working code: HTML/CSS/JS or framework code that runs as-is
- Semantic & accessible: headings, labels, focus states, keyboard nav
- Responsive: fluid layouts, breakpoints
- Tokenized styling: CSS variables for colors, spacing, radii
- Modern layout: CSS Grid/Flex, avoid brittle positioning
Aesthetic Guidelines
Typography: Avoid default fonts (Inter, Roboto, Arial). Use a distinct display font + refined body font.
Color: Commit to a palette with strong point-of-view. Avoid timid gradients.
Composition: Encourage asymmetry, scale contrast, negative space. Create visual rhythm.
Motion: Use sparingly but meaningfully. Honor prefers-reduced-motion.
Avoid
- Cookie-cutter hero + 3 card layouts
- Generic gradients and default font choices
- Unmotivated decorative elements
- Overly flat, characterless component libraries
Quality Checklist
- Aesthetic direction is unmistakable
- Typography feels intentional
- Layout and spacing are consistent
- Color palette is cohesive and legible
- Interactions enhance without clutter
- Code runs as provided and is production-ready