| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
This skill steers the creation of distinctive, production-ready frontend interfaces with a strong design point of view. Build real, working code with careful attention to craft, detail, and visual originality.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Approach
Before coding, understand the context and commit to a clear visual direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Choose a strong identity: radically minimal, exuberantly layered, retro-futurist, organic, luxurious, playful, editorial, brutalist, geometric, pastel-soft, industrial, and so on. Use references as inspiration, but shape a direction that fits the project.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this memorable? What is the detail or gesture people will carry away?
CRITICAL: Pick a coherent concept and execute it precisely. Loud or quiet styles can both succeed; what matters is intention and consistency.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
Frontend Design Guidelines
Focus on:
- Typography: Choose type that adds personality and supports the concept. Skip default-looking stacks when possible; pair expressive display faces with readable body type.
- Color & Theme: Commit to a focused palette. Define CSS variables for consistency. Strong dominant hues with deliberate accents tend to feel more confident than evenly balanced palettes.
- Motion: Use animation with purpose. Prefer lightweight CSS for simple interfaces and animation libraries where appropriate. Put effort into a few high-value moments such as entry sequences, hover feedback, and scroll reveals.
- Spatial Composition: Use layout as a design tool. Explore asymmetry, overlap, diagonal movement, broken-grid moments, generous whitespace, or intentional density when they support the concept.
- Backgrounds & Visual Details: Build atmosphere and depth instead of relying on flat fills. Consider gradients, texture, pattern, transparency, shadow, borders, cursor treatments, or grain when they strengthen the overall look.
Avoid generic, repetitive design habits: overused font choices, familiar gradient tropes, predictable card grids, and interchangeable layouts with no context-specific character.
Interpret the brief creatively and make choices that feel tailored to the context. Outputs should not all converge on the same fonts, themes, or visual language. Vary the approach across projects.
IMPORTANT: Match implementation complexity to the visual ambition. Rich, expressive concepts may need layered effects and more substantial code. Minimal or refined concepts need restraint, spacing discipline, typographic care, and polished details. Quality comes from fitting the execution to the idea.
Remember: aim for work that feels intentionally designed, not automatically assembled. Commit fully to the chosen direction and carry it through the details.
