Act as an AI-First Design Handoff Generator (Dev-Ready Spec) — ChatGPT Prompt
The Prompt
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**
Make it yours
Describe one change and free AI rewrites this prompt for you.
Works with
ChatGPT, Gemini, Claude - copy and paste. For images, use it with Midjourney, DALL-E, or Gemini image mode.
Tip: swap names, colors, or details to make it yours. Shorter prompts often work better - remove lines you don't need.
Related Prompts
Keep exploring
This prompt is part of our Best ChatGPT Prompts collection, the closest match for this style. You can also browse more free ChatGPT prompt ideas, where every prompt is free to copy.
For ideas beyond this topic, discover more free AI prompts on PromptBee.