frontend-design

To structure a website redesign without losing consistency, break the frontend design into phased workflows for design system creation, greyboxing, and real-content implementation to enforce phase gates and reduce rework.

Greyboxing in a UX workflow is the process of mapping out a site's pages, tiers, statuses, signature elements, and motion direction before detailed implementation. You use it to plan site architecture prior to applying final content.

To manage context across separate frontend design sessions, use artifact-driven handoff through DESIGN.md and PAGES.md files. These artifacts preserve context and enforce phase gates between the design system, greyboxing, and real content phases.

Yes, you can use this phased approach for a new site build instead of a redesign. The workflow applies to both new site builds and multi-page website redesigns, moving from visual identity to page planning and final content delivery.

The best way to transition from design system creation to real content implementation is to pass through a greyboxing phase. Map out all pages, tiers, and signature elements first, then replace placeholders with final copy and complete a self-audit.

No specific design tools are required to implement a phased frontend delivery, but you must use artifact-driven handoff through DESIGN.md and PAGES.md files to preserve context and enforce phase gates throughout the workflow.