05

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.

Interaction designer · GOV.UK Design System patterns · Available

Get this on Gumroad
See the design

Or get all nine agents in the UCD Team bundle.

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.

  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

    Optional connections: Figma MCP, FigJam / Miro MCP, axe-core.

What is in the zip

FileWhat it does
00-root-instructions.mdWho the agent is, the rules, the gates
01-structure.mdStage 1: Structure
02-wireframe.mdStage 2: Wireframe
03-prototype.mdStage 3: Prototype
04-tools.mdConnections and permissions
05-manifest.mdWhich skill uses which tool
06-adapters.mdHow to load it in your tool
LICENCE.mdWhat you may and may not do
README.mdStart here: set-up in two minutes
guardrails.mdRisks, controls and sign-off
memory.mdWhat is kept and where
adapters/AGENTS.mdAdapter for your AI tool
adapters/CLAUDE.mdAdapter for your AI tool
adapters/chat-system-prompt.mdAdapter for your AI tool
adapters/interaction-designer.mdcAdapter for your AI tool
evals/eval-suite.mdTests and pass marks
rules/govuk-patterns.mdStandard the agent checks against
samples/01-register-to-vote-change.mdSynthetic sample input
samples/02-book-test.mdSynthetic sample input
samples/03-tell-us-death.mdSynthetic 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

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).

About the author

Designed by Vijay Kandhalu.