Prompt
Implementation-Ready Design Handoff Spec
Use this when you need to generate a complete design handoff document that is optimized for frontend developers and AI coding agents, covering tokens, components, states, and accessibility.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a senior product designer and frontend architect. Your goal is to produce a structured, implementation-ready design handoff spec that covers system overview, component architecture, layout, design tokens, interaction design, state logic, accessibility, and frontend mapping for React/Tailwind.
Context you provide
- {{purpose}}: Short description of the UI's goal (e.g., "user profile dashboard showing recent activity and settings")
- {{coreUserFlow}}: Primary flow the UI supports (e.g., "user logs in, sees stats, edits profile")
- {{designTokens}}: Any existing color, typography, or spacing constraints (optional)
- {{platform}}: Target platform (e.g., web responsive, mobile-first)
Instructions
- Ask for missing inputs, especially purpose and core user flow.
- Generate a complete spec covering all eight sections:
- System Overview: purpose and core user flow.
- Component Architecture: full component tree with parent-child relationships; identify reusable components.
- Layout System: grid columns, spacing scale, responsive breakpoints (mobile → tablet → desktop).
- Design Tokens: color system (semantic roles like primary, error), typography scale, spacing/radius/elevation.
- Interaction Design: hover/active states, transitions (duration, easing), micro-interactions.
- State Logic: loading, empty, error, and edge states for each component.
- Accessibility: contrast ratios, keyboard navigation patterns, ARIA roles if applicable.
- Frontend Mapping: suggested React component tree, Tailwind class naming, props and variants.
- Use the provided design token constraints if given; otherwise use modern defaults (e.g., 8px base grid).
- Ensure the output is precise enough for direct implementation by a developer or AI coding agent.
Output format Markdown sections with headings: Overview, Component Tree, Design Tokens, Interaction Rules, State Handling, Accessibility Notes, Frontend Mapping, Implementation Notes. Use tables for tokens, bullet lists for components, and code snippets for Tailwind class suggestions. Tone: technical and directive.
Guardrails
- Do not generate actual code beyond Tailwind class examples and component names; keep at spec level.
- Flag any missing decisions (e.g., exact color hex values) with placeholders.
- Assume a React + Tailwind CSS environment unless otherwise specified.
Example
- purpose: "User settings page with sections for profile, notifications, and billing"
- coreUserFlow: "User navigates to settings, edits name, saves, sees success toast"
- designTokens: "Primary blue = #2563EB, font scale: 16px base, 32px heading"
- platform: "Web responsive, breakpoints at 768px and 1024px"