frontend-design-realization

Turn design mockups into a usable design system by translating planning artifacts into semantic tokens and UI primitives. This creates a production-ready design-system layer that prevents drift and provides consistent styling for feature implementers.

Semantic UI tokens are categorized design variables for colors, typography, spacing, radius, shadow, and motion. They prevent design drift by enforcing token-only contracts that feature implementers consume, ensuring styling consistency without reinventing variables.

Bootstrap a design system manifest by reading an existing design spec, color palette, and scoped HTML mockups to generate the required MANIFEST.md file. This initial bootstrap phase emits the necessary semantic tokens and implements required UI primitives.

Refresh design tokens after plan changes by using a refresh mode that diffs existing manifests against updated design inputs. This updates semantic tokens and UI primitives while maintaining the authoritative MANIFEST for downstream consumption.

You need a design spec file before generating UI tokens because the process requires specific design inputs including the spec, color palette, and scoped HTML mockups. A prerequisites gate blocks output when these required inputs are missing.

Generating UI primitives requires an accessibility check and a final verify gate before completion. The quality gate enforces web-design-guidelines accessibility passes and blocks output if required inputs are missing or primitive states are incomplete.