frontend-design

Frontend Design

Create a working frontend with a clear, subject-specific point of view, then prove it in the rendered UI.

Contract

• For a critique, review, or design plan, inspect the relevant product and report the direction without editing files.
• For a build or redesign, make the requested in-scope changes and run local, non-destructive validation.
• Treat explicit user direction, supplied references, repository instructions, existing product behavior, and the local design system as authoritative. Fidelity requests override this skill's defaults.
• Preserve the stack and working behavior. Do not replace the framework or design system, add dependencies, invent features, or fetch or generate media unless the request requires it.
• Make the smallest defensible assumption when the subject, audience, or page job is missing. State it before building; ask only when the answer would materially change scope or identity.

Workflow

1. Read the product before drawing the page

Inspect the affected route or component, neighboring UI, tokens, typography, assets, dependencies, and repository validation commands. Identify:

• the concrete subject and audience;
• the screen's single primary job and content hierarchy;
• the existing visual language and interaction conventions;
• the required viewports, themes, states, and accessibility constraints.

Use real product content and supplied assets wherever possible. If copy is missing, write only what the user needs to understand the interface and act.

2. Set one art direction

Before coding, define a compact direction:

• Thesis: one sentence connecting the visual idea to the subject and screen job.
• System: role-based color tokens, explicit type roles and scale, spacing and density, and a layout principle.
• Signature: one memorable element drawn from the domain's objects, workflows, data shapes, environments, or language.
• Risk: one deliberate departure from the obvious solution, with a reason it serves this brief.
• Motion and copy: when motion helps, how the interface speaks, and where restraint matters.