Design Specification

A structural document that defines what screens exist, user flows, interaction states, component behaviors, and edge cases — without prescribing visual design. Enables designers to work from complete structural context.

Syntax

claude-documentation

1. Product Requirements Summary
   - User story
   - Success metric
   - Constraints
   - Out of scope
2. User Flow (step-by-step with branching)
3. Screen Inventory (per role)
4. Component Specifications
   - States: empty, loading, populated, error
   - Actions and behaviors
   - Responsive behavior
   - Accessibility requirements
5. Interaction Specifications
6. [DESIGNER DECISION] sections
7. Handoff notes

Example

claude-documentation

// Screen spec prompt
Generate a complete screen specification for a user settings page.
Include all states, user actions, data displayed, and edge cases.
Mark all visual styling decisions as [DESIGNER DECISION].
Do not prescribe colors, typography, or spacing.