# Interaction Designer

## Flows, wireframes and a GOV.UK prototype. Built on the right patterns.

Interaction Designer turns user needs into page structure, flows, wireframes and a working prototype, using the GOV.UK Design System first and checking accessibility before it hands over.

[Get this on Gumroad](https://2111537314989.gumroad.com/l/interaction-designer) · [See the design](./anatomy)

## The problem
- Teams reinvent patterns the Design System already solved.
- Unhappy paths get designed last, or not at all.
- Prototypes reach research with accessibility failures.

## What it does
- Turns needs into one-thing-per-page structure
- Maps happy and unhappy paths as flows
- Picks GOV.UK Design System patterns and says why
- Builds a static HTML or Prototype Kit prototype
- Runs automated WCAG 2.2 AA checks and lists the manual ones

## How it works
1. Get this on Gumroad and download the zip.
2. Unzip it into a project folder and open it in your AI tool.
3. Say `design the flow for <need or brief>`.
4. It works one stage at a time and stops for your yes.

| Stage | You get, then approve |
|---|---|
| 1. Structure | Information architecture, User flow |
| 2. Wireframe | Pattern selection, Wireframes and states |
| 3. Prototype | Prototype build, Accessibility pre-check |

## Built to a standard
GOV.UK Design System patterns and WCAG 2.2 AA. Every claim cites its source. Nothing is written to your tools without your approval.

## Who it is for
Delivery managers and product owners who need flows, and engineering teams who need a prototype to build from.

## What you need
- An AI tool that reads project instructions: Claude Code, Cursor, or a tool that reads AGENTS.md. Claude Projects and custom bots work too, with copy-and-paste outputs.
- Your own AI subscription or API key. Nothing to host.
- Optional connections: Figma MCP, FigJam / Miro MCP, axe-core.

## What is in the zip
| File | What it does |
|---|---|
| `00-root-instructions.md` | Who the agent is, the rules, the gates |
| `01-structure.md` | Stage 1: Structure |
| `02-wireframe.md` | Stage 2: Wireframe |
| `03-prototype.md` | Stage 3: Prototype |
| `04-tools.md` | Connections and permissions |
| `05-manifest.md` | Which skill uses which tool |
| `06-adapters.md` | How to load it in your tool |
| `LICENCE.md` | What you may and may not do |
| `README.md` | Start here: set-up in two minutes |
| `guardrails.md` | Risks, controls and sign-off |
| `memory.md` | What is kept and where |
| `adapters/AGENTS.md` | Adapter for your AI tool |
| `adapters/CLAUDE.md` | Adapter for your AI tool |
| `adapters/chat-system-prompt.md` | Adapter for your AI tool |
| `adapters/interaction-designer.mdc` | Adapter for your AI tool |
| `evals/eval-suite.md` | Tests and pass marks |
| `rules/govuk-patterns.md` | Standard the agent checks against |
| `samples/01-register-to-vote-change.md` | Synthetic sample input |
| `samples/02-book-test.md` | Synthetic sample input |
| `samples/03-tell-us-death.md` | Synthetic sample input |

## Questions
**Does it work outside GOV.UK?**
It is built for the GOV.UK Design System. Other systems need the rules file changed.

**Static HTML or Prototype Kit?**
Your choice at the start. Static HTML needs nothing installed.

**Does it write to Figma?**
Only after you approve the exact frames.

**Can I change the files?**
Yes. They are plain markdown. The licence lets you adapt them for your own work.

## Designed before it was built
This agent was designed with the five-question method: purpose, boundaries, what it touches, when a person steps in, and how you know it works. [Read the design](./anatomy).

[Get this on Gumroad](https://2111537314989.gumroad.com/l/interaction-designer)