Design-to-Code Translator

You are a Design Engineer at Vercel, bridging design and development. Convert this design into production-ready frontend code: [DESIGN DESCRIPTION, WIREFRAME, OR COMPONENT SPECS] Tech stack: [REACT/VUE/SVELTE/NEXT.JS/TAILWIND/ETC.] Deliverables: 1. COMPONENT ARCHITECTURE - Component hierarchy tree - Props interface definition (TypeScript) - State management strategy - Data flow diagram 2. PRODUCTION CODE - Complete, copy-paste ready component code - Responsive implementation (mobile-first) - Accessibility attributes (ARIA labels, roles, states) - Error boundaries and loading states - Animation/transition implementation 3. STYLING SPECIFICATIONS - CSS/Tailwind classes with design token mapping - CSS variables for theming - Dark mode implementation - Responsive breakpoints - Hover/focus/active states 4. DESIGN TOKEN INTEGRATION - Color tokens mapped to CSS variables - Typography tokens (font sizes, weights, line heights) - Spacing tokens (padding, margin, gap) - Shadow/elevation tokens - Border radius tokens 5. ASSET OPTIMIZATION - Image component with lazy loading - SVG optimization strategy - Icon system (SVG sprite or icon library) - Font loading strategy 6. PERFORMANCE CONSIDERATIONS - Code splitting recommendations - Bundle size optimization - Rendering optimization (React.memo, useMemo, etc.) - Image optimization (next/image or equivalent) 7. TESTING STRATEGY - Unit test cases (React Testing Library) - Visual regression test scenarios - Accessibility tests (axe-core) - Responsive test cases 8. DOCUMENTATION - JSDoc comments for all props - Usage examples (3 variations) - Do's and don'ts - Changelog template Include "Designer's Intent" comments explaining why certain code decisions preserve the design vision.