Screenshot Driven Development
A development approach using visual screenshots as specifications and documentation for UI development.
Also known as: SDD, Visual Driven Development
Category: Methods
Tags: development, ui-design, testing, methodology, frontend, documentation
Explanation
Screenshot Driven Development (SDD) is a development methodology where screenshots, mockups, and visual artifacts serve as primary specifications and documentation for building user interfaces. Rather than lengthy written requirements, developers work from visual references.
How It Works:
1. Design Phase: Create detailed screenshots/mockups of desired UI
2. Specification: Screenshots become the authoritative source of truth
3. Development: Developers implement to match the visual spec
4. Validation: Compare implementation to original screenshots
5. Iteration: Update screenshots for changes, repeat
Key Practices:
- Visual regression testing: Automated comparison of current state to baseline screenshots
- Snapshot testing: Capturing and comparing component renders
- Design system documentation: Screenshots illustrating component variants
- Bug reports: Screenshots showing expected vs. actual behavior
Advantages:
- Clarity: Visual specs reduce ambiguity
- Faster communication: A picture is worth a thousand words
- Cross-functional alignment: Designers and developers share same reference
- Testing automation: Visual diffs catch unintended changes
- Documentation: Screenshots serve as living documentation
Tools:
- Design: Figma, Sketch, Adobe XD
- Visual testing: Percy, Chromatic, Applitools
- Screenshot capture: Built into browsers, testing frameworks
- Documentation: Storybook with visual snapshots
Limitations:
- Static: Doesn't capture interactions well
- Maintenance: Screenshots need updating as UI evolves
- Accessibility: Visual focus may overlook non-visual requirements
SDD works best combined with other documentation approaches.
Related Concepts
← Back to all concepts