Design to Development Handoff

概要

This skill streamlines the transition from creative design to technical implementation by establishing a standardized handoff protocol. It provides comprehensive guidance on extracting design tokens, documenting component states and variants, defining responsive breakpoints, and organizing assets for development. By using structured templates for component specifications and integration guides for modern UI libraries like shadcn/ui, it eliminates common miscommunications and reduces the design-to-dev feedback loop, ensuring high-fidelity results that match the original vision.

主な機能

• Design token extraction and CSS variable documentation
• Implementation mapping for modern UI frameworks like shadcn/ui
• 3 GitHub stars
• Detailed component specification templates for states and variants
• Standardized asset export and naming guidelines for SVG and WebP
• Responsive breakpoint definition and behavior mapping

ユースケース

• Standardizing internal design system documentation for consistent implementation
• Preparing design assets and specifications for a developer handoff meeting
• Troubleshooting missing design details during the frontend development phase