Generate comprehensive design handoff documentation for smooth designer-developer collaboration
Create comprehensive design handoff documentation for [FEATURE/PROJECT]. Handoff Context: - Project: [PROJECT NAME] - Feature: [FEATURE DESCRIPTION] - Design tool: [FIGMA/SKETCH/XD] - Development framework: [REACT/VUE/NATIVE/ETC] - Design system: [EXISTING SYSTEM OR NONE] Generate complete handoff documentation: **1. Overview** - Feature summary - User story/requirement reference - Design file links - Prototype links - Related documentation **2. Component Inventory** | Component | Status | Design System | Notes | |-----------|--------|---------------|-------| | [Name] | New/Existing | Token refs | | **3. Screen-by-Screen Specifications** For each screen: *[Screen Name]* - Purpose - Entry points - User flow position Layout: - Container specifications - Grid usage - Responsive behavior Components: - Component instances used - Property configurations - State variations needed **4. Interaction Specifications** | Element | Trigger | Action | Animation | Notes | |---------|---------|--------|-----------|-------| | [Element] | Click/Hover/etc | | Duration, easing | | **5. State Management** | Component | States | Visual Differences | Behavior | |-----------|--------|-------------------|----------| | | Default, Loading, Error, etc | | | **6. Content Specifications** | Element | Character Limit | Truncation | Fallback | |---------|-----------------|------------|----------| | Title | | | | | Description | | | | **7. Asset Export List** | Asset | Format | Sizes | Location | |-------|--------|-------|----------| | | SVG/PNG/etc | @1x, @2x | | **8. Accessibility Requirements** - Focus order - ARIA labels needed - Color contrast notes - Screen reader considerations - Keyboard navigation **9. Edge Cases & Error States** - Empty states - Loading states - Error scenarios - Boundary conditions **10. Implementation Notes** - Suggested approach - Known complexities - Dependencies - Testing considerations **11. Open Questions** - Decisions needed - Clarifications required - PM/Engineering alignment needed **12. Acceptance Criteria** - Visual fidelity checklist - Functionality checklist - Accessibility checklist
Create comprehensive design handoff documentation for [FEATURE/PROJECT]. Handoff Context: - Project: [PROJECT NAME] - Feature: [FEATURE DESCRIPTION] - Design tool: [FIGMA/SKETCH/XD] - Development framework: [REACT/VUE/NATIVE/ETC] - Design system: [EXISTING SYSTEM OR NONE] Generate complete handoff documentation: **1. Overview** - Feature summary - User story/requirement reference - Design file links - Prototype links - Related documentation **2. Component Inventory** | Component | Status | Design System | Notes | |-----------|--------|---------------|-------| | [Name] | New/Existing | Token refs | | **3. Screen-by-Screen Specifications** For each screen: *[Screen Name]* - Purpose - Entry points - User flow position Layout: - Container specifications - Grid usage - Responsive behavior Components: - Component instances used - Property configurations - State variations needed **4. Interaction Specifications** | Element | Trigger | Action | Animation | Notes | |---------|---------|--------|-----------|-------| | [Element] | Click/Hover/etc | | Duration, easing | | **5. State Management** | Component | States | Visual Differences | Behavior | |-----------|--------|-------------------|----------| | | Default, Loading, Error, etc | | | **6. Content Specifications** | Element | Character Limit | Truncation | Fallback | |---------|-----------------|------------|----------| | Title | | | | | Description | | | | **7. Asset Export List** | Asset | Format | Sizes | Location | |-------|--------|-------|----------| | | SVG/PNG/etc | @1x, @2x | | **8. Accessibility Requirements** - Focus order - ARIA labels needed - Color contrast notes - Screen reader considerations - Keyboard navigation **9. Edge Cases & Error States** - Empty states - Loading states - Error scenarios - Boundary conditions **10. Implementation Notes** - Suggested approach - Known complexities - Dependencies - Testing considerations **11. Open Questions** - Decisions needed - Clarifications required - PM/Engineering alignment needed **12. Acceptance Criteria** - Visual fidelity checklist - Functionality checklist - Accessibility checklist
This prompt is released under CC0 (Public Domain). You are free to use it for any purpose without attribution.
Explore similar prompts based on category and tags
Write comprehensive motion design specifications for consistent, performant animations
Create thorough design system component specifications
Analyze UI layouts for hierarchy, balance, accessibility, and provide actionable improvements
Develop comprehensive responsive image strategies for web performance optimization