Specs translate exploration into clear rules for design and build. They document anatomy, behaviour, and accessibility so teams know exactly how something should work. A spec walkthrough brings designers and engineers together to validate details and surface gaps before implementation. Use this after exploration and critique, once a pattern, component, or template is ready for build.
Creating Specs
How to
-
Collect requirements
Bring in outputs from your Audit, Design Exploration, Interaction States, and Accessibility Review. Capture key needs and constraints.
-
Document anatomy and behaviour
Show the structure, variations, states, and interactions. Include accessibility notes such as tab order or touch targets.
- Use AI to generate initial spec drafts from your design files—anatomy, states, and prop suggestions
- Specs generated this way are about 80% done—you add the rationale, context, and nuanced guidance
-
Capture platform differences
Where iOS, Android, or web diverge, call this out clearly. Use Platform Overrides to document how each platform should behave.
-
Run a spec walkthrough
Invite designers, engineers, and contributors. Present the spec, flag assumptions, and discuss open questions. Use this to align on feasibility and fill in gaps.
-
Finalise and publish
Update the spec with walkthrough outcomes. Find iterate, use this as a guide for when you run your QA Review and as a support guide for Creating Guidance Pages.
Draft platform specs: Feed web specs to AI to generate iOS/Android versions. Check they use platform-appropriate patterns and behaviours. AI drafts specs well but misses design rationale, accessibility context, and implementation complexity. Treat it as a first draft, not the finished spec.