Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic detail and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Step 1 — Ground the Brief

If the brief doesn't define the subject, pin it yourself: name one concrete subject, its audience, and the page's single job. State your choice before proceeding. The subject's own world — its materials, instruments, artifacts, vernacular — is where distinctive choices come from. Build with the brief's real content throughout.

Step 2 — Commit to a Direction

Before writing a single line of code, define the full aesthetic direction: