Webcraft wireframe

Turn section intent and draft copy into actual low-fidelity pages. 04-wireframes.md indexes the work; it does not replace visual artifacts.

Use upstream domain guidance when the relevant UI work begins. Fetch only the needed domain and its supporting references.

Start or resume

Read 00-project.md, brief, plan, draft copy, and existing wireframe records. Inspect equivalent supplied artifacts before accepting them. Missing setup, page/section plan, or usable draft copy requires the relevant /webcraft-init, /webcraft-brief, /webcraft-plan, or /webcraft-copy input; name what is missing instead of silently running earlier stages.

Create missing wireframes, resume incomplete pages, or revise the requested portion. If ready work exists and no change was requested, ask what to change. Preserve stable section IDs and unrelated work. If pages have already been styled, do not strip their styling merely because this command was invoked; propose structural changes in place or on a scoped copy when comparison is needed.

An explicit restart may rework this stage; preserve its prior milestone through existing history or a scoped snapshot. Approval belongs to a specific revision and does not automatically carry over to substantive edits.

Compose the wireframes

Match layouts to section purpose, content shape, and visitor action. Reuse suitable components in the project or design file; create a layout only when existing choices do not fit. No proprietary Relume library is required or assumed.

Use meaningful draft headings, CTA labels, realistic copy lengths, and labelled image slots with intended subject and proportions. Use the recorded design-system decision. For a new system, keep typography and color values neutral while retaining semantic roles: a primary action uses primary/primary-foreground even when those values are monochrome. Use background/foreground, muted/muted-foreground, border, input, and ring for their actual roles. In an existing system, reuse components and tokens; simplify presentation with a scoped wireframe theme only when needed, without overwriting global brand values. Establish hierarchy, spacing, navigation, and mobile reflow while deferring decorative styling. A page of empty grey boxes cannot test content fit.