START HEREAvailable
The UXDL Workflow
From product intent to a behavioral contract that can be reviewed, handed off, tested, and maintained.
End-to-End Workflow Diagram
Rendering diagram...
The 9 Lifecycle Stages
- 1. Create or Import: Start from your current context (Canvas creation or UXDL import).
- 2. Interpret: Identify what the requirement establishes and what edge-cases remain unclear.
- 3. Model: Declare observable behavior using Screens, States, Actions, Relations, and Slices.
- 4. Review: Use Canvas for spatial overview and Document view for requirement reading.
- 5. Validate: Structural validation verifies graph integrity; Contextual linter highlights product flow gaps.
- 6. Handoff: Hand off exact Slices or addresses rather than raw 50-page prose docs.
- 7. Implementation: Engineering builds the feature using technical architecture and SDD tools.
- 8. Verification: Automated test suites verify implementation against declared UXDL addresses.
- 9. Maintain: When product behavior changes, update UXDL and re-run validation checks.
Role-Based Responsibilities
UXDL aligns responsibilities across team members without duplicating effort:
- Product Managers — Own product intent, acceptance criteria, and Slice definitions.
- UX Designers — Validate spatial interaction flows and attach Figma frame links to screen metadata.
- Software Engineers — Receive addressable behavioral contracts and create SDD technical implementation plans.
- QA Engineers — Map automated Vitest, Playwright, or Cypress test targets to UXDL relation addresses.
- AI Coding Agents — Query MCP server for exact slice addresses before emitting code modifications.