Maquette

A maquette is the small model a sculptor makes to choose a form before committing to the full piece. This skill does that for a page: the current page plus five genuinely different directions, rendered in the running app behind a temporary picker, one selection, then the chosen direction built properly and every rejected one removed.

State at the start that you are using the maquette skill.

Use it for a complete route, page or full-screen workflow whose direction is not settled. When the user supplied a direction, asked to match or extend an existing design, or scoped the work to a component or region, build one direction with chiaroscuro instead.

Hard Rules

These hold wherever the work happens: in code, in a Paper file and in any brief handed to a helper. Styling the product already has is not an exception; fix it inside the scope and report it outside. Only an explicit instruction from the user overrides a rule.

1. No small caps, tracked uppercase or decorative mono. No eyebrows, kickers, section labels, chips or table headings in capitals. Mono is for literal code, identifiers and values whose characters need inspecting, never for labels or headings. Proper acronyms keep their capitals.
2. No prose where interface belongs. A paragraph explaining a screen means the screen has failed. Replace it with a label, a control, a value or nothing. Keep only consent, constraints and error recovery.
3. Four to six type styles. Use the product's named roles. A new size or weight needs a job no existing role does.
4. Reuse before you build. Find the existing component, shell, header or control that does the job, in this product and in any package or project the user has pointed to, and use it. A second version of an existing control is a defect.
5. One of each. One corner-radius scale with concentric nesting, one icon family at one stroke weight, one control height per density.
6. Touch targets at least 44 by 44 CSS pixels.
7. Verified means used and looked at. "Works" means you completed the path in a browser, or walked a mockup's boards in order. "Looks right" means you then viewed each whole screen as the user sees it. Report the two separately, and never claim either from static checks.