Frontend Design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Workflow
- Design Thinking: Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this solve?
- Tone: Pick an extreme flavor (brutally minimal, retro-futuristic, editorial, etc.)
- Constraints: Technical requirements.
- Differentiation: Make it unforgettable.
- Implementation:
- Write HTML/CSS/JS or modern framework code (React, Vue).
- Ensure it is visually striking and meticulously refined.
- Typography: Choose fonts that are beautiful and interesting (e.g. avoid Arial, use distinctive display fonts paired with refined body fonts).
- Color & Theme: Commit to a cohesive aesthetic with CSS variables.
- Motion: Use animations for effects and high-impact moments.
- Spatial Composition: Use unexpected layouts, asymmetry, or generous negative space.
- Backgrounds: Create atmosphere and depth (gradients, noise, etc.).
NEVER use generic AI-generated aesthetics (cliched colors, predictable layouts).
Comprehensive Guidelines (from frontend-design)
Ground it in the subject
If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from. Build with the brief's real content and subject matter throughout.
Design principles
- Thesis Hero: Open with the most characteristic thing in the subject's world (headline, image, animation, live demo). Avoid the templated "big number with a small label".
- Typography: Typography carries the personality. Pair display and body faces deliberately, and set a clear type scale with intentional weights, widths, and spacing.
- Structure is information: Structural devices, numbering, eyebrows, dividers, labels, should encode something true about the content, not decorate it.
- Motion: Think about where and if animation can serve the subject. An orchestrated moment lands harder than scattered effects. Extra animation contributes to the feeling that the design is AI-generated.
- Complexity: Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail.
Process: brainstorm, explore, plan, critique, build
For calibration: AI-generated design right now clusters around three looks: (1) warm cream background with a high-contrast serif display and terracotta accent; (2) near-black background with a single bright acid-green or vermilion accent; (3) broadsheet-style layout. These are defaults rather than choices. Don't spend freedom on these defaults. Work in two passes:
- Brainstorm a short design plan based on the brief: create a compact token system with color (4-6 hex values), type (2+ roles), layout, and signature element.
- Review that plan against the brief before building. If it reads like a generic default, revise it. Only after confirming its relative uniqueness should you start writing code.
Restraint and self-critique
Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected.
Writing in design
Words are design material, not decoration. Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. A person manages notifications, not webhook config. Use active voice as default ("Save changes," not "Submit."). Treat failure and emptiness as moments for direction, not mood. Keep the register conversational and tuned: plain verbs, sentence case, no filler.
