SlipItIn/.agents/skills/ultimate-design-system-master/references/prompt-09-design-to-code-translator.md

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.