developer product system risk: low

UI Design Handoff Generator

Instructs the model to act as a senior product designer and frontend architect to generate a complete, implementation-ready UI design handoff with sections on system overview, comp…

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**

ROLES & RULES

Role assignments

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.

EXPECTED OUTPUT

Format

markdown

Schema

markdown_sections · Overview, Component Tree, Design Tokens, Interaction Rules, State Handling, Accessibility Notes, Frontend Mapping, Implementation Notes

Constraints

Use bold section headings: **Overview**, **Component Tree**, **Design Tokens**, **Interaction Rules**, **State Handling**, **Accessibility Notes**, **Frontend Mapping**, **Implementation Notes**
Be structured, precise, and system-oriented
Optimized for AI coding agents and frontend developers

SUCCESS CRITERIA

Provide system overview with purpose and core user flow
Detail component architecture and tree
Specify layout system and responsive behavior
Define design tokens for colors, typography, spacing, radius
Describe interaction design and states
Handle state logic for loading, empty, error
Address accessibility requirements
Provide frontend mapping to React/Tailwind

FAILURE MODES

Output not following specified format
Incomplete coverage of required sections
Vague or non-implementation-ready details
Lack of precision or structure

CAVEATS

Missing context

Specific UI/product description to generate the handoff for.
Visual references or wireframes.
Target platform or additional frameworks beyond React/Tailwind

Ambiguities

Does not specify the input UI description or product to base the design handoff on.
Input sections (1-8) do not perfectly match output format sections (e.g., no explicit 'Layout System' or 'Frontend Mapping' in output headers).

QUALITY

OVERALL: 0.90
CLARITY: 0.90
SPECIFICITY: 0.95
REUSABILITY: 0.90
COMPLETENESS: 0.85

IMPROVEMENT SUGGESTIONS

Add a clear input placeholder: 'UI Description: [INSERT UI DESCRIPTION HERE]' before the sections.
Explicitly map input sections to output headers or use identical headings.
Include examples of design tokens or component tree for guidance.
Specify desired level of detail or length for each section.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.