design-to-code-implementationlisted

# Design to Code Implementation ## Objective Translate design intent into accessible, responsive, maintainable code that fits the existing application architecture and behaves correctly with real data. ## Workflow 1. Inspect the repository, framework, design system, routes, data contracts, existing components, browser targets, and build process before selecting an implementation approach. 2. Inspect the complete design source. Capture dimensions, grids, tokens, assets, breakpoints, component variants, states, motion, content rules, and annotations. Flag missing behavior instead of inventing high-risk decisions silently. 3. Map design elements to existing components and tokens. Reuse supported primitives before adding new dependencies or parallel styling systems. 4. Implement semantic structure first, then layout, typography, color, imagery, interaction, responsive behavior, and motion. 5. Cover default, hover, focus, active, selected, disabled, loading, empty, validation, error, permission, offline, success, and destructive states where applicable. 6. Test with representative short, long, missing, localized, and high-density content. Verify keyboard use, screen-reader semantics, zoom, reflow, contrast, reduced motion, and touch targets. 7. Compare the running interface with the approved design at relevant viewports. Fix meaningful visual and behavioral differences without sacrificing accessibility or maintainability. 8. Run project linting, tests, build checks, and browse