PROMPT 9: 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/VUE/SV ELTE/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.