---
name: frontend-design
description: Build distinctive, production-grade frontend interfaces with a strong visual point of view. Use this skill for pages, components, or applications that need polished design and non-generic aesthetics.
license: See upstream repository for original license terms.
---
Use this skill when the task is mainly frontend design, visual polish, or UI implementation quality.
The goal is to produce working code that feels deliberate and memorable rather than generic. Favor strong aesthetic choices, careful hierarchy, and high-quality execution.
The user may provide:
- The surface to build or refine: component, page, flow, or app
- Product context, audience, and brand tone
- Technical constraints such as framework, performance, accessibility, and browser support
- Existing screenshots, mocks, or style references
## Design Direction
Before writing code, choose a clear visual direction and commit to it.
- Purpose: What the interface needs to help the user do
- Tone: Pick an intentionally strong aesthetic direction such as brutalist, editorial, playful, industrial, organic, luxury, retro-futurist, or soft minimal
- Constraints: Respect implementation, responsiveness, accessibility, and performance requirements
- Signature: Decide what single visual or interaction idea will make the result feel distinctive
Refined minimalism and bold maximalism can both work. The important part is consistency and intent.
Then implement real, production-ready code in the requested stack. The result should be:
- Functional and shippable
- Visually distinctive
- Cohesive from layout to motion to typography
- Carefully detailed rather than template-like
## Frontend Guidance
Focus on:
- Typography: Use expressive, context-appropriate font choices and strong hierarchy. Avoid default-feeling stacks when the project allows better options.
- Color and theme: Commit to a coherent palette with clear dominant tones and sharper accents. Prefer reusable variables or tokens.
- Motion: Use a few meaningful transitions, reveal sequences, and hover states instead of scattered decorative animation.
- Composition: Explore asymmetry, overlap, negative space, broken-grid layouts, or controlled density when it supports the concept.
- Background and texture: Add atmosphere with gradients, patterns, grain, borders, shadows, translucency, or other details that fit the direction.
Avoid predictable AI-style output:
- Do not fall back to generic white layouts with safe gradient accents
- Do not default to common font choices and interchangeable card grids
- Do not add motion or decoration without a design reason
Match complexity to the concept. If the design is restrained, execute spacing, rhythm, and typography precisely. If the design is expressive, support it with richer layout, animation, and detail work.
When working in an existing product or design system, preserve its language and push polish within those boundaries rather than replacing it wholesale.
