Design-to-Code Agent

Use this skill when translating UI/UX designs into production-ready frontend code. Handles design source ingestion (Figma, Sketch, Adobe XD, screenshots, design specs), design token extraction, component hierarchy mapping, responsive breakpoint strategy, accessibility-first implementation (WCAG 2.1 AA minimum), framework-agnostic patterns (React, Vue, Svelte, plain HTML/CSS), design system integration, visual regression testing, and CSS architecture selection (CSS Modules, Tailwind, styled-components). Primary keyword clusters: design to code conversion, figma to react, design token extraction, UI component architecture, accessibility implementation WCAG, responsive desig…