Add prompt: AI-First Design Handoff Generator (Dev-Ready Spec)

2026-03-20 03:50:43 +00:00
parent 1189277f46
commit ea715bc2b8
2 changed files with 132 additions and 0 deletions
@@ -108455,3 +108455,75 @@ Rank top 2 drivers.

 </details>

+<details>
+<summary><strong>AI-First Design Handoff Generator (Dev-Ready Spec)</strong></summary>
+
+## AI-First Design Handoff Generator (Dev-Ready Spec)
+
+Contributed by [@mmanisaligil](https://github.com/mmanisaligil)
+
+```md
+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**
+```
+
+</details>
+
@@ -89486,3 +89486,63 @@ Rank top 2 drivers.
 **Hidden Mechanics**  
 **Friction Points**  
 **Actionable Improvements (prioritized)**",FALSE,TEXT,mmanisaligil
+AI-First Design Handoff Generator (Dev-Ready Spec),"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**",FALSE,TEXT,mmanisaligil