From af43a40092e6a05cf3a501fdb75a6166c854f00b Mon Sep 17 00:00:00 2001 From: promptadmin Date: Sat, 6 Jun 2026 20:41:10 +0000 Subject: [PATCH] Automated ingestion of prompt: AI-First Design Handoff Generator (Dev-Ready Spec) --- ...n_handoff_generator_dev_ready_spec_1524.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 prompts/coding/ai_first_design_handoff_generator_dev_ready_spec_1524.md diff --git a/prompts/coding/ai_first_design_handoff_generator_dev_ready_spec_1524.md b/prompts/coding/ai_first_design_handoff_generator_dev_ready_spec_1524.md new file mode 100644 index 0000000..28cccd6 --- /dev/null +++ b/prompts/coding/ai_first_design_handoff_generator_dev_ready_spec_1524.md @@ -0,0 +1,66 @@ +--- +title: "AI-First Design Handoff Generator (Dev-Ready Spec)" +contributor: "@mmanisaligil" +tags: #coding, #mmanisaligil +--- + +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**