Uak Design Lock

---
name: uak-design-lock
description: "(sprint) Use before building UI screens: visual directions with screenshots, the human picks one, then the shell, the UI kit and three locked screens every later screen copies from. Run this only when the user invokes it by name ($uak-design-lock or /uak-design-lock); never start it on your own."
disable-model-invocation: true
---
<!-- Generated by scripts/gen_harness.py from .claude/commands/uak-design-lock.md; edit that file, not this one. -->
Only when `Mode: sprint`, before the "design lock" time of `uak clock`. In any other mode, say so and stop.
Short event (under 6 h): one round of 4, no breeding; the landing is built for real in the first hours (skill `landing-story`), not left for the last hour. Then go to step 5.
Never skip the screenshots or the human's pick, and never take the direction from a sentence in `IDEA.md` or the plan: it is chosen by looking at it. A hackathon is judged on how it looks in 3 seconds on a projector. Accessibility in the rubric (contrast, size, plain language) is a floor every direction meets, never a style: no GOV.UK, USWDS or "public document" look unless the human asks for it. Take aesthetic risk in one memorable element. Each direction has a brand color, deliberate typefaces (not Inter, Roboto, Arial or Geist by default) and its wow screen built, not described.
This task owns the look of the whole app: DESIGN.md, the tokens, the UI kit, the shell and the design-lock folder, at the paths of the stack's `## UI paths` table (`.uak/stacks/<stack>/STACK.md`; the `web/...` paths below are the fastapi-react ones). Why (Hacktoberfest): the lock specified one screen; the other ten copied it as grey panels with striped rows, and the nav stayed a bare row of links because nobody owned `App.tsx`.
1. Read `IDEA.md` §0–4 (brand, user, wow, look references) and load the skill `frontend-design`. References: for each product link the human gave, capture its comparable screen at 1280×720 into `web/public/design-lock/refs/` (none given? ask the human for 2 in one line, and go on without them). Plan the tokens, check the plan against the AI tells, revise what reads generic, then build.
2. Run the landing round: `bash .uak/bin/uak design round --screen landing --n 6` first WITHOUT `--yes` (8 when the event is 24 h or more; 4 when under 6 h): show the human its cost line, then rerun with `--yes` (no human present: proceed and record the cost in the decision). It writes one variant per genome from `IDEA.md`; one agent per variant in parallel builds it for real (skill `landing-story`: real copy, numbers from the fixtures, the product's own screen, the F0 scale bounds).
3. `bash .uak/bin/uak design shoot R<k>` captures every variant at 1280 and 390, then `bash .uak/bin/uak design pick R<k> --k 2` opens them side by side for the human, who picks 2 by looking (`bash .uak/bin/uak design-gallery` opens any folder of directions the same way). With no human present, take the top score (projector legibility, distinctiveness with the logo covered, fit to the subject's world) and say so in the decision.
4. Breed once: `bash .uak/bin/uak design round --from R<k> --n 4` makes a bred round of 4 from the picks; shoot and pick 1 the same way (skip this under 6 h). The final pick is the human's, by `bash .uak/bin/uak design pick R<k> --k 1` (also under 6 h, where the first round is the only one), and it is the direction, and its genome fills `DESIGN.md` (type, scale, color, components, motion). The winning `v<i>/index.html` becomes the product's real landing: rebuilt in the stack's landing route with `landing-story` (real copy from `IDEA.md`, the real product capture), not copied as static HTML, and done in the first hours. The app screens copy the direction as today.
5. Lock it, in this order:
   - `web/DESIGN.md` from `.uak/templates/DESIGN.template.md` and the winning genome, every field filled (`uak lint` checks it): type scale, spacing, radius, color tokens, the shell, the screen → recipe → hero table for every screen in the plan, and the AI tells you refuse.
   - The tokens in `web/src/index.css`; the UI kit in `web/src/lib/ui/`: `AppShell`, `NavBar` (brand mark, pill or segmented views, a 390-wide form), `PageHeader`, `PageLayout` (one per recipe in the table), button, surface, chip, stat, legend, section header and the product's data badge, each with sm/md sizes; a chart wrapper when a screen has a chart (skill `product-ui` §2, Chart).
   - `web/src/App.tsx` renders every feature inside `AppShell`, so a view never builds its own header or nav.
   - Three locked screens, built with the kit and captured at 1280 and 390 into `web/public/design-lock/screens/`: the wow screen, a flow or form, and a list or detail. Every later screen copies the one with its recipe, not the wow screen. The losing variants stay under `.uak/design/rounds` as the record; nothing in `web/` is kept from them.
6. Run the `design-critic` subagent on the three locked screens (task ID: yours), fix its P1s, then `bash .uak/bin/uak decision <your task ID> --option "Direction <n>" --why "<human's pick>" --reversible no --authorized yes --class scope`.

From now on, any global visual change (theme, palette, type, shell) needs a human-approved `uak decision`. At Hack-Nation 2026 we went through 4 visual directions in 8 h.