Prototype Assembly

Assembly is where extracted tokens, decomposed components, and interaction patterns converge into a clickable prototype. The assembly workflow is top-down: layout shell first, then sections, then individual components, then interactions, then polish.

Phase 1 — Layout Shell: build the page structure (grid, sidebar, main content area) using the extracted spacing tokens. No visual styling yet — just the skeleton. Phase 2 — Component Slots: place each component into its position in the layout. Static content first, then replace with data-driven components. Phase 3 — Interaction Wiring: connect the interaction patterns from the library. Tab switches load different content. Cards expand on click. Lists scroll and filter. Phase 4 — Visual Polish: apply the brand design tokens — colors, typography, effects, animations. This is where the glass panels, cyan glow, and stagger reveals come in.

The top-down approach prevents a common trap: spending hours perfecting the visual polish of one component before validating that the overall layout works. If the layout is wrong, every polished component in it is wasted work. Build structure first, validate layout, then invest in detail.

1. Build the Skeleton Layout shell with correct spacing and grid. No colors, no effects — just structure. Validate that the information architecture works at this level before investing in visual detail.
2. Place Components Drop each decomposed component into its slot. Use placeholder data. Verify that the component sizes, proportions, and relationships match the approved mockup.
3. Wire Interactions and Polish Connect interaction patterns from the library. Apply brand design tokens. Add animations. The prototype should be visually indistinguishable from the approved mockup — but functional.