Specification
Missing, undefined, or contradictory specifications 60
Working code exposed decisions that static screens could leave undefined.
04Build AI-Native
Close the specification gaps Figma cannot show with working code
I built prototypes with Claude Code and defined screens and behavior in Storybook. By reviewing a working product with product managers and engineers, we resolved 131 specification gaps and UX improvements before implementation.
The full process, breakdown of all 131 findings, and adoption requirements are on CADDi Tech Blog.
Read the full article on CADDi Tech Blog (Japanese)
Walkthroughs6sessions
Stories created49items
Resolved early131items
01 — The Problem
The screens were complete, but the decisions were not
A static design can look complete without defining when errors appear, how empty states behave, what happens with long strings, or which sort order is the default. Undefined behavior and conflicts with the existing product were being carried into implementation.
02 — The Approach
Define product behavior in code and validate it through a working interface
- 01
HTML Prototype
Validate screen structure and information priority
- 02
Storybook
Define states and interactions with React and the internal design system
- 03
UX Specification
Document columns, statuses, filters, scrolling, i18n, and more in MDX
- 04
Walkthrough
Recreate real work with product managers and engineers, completing decisions before implementation
03 — The Result
Resolve 131 issues before implementation
Over roughly six weeks, we ran six walkthroughs across 31 screens, 49 Stories, and 39 MDX screen specifications, completing decisions that static screens had left unresolved.
Resolved before implementation
131items
Specification issues and UX improvements resolved before implementation- Duration
- Approx. 1.5months
- Walkthrough
- 6sessions
- Screens
- 31screens
- Story
- 49items
- MDX Specification
- 39items
UX Improvement
UX improvements 45
Recreating real work through interaction revealed issues invisible in static designs.
Implementation
Implementation errors and conflicts with the existing product 26
Referencing production code exposed unintended divergence before implementation.
04 — What Changed
Change not the design artifact, but the completeness of decisions
Writing code was not the goal. By bringing screens, states, interactions, and specifications into one place and reviewing a working interface with product managers and engineers, we moved decisions out of implementation and into design.
- 01Expose ambiguous behavior before implementation
- 02Validate UX through realistic workflows
- 03Bring testing and existing-product constraints into design
Storybook was not a replacement for the production frontend. It was an intermediate artifact for aligning product behavior and UX decisions before implementation.
05 — Starting Point
Cross boundaries and expand the scope of design
Starting with almost no Git experience, I moved into code-based specification design with support from engineers and Claude Code. Within two months, my contribution grew to 251 commits across 177 files.