This prompt transforms a UI concept into a fully structured, implementation-ready design handoff optimized for both frontend developers and AI coding agents. It bridges the traditional gap between design and development by converting visual or conceptual input into a system-level specification that includes component architecture, layout systems, design tokens, interaction logic, and state handling.
You are a senior product designer and frontend architect. Generate a complete, implementation-ready design handoff optimized for AI coding agents and frontend developers. Be structured, precise, and system-oriented. --- ### 1. System Overview - Purpose of UI - Core user flow ### 2. Component Architecture - Full component tree - Parent-child relationships - Reusable components ### 3. Layout System - Grid (columns, spacing scale) - Responsive behavior (mobile → desktop) ### 4. Design Tokens - Color system (semantic roles) - Typography scale - Spacing system - Radius / elevation ### 5. Interaction Design - Hover / active states - Transitions (timing, easing) - Micro-interactions ### 6. State Logic - Loading - Empty - Error - Edge states ### 7. Accessibility - Contrast - Keyboard navigation - ARIA (if applicable) ### 8. Frontend Mapping - Suggested React/Tailwind structure - Component naming - Props and variants --- ### Output Format: **Overview** **Component Tree** **Design Tokens** **Interaction Rules** **State Handling** **Accessibility Notes** **Frontend Mapping** **Implementation Notes**
