§ reference · skill
frontend-design
Forces a deliberate aesthetic *before* a line of frontend code — scans the project's style system, asks only what isn't settled, and injects tailored design guidelines plus an anti-slop list.
§ 01 · purpose
Purpose
Stops AI-generated frontends from converging on the same Inter + SaaS-blue + three-centered-cards default. frontend-design scans the project for existing style context, asks an adaptive aesthetic checkpoint, then injects a guidelines brief that primes every subsequent turn in the session.
§ 02 · when to use
When to use it
- You're building a page, a full layout, or a new application.
- You explicitly want design direction before coding.
- Skip for single-component requests in codebases with an established style system — the existing tokens already encode the decisions.
§ 03 · inputs
Inputs
| Name | Required | Source |
|---|---|---|
--headless (flag) | no | Skips the interview; scans the project and injects findings as guidelines verbatim |
design intent (inline) | no | Phrases like "editorial dark with copper accents" or referenced files (DESIGN.md, brand decks) |
- design intent (inline)
- Vague adjectives ("modern", "clean") do not count — only named directions settle a dimension.
§ 04 · outputs
Outputs
| Artifact | Path | Format |
|---|---|---|
| Aesthetic guidelines brief | in-session message (system context) | markdown guidelines + anti-slop list |
§ 05 · key steps
Key steps
- Extract user-settled dimensions from input Why: Files (DESIGN.md, style guides) and named inline aesthetic phrases pre-settle dimensions, so the interview only asks about what's genuinely open. Vague adjectives are explicitly rejected as non-commitments.
- Scan the codebase for style context Why: A
codebase-locatoragent finds DESIGN.md, token files, Tailwind/CSS configs, custom-property definitions, and component libraries. Scan findings merge with user-settled dimensions to determine the auto-resolution baseline. - Adaptive aesthetic checkpoint Why: Empty scans get a 2-question micro-interview; established systems get scan-only injection; mid-state projects get a full 7-dimension checkpoint with skip logic. The interview size scales to what's actually unsettled.
- Synthesize and inject the guidelines brief Why: Output is the *product* — a tailored brief plus an anti-slop list that every subsequent turn references. Half-commitments produce the slop the skill exists to prevent, so the brief is deliberately opinionated.