Webcraft design

Produce the complete visual and interaction design, refining actual code pages or editable design frames. Record decisions and evidence in 06-design.md.

Use upstream domain guidance when the relevant UI work begins. Fetch only the needed domain and its supporting references. For motion work, follow Emil Kowalski’s upstream guidance for this stage.

Start or resume

Read 00-project.md, current plan/copy, wireframes, and selected direction; inspect the actual visual sources. Accept equivalent inspected artifacts and link them. Missing setup, layouts, or a selected direction requires the relevant earlier Webcraft stage. Name the missing input; do not silently run it or pick an unapproved alternative.

Create missing designs, resume unfinished pages, or update the requested part. If designs are ready and no change was requested, ask what to revise. Preserve unrelated work and the selected direction. Resolve material stale-input issues before applying them. Use a question tool when available.

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.

Apply the system

Use available frontend-design guidance for visual judgment within the selected direction. Apply shared typography, section color schemes, spacing, controls, imagery, and reusable components across all scoped pages/templates. Preserve meaningful differences between page purposes rather than making every page look like the homepage.

Complete reusable component variants and states in the existing system, respecting preserve/extend/redesign/new. Keep the style-guide page/board synchronized with the actual components and tokens. Do not copy the starter theme over selected direction values or rename an established token system.