frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build or restyle web components, pages, artifacts, posters, dashboards, landing pages, React components, HTML/CSS layouts, or full applications, including when beautifying or polishing an existing UI. Generates creative, polished code that avoids generic AI aesthetics.

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Implement real working code with exceptional attention to aesthetic detail, strong hierarchy, and clear visual intent.

Design Thinking

Before coding, understand the context and commit to a bold aesthetic direction:

• Purpose: Identify what the interface does, who uses it, and what outcome it needs to drive.
• Tone: Pick a strong direction — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, or another intentional visual language that fits the brief.
• Constraints: Respect framework, performance, accessibility, responsiveness, and implementation limits.
• Differentiation: Decide what makes the interface memorable. Choose the one thing a viewer should remember.

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work; the key is intentionality, not intensity.

Frontend Aesthetics Guidelines

Typography

Choose fonts that are beautiful, distinctive, and context-appropriate. Avoid generic defaults like Arial, Inter, Roboto, and bland system stacks unless the brief explicitly demands them. Pair a strong display face with a refined body face when the design supports it.

Color & Theme

Commit to a cohesive palette. Use CSS variables or design tokens for consistency. Dominant colors with sharp accents usually outperform timid, evenly distributed palettes.

Motion

Use motion for impact and clarity, not decoration alone. Prioritize CSS-first solutions when possible. Use Motion for React when it materially improves the result. Focus on high-value transitions: page reveal, staged entrance, meaningful hover states, and clear response to user action.

Spatial Composition

Use deliberate layout choices: asymmetry, overlap, diagonal flow, broken-grid moments, generous negative space, or controlled density. Avoid default template spacing that feels generic.

Backgrounds & Visual Details

Create atmosphere and depth rather than defaulting to flat surfaces. Use textures, gradient meshes, noise, layered transparencies, dramatic shadows, decorative borders, or other visual devices that fit the chosen direction.

Anti-Patterns

NEVER use:

• overused font families and default-feeling typography
• cliched color schemes, especially generic purple-on-white startup gradients
• predictable template layouts and repetitive AI-looking component patterns
• cookie-cutter UI with no context-specific character
• the same aesthetic choices across unrelated outputs

NEVER converge on common AI defaults just because they are safe. The goal is thoughtful, specific design, not familiar design.

Implementation Standards

Match implementation complexity to the aesthetic vision:

• maximalist designs need layered detail, richer motion, and more elaborate composition
• minimalist or refined designs need restraint, spacing discipline, and subtle high-quality decisions

Implement working code that is:

• production-grade and functional
• visually striking and memorable
• cohesive with a clear aesthetic point of view
• meticulously refined in spacing, type, color, and interaction details

Prefer code that is ready to use or straightforward to integrate into the target stack.

Output Requirements

When executing this skill:

• build real code, not mock visuals
• keep the aesthetic direction explicit and consistent
• vary between light and dark modes, fonts, and design languages when appropriate
• avoid repeating the same design signature across generations
• make unexpected choices only when they improve the result rather than adding noise

Remember: excellent frontend work is not just functional. It should feel designed, intentional, and hard to confuse with generic AI output.