Skip to content
ExamsLibraryFor agentsConnect your agent
commandsCommands·11/15

/design-engineering stage

Raw markdown On GitHub

Taught in

title: cmd-stage summary: "/design-engineering stage [still | demo | bento | review] [brief]" — build faux product UI for a landing page, feature card, docs hero or bento grid; plan first, frame before code, film the loop, review from frames. tags: [command, faux-ui, build, demo, bento]

Build posture, except review, which judges and does not edit. The second word picks the job; without one, a brief that says "animated", "loop", "cursor" or "demo" is demo, a grid of features is bento, anything else is still.

Every job starts the same

  1. Read gotchas and pov, and resolve the contract (using-design-file): its colours, type, radii and icon set become the demo's look. With the product's code at hand, read its tokens or a real component's computed styles; never guess them.
  2. If Stageshow is installed (its SKILL.md under .agents/skills/ or .claude/skills/), hand the build to it and keep what stageshow-reconciliation says this graph keeps. Otherwise build from the nodes below in the project's own stack.
  3. Write the plan before code: where it sits and at what size, still or animated (loop, once in view, hover), the layout (product-shot-framing), the focal object, the action, the payoff, the real strings (3–7), what is left out.

stage still

  1. Frame first (product-shot-framing), then the screen (faux-ui-restraint). Design at the shown size, plus a compact design at 358 if it can land in a phone column.
  2. Render it at both widths and fix framing before anything else.
  3. Return the component, its stills, and a one-line note of the layout and real strings.

stage demo

  1. The still above, as the opening frame.
  2. Script the story (demo-story-and-loops) and the pointer or touch (demo-cursor-and-touch): 3–5 beats, 10–16 s, a poster frame, a caused reset.
  3. Rehearse (demo-rehearsal): film the loop at both widths, step through each beat and the seam, fix the largest fault first.
  4. Add the host's pause/play and Replay, role="img" with a label, and the reduced-motion poster (stageshow-reconciliation).
  5. Return the component, the contact sheets, and REHEARSAL.md with what was not checked.

stage bento

  1. Write the tile table (bento-grids) and check it against rules 1–4 and 8 before building any tile.
  2. Build each tile as still (or one hero demo), one Stage per tile at 1:1, copy as page HTML.
  3. Check the grid at its widest and narrowest host; return the grid and the plan.

stage review

Judge posture. Run the fresh-eye brief in demo-rehearsal from frames you film yourself, rank framing → hierarchy and density → motion → polish, and output a review-format table. Do not fix anything.

You may delegate review to the ui-reviewer subagent where the host has it, with the frames attached.