How a feature gets built with AI
An end-to-end flow from product idea to live screen, written at a senior manager's request: 50 steps across 6 stages.
Between a design being agreed and a screen being live, developers read designs, work out what they're made of and rebuild components the business already owns.
My role
Author of the end-to-end flow and its supporting material.
Approach
- AI doesn't do the designing. It needs a chain of real names: each component described in plain words, then mapped to the exact code component.
- The PM generates developer stories alongside development, QA and design, and each story is checked to name a real component.
- Nothing reaches the backlog without explicit approval.
- Six automated checks before merge: placement, colours, overrides, version, design match and accessibility.
Outcome
An honest map: 18 of the 50 steps don't exist yet. It shows where front-end time comes back and what has to be built first.
Research, iteration and delivery
- Researched
- I mapped what happens between a design being agreed and a screen going live. Developers were reading designs, working out what they were made of and rebuilding components the business already owned.
- Iterated
- Each step went into the row of the discipline that owns it, then got marked as existing today or not, and as AI-assisted or not. The flow was reworked until every AI step pointed to a real, named component and a human approval.
- Delivered
- An end-to-end flow from idea to live screen, written at a senior manager's request, with an interactive delivery journey and a step-by-step view. It includes automated checks before merge and a rule that nothing gets built without a written description.
- In short
- A clear picture of where AI helps, where it can't yet, and what has to be fixed underneath before it can.
Get in touch
Looking for a product and UX/UI designer for a contract role? I'd like to hear about it.
Start a conversation- Connect
LinkedIn