The 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] 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.

How to customize this prompt

This prompt includes fill-in-the-blank fields. Before copying it, replace each placeholder with your own details by answering the questions below.

1. Design Description Wireframe Or Component Specs
2. React