screen-mockup-html

Screen Mockup HTML

Overview

The HTML documents on the task ARE the design — one per variant, titled design: <screen> · <letter> (design: Invoices — list · A), so the review page can lay them side by side for the human to choose one. A human reviews each in a sandboxed frame, selects passages and comments on them; developers receive them in their run context as plain text. Nothing in them runs, loads or reacts — so every state is drawn, side by side, as its own static frame, and every decision a reviewer may question is text they can select.

Core principle: Draw states, don't simulate them. Lay each frame out by its own class, not by media queries — the review pane is not the device. It is a pan-and-zoom canvas, like Figma: frames sit at their real widths in rows as wide as they need, and the reviewer drags and pinches to move around them — so never put frames in a scrolling box.

Document anatomy

Keep these ids stable across revisions; review comments and the hand-off cite them.

One document per variant; each holds that variant only, complete.

1. header#top — <h1> the screen and the variant (Invoices — list · A — table first); one meta line: task key, design system version (base and layer), date, content language.
2. section#notes — purpose in one sentence; this variant's idea, whom it serves, what it costs, and whether it is the one you recommend (design-variants); the decisions on palette, type and layout and why (avoid-ai-default-looks); tokens or components this design proposes to add; draft copy; any state that does not apply, with the reason; the self-check result.
3. section#structure — the ASCII wireframes of this variant at 375 and the wide width in <pre>. They survive the text rendition developers get; the pixels do not.
4. section#variant-a (#variant-b in the · B document, …) — <h2>Variant A — <the idea></h2>, one line on the trade-off, then a strip with the 375 and the wide default frames.
5. section#states-a (…) — the states grid: every state at 375, and at the wide frame the default plus each state whose layout differs there (every-state-designed). Dark theme frames sit in the same grid.
6. section#controls — each control the screen uses in default, hover, focus-visible, active, disabled and loading, side by side.