design shaping · cross-referencing
How design and technical artifacts cross-reference
The same state name appears in multiple places. This is not duplication — it is the thread that keeps the chain traceable. A wireframe frame called per-student-marking is referenced in the Gherkin Given ("Given Gal is in the per-student marking view"), in the test file (per-student-marking.concurrent-submit), in the API contract (the endpoint that serves this view), and in the PR that implements it. One name, many artifacts, one thread.
When any of them changes, the name tells you which others are affected. A designer who renames a frame knows to check the Gherkin. A developer who changes an API endpoint checks the contract. The name is the link — not a JIRA reference number, not a URL, the name itself. This is why state names are meaningful words rather than numbers: per-student-marking is findable with text search across every tool the team uses.
The enrichment loop between design and technical
Design shaping and technical shaping are not sequential — they enrich each other. The designer draws a state; the tech lead sees a data requirement. The tech lead drafts a schema; the designer sees a missing error state. The API contract reveals that a loading state is needed — the designer adds the frame. The wireframe reveals that a field needs to be editable in place — the tech lead adjusts the endpoint.
This loop runs for the duration of shaping, for release-1 stories. Neither role produces a finished artifact and hands it off. Both artifacts grow toward enough together — the design enough to amigos, the technical enough to write Givens that mean something specific.
Resolution gate — Design shaping done for a story
Enough to put the developer and QA in the moment.
The story has wireframe states covering its happy path, its observable edges, and the errors that have human consequences. State names are meaningful and consistent across Figma, Gherkin, and the test file. A prototype exists. Product decisions are recorded as PDRs.
Test: a developer reading the story and looking at the wireframes can picture the situation without inventing something.