frontend-design
Create distinctive, production-grade frontend interfaces with bold aesthetics and polished code for components, pages, and apps
## Overview
Creates distinctive, production-grade frontend interfaces with a clear, intentional aesthetic voice. Guides design direction, selects characterful typography and color systems, and delivers polished, working code that avoids generic AI aesthetics.
## How it works
You provide the context — component, page, audience, and constraints. The skill commits to one strong aesthetic direction and produces a cohesive implementation: design rationale, CSS variables, typography pairing, layout strategy, and working code. Animations and micro-interactions are implemented thoughtfully to maximize impact.
## When to use
Building a landing page, dashboard, or component that must feel unique and crafted. Styling or restyling an existing UI where generic aesthetics would be unacceptable. Prototyping a visually bold concept that needs production-capable code.
## Best practices
Define purpose, audience, and one clear aesthetic tone before writing code. Use CSS variables and a typographic scale for consistency. Favor a single high-impact motion sequence over many small animations. Respect accessibility: contrast, reduced-motion support, semantic markup.