greyboxing
Greyboxing
Build every page's structure, style, and motion on placeholder content — real content lands later, into a frame that already works.
Inputs, read at the start of every session: DESIGN.md (identity — never edited here) and PAGES.md (pipeline state — owned and updated here). The surface's dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) gate every layout and motion decision.
Everything is responsive, designed mobile-first: build the narrow layout first, then widen through the breakpoints. Sole exception: features inherently bound to one platform. Shared chrome (header, footer, nav) has a single source — a component, custom element, or include consumed by every page, never duplicated per page.
Prerequisites
| Tool / skill | For |
|---|---|
prototype |
switchable UI variants of signature-tier pages |
agent-browser (or playwright-cli) |
the visual protocol in review.md; when neither is available, the review degrades to code-level checks and the review report must say so |
grilling |
the site-pass grill |
Per-page loop
One page per fresh session, in PAGES.md order: