archi-ui-wireframe

A UI wireframe serves as the structural skeleton, but applying design tokens enforces a single source of truth for UI. This approach maps layout, typography, and color into a cohesive hi-fi result, ensuring cross-task consistency and traceability across the project.

You need to provide design_tokens.json and roadmap-driven inputs before generation. These inputs map layout, typography, color, and motion specifications, guiding the transition from low-fidelity wireframe to a cohesive hi-fi ui_concept.html result.

Yes, design_tokens.json and roadmap-driven inputs are required prerequisites. These inputs map layout, typography, color, and motion specifications, guiding the transition from low-fidelity wireframe to a cohesive hi-fi ui_concept.html result.

Maintaining a single source of truth for UI requires a two-phase workflow generating ui_concept.html. Phase one outputs a low-fidelity wireframe for architecture, phase two applies design tokens for coloring, ensuring all task-level ui.md files reference one cohesive hi-fi result.

Yes, applying design tokens to color a low-fidelity wireframe preserves information architecture because the process is explicitly two-stage. Phase one locks the layout structure, while phase two strictly applies color, typography, and motion mappings for the hi-fi result.