| name | handoff-manager |
| description | Streamline design-to-development handoff process with comprehensive specifications and collaboration tools |
Design Handoff Manager
Purpose
Streamline the design-to-development handoff process with comprehensive specifications, collaboration tools, and workflows that ensure designs are implemented accurately and efficiently.
Capabilities
🎯 Tier 1: Foundation
Basic Design Handoff
Create comprehensive design specifications for development:
- Component Specifications: Document component props, states, and behaviors
- Design Token Export: Export design tokens (colors, typography, spacing) for implementation
- Asset Preparation: Prepare and organize design assets for development
- Responsive Specifications: Document breakpoints, layouts, and responsive behavior
- Interaction Documentation: Document interactions, animations, and micro-interactions
- Accessibility Specs: Provide accessibility requirements and WCAG compliance notes
- Basic Collaboration: Establish communication channels with development team
Example:
"Prepare design handoff for our new feature:
1. Document all component specifications (buttons, inputs, cards, navigation)
2. Export design tokens (colors, typography, spacing, shadows) in JSON format
3. Prepare and organize all images and icons for development
4. Document responsive breakpoints and layouts for mobile, tablet, desktop
5. Document all interactions, animations, and micro-interactions
6. Provide accessibility requirements (ARIA labels, keyboard navigation, screen reader support)
7. Set up communication channel with development team for questions and clarifications"
🚀 Tier 2: Advanced
Streamlined Handoff Workflows
Build efficient workflows and tooling for design handoff:
- Automated Specification Generation: Generate specs automatically from design files
- Code Snippet Generation: Generate code snippets (React, Vue, Tailwind) from designs
- Design System Integration: Integrate design system components with development workflow
- Version Control Integration: Sync design versions with development branches
- Quality Assurance Checklists: Create comprehensive QA checklists for implementation verification
- Design Review Meetings: Facilitate design review meetings with development team
- Implementation Feedback Loop: Establish process for gathering implementation feedback
- Design Ops Toolkit: Build toolkit for managing handoff process at scale
Example:
"We need to streamline our design-to-development handoff process. Help me:
1. Build automated spec generation from Figma to development tools
2. Generate code snippets (React, TypeScript, Tailwind) from design components
3. Integrate our design system components with Storybook for development
4. Sync Figma versions with Git branches for version alignment
5. Create comprehensive QA checklist for implementation verification
6. Establish weekly design review meeting with development team
7. Set up process for gathering and acting on implementation feedback
8. Build design ops toolkit to manage handoffs across multiple features"
🌟 Tier 3: Anticipatory
Strategic Handoff Excellence
Establish world-class design-to-development collaboration and processes:
- Design Handoff Platform: Build or implement comprehensive handoff platform
- Automated Testing Integration: Integrate visual regression testing with handoff process
- Design-Dev Pairing: Establish design-dev pairing workflows for complex features
- Handoff Analytics: Track handoff metrics (time to implementation, bug rates, rework)
- Cross-Team Training: Create training programs for designers and developers on handoff process
- Handoff Maturity Assessment: Assess and improve team handoff maturity and capabilities
- Design System as Source of Truth: Establish design system as single source of truth for both design and development
- Continuous Improvement: Establish continuous improvement process for handoff workflows
Example:
"We want to achieve design-to-development excellence. Help me:
1. Build or implement comprehensive handoff platform (Figma + tools integration)
2. Integrate visual regression testing into handoff workflow
3. Establish design-dev pairing program for complex features
4. Set up handoff analytics to track metrics (time to implementation, bug rates, rework)
5. Create training programs for designers (specs, documentation) and developers (design literacy)
6. Assess team handoff maturity and create improvement roadmap
7. Establish design system as single source of truth for both design and development
8. Create continuous improvement process with quarterly handoff reviews and optimization
9. Build culture of collaboration and shared ownership between design and development"
Integration
Works Best With:
design-system: Hand off design system components with full specificationsasset-optimization: Deliver optimized assets during handoffstyle-guide-generator: Include handoff documentation in style guidesuser-research: Share research findings with development team
Designer Pack Skills:
design-system ← Hand off design system componentsprototype-review ← Hand off reviewed and approved designsasset-optimization ← Deliver optimized assetsstyle-guide-generator ← Include handoff documentationdesign-trend-analyzer ← Document trend-based design decisionsuser-research ← Share research insightshandoff-manager ← You are here
Best Practices
✅ DO:
- Start early: Involve developers in design process before handoff
- Be comprehensive: Document everything developers need to implement
- Provide context: Explain design decisions and rationale
- Be available: Answer questions and clarify ambiguities quickly
- Iterate: Gather feedback and improve handoff process
- Use tools: Leverage handoff tools (Figma, Zeplin, Storybook) effectively
- Build relationships: Foster collaboration between design and development
❌ DON'T:
- Hand off late: Involve developers early in the design process
- Assume developers know context: Provide design rationale and decisions
- Skip documentation: Comprehensive documentation is critical
- Be unavailable: Stay responsive to questions and clarifications
- Ignore feedback: Learn from implementation issues and improve process
- Over-specify: Balance comprehensive specs with developer autonomy
- Work in silos: Design and development should collaborate throughout
Common Mistakes
- Handing off too late: Involve developers early in the design process
- Insufficient documentation: Comprehensive documentation is critical
- Missing context: Explain design decisions and rationale
- Poor communication: Stay responsive to questions and clarifications
- No feedback loop: Gather and act on implementation feedback
- Working in silos: Foster collaboration between design and development
- Ignoring tools: Leverage handoff tools to streamline process
Quick Commands
Get Started:
- "Prepare design handoff specifications for [feature]"
- "Export design tokens and assets for development"
- "Document responsive breakpoints and layouts"
Advanced:
- "Build automated spec generation from Figma"
- "Generate code snippets from design components"
- "Create QA checklist for implementation verification"
Expert:
- "Build comprehensive design handoff platform"
- "Establish design-dev pairing program"
- "Create handoff analytics and metrics tracking"
Example Workflows
Workflow 1: Basic Design Handoff
- Document all component specifications
- Export design tokens in implementation format
- Prepare and organize all assets
- Document responsive breakpoints and layouts
- Document interactions and animations
- Provide accessibility requirements
- Set up communication with development team
- Answer questions and clarifications
Workflow 2: Streamlined Handoff Workflows
- Build automated spec generation
- Generate code snippets from designs
- Integrate design system with development workflow
- Sync design versions with Git branches
- Create comprehensive QA checklist
- Establish design review meetings
- Set up implementation feedback loop
- Build design ops toolkit
Workflow 3: Strategic Handoff Excellence
- Build comprehensive handoff platform
- Integrate visual regression testing
- Establish design-dev pairing program
- Set up handoff analytics
- Create training programs
- Assess handoff maturity
- Establish design system as source of truth
- Create continuous improvement process
Success Criteria
✅ Tier 1 Success: Designs are implemented accurately and efficiently
✅ Tier 2 Success: Streamlined workflows reduce handoff time and improve quality
✅ Tier 3 Success: World-class collaboration enables design-development excellence and continuous improvement
Session Requirements
- Minimum Session: session-16
- Recommended Session: session-17 for Tier 2, session-18+ for Tier 3
- Prerequisites: Strong understanding of design systems, component libraries, and development workflows
