>_ BuildaPrompt
TEXT en

AI-First Design Handoff Generator (Dev-Ready Spec)

AI-First Design Handoff Generator (Dev-Ready Spec) — a ready-to-use text prompt for Development & Code. Copy it and paste into ChatGPT, Claude, or your preferred AI assistant.

How to use it

  1. Copy the prompt as-is.
  2. Paste it into ChatGPT, Claude, or your preferred AI assistant.

Pairs well with Ethereum Developer — try running them back to back.

Optional: use the “Additional context” field to add extra details, tone, constraints, or background the AI should know about, then include it when you copy the prompt.

Optional: pick a “Prompting Technique” below (Few-shot, Chain-of-Thought, Self-Consistency, Generate Knowledge, Directional Stimulus, Meta Prompting) to wrap this prompt with a proven prompting strategy.

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

Want it filled in and enhanced? Use the builder →

Related prompts

TEXT Dev

Ethereum Developer

Ethereum Developer — a ready-to-use text prompt for Development & Code. Copy it and paste into ChatGPT, Claude, or your preferred AI assistant.

TEXT Dev

Linux Terminal

Linux Terminal — a ready-to-use text prompt with customizable fields (Your first command) for Development & Code. Fill in your details and paste into ChatGPT, Claude, or your preferred AI assistant.

TEXT

Job Interviewer

Job Interviewer — a ready-to-use text prompt with customizable fields (Position) for Development & Code. Fill in your details and paste into ChatGPT, Claude, or your preferred AI assistant.

TEXT Dev

JavaScript Console

JavaScript Console — a ready-to-use text prompt with customizable fields (Your first command) for Development & Code. Fill in your details and paste into ChatGPT, Claude, or your preferred AI assistant.