AI processes for UX and IxD

The problem

On the UKEF GIFT project, prototype build time was eating into design thinking time. The service was complex - GDS-compliant, with intricate financial data flows - and sprint cycles were tight. Time spent writing repetitive HTML and component code was time not spent on the harder design problems.

Tools I use: AI-assisted prototyping for GDS services

Claude

Use first, before you open Cursor. Best for shaping and refining your prompt, adding context, and sense-checking that Cursor's output still aligns with your design intent. Treat it as your thinking partner, not your builder.

Cursor

Use to build. The three modes serve different purposes and the order matters:

• Plan mode - map the approach before executing. Use this when the flow is complex or has multiple connected pages
• Agent mode - execute the plan. Use once the approach is clear
• Build mode - commit to code. Only move here once you've fed the output back to Claude and confirmed it aligns with your design goals

GOV.UK Prototype Kit

The base for all GDS prototyping. Cursor builds on top of it. Make sure Cursor knows which version you're using and that it references GDS component names accurately in your prompt.

Figma

Reference your designs by linking directly to specific frames in dev mode within your Cursor prompt. This removes ambiguity and significantly improves output quality.

What I did

I introduced a structured AI workflow into my sprint practice across three stages.

Stage 1 - Prompt refinement with Claude

Before going near Cursor, I used Claude to shape and refine my prompt - adding the specific context, GDS constraints, and component detail that would make the output usable rather than generic. The more precise the prompt, the better the output and the fewer tokens used in Cursor.

Stage 2 - Plan and agent mode in Cursor

I'd take the refined prompt into Cursor, moving between plan mode and agent mode depending on what the task needed. Plan mode helped map out the approach before building; agent mode executed it. I then fed Cursor's output back to Claude to sense-check that what had been generated still aligned with the original design goals - catching drift early before it compounded.

Stage 3 - Build mode

Only once I was satisfied that the output aligned with the design intent would I move into build mode. That checkpoint before build was important - it meant I wasn't committing to code that had quietly gone in the wrong direction.

The discipline underneath all of this

It's a loop, not a one-way instruction. Claude shapes the prompt, Cursor generates, Claude checks the output, then you build. Each stage has a purpose and the human judgment sits at the transitions between them.

Do's and don'ts: AI-assisted prototyping within a sprint

Do's

• Do front-load the context - the more specific your prompt, the better the output. GDS component names, user needs, constraints, and the exact flow you're building all belong in the prompt before you start
• Do use Claude to refine your prompt before going to Cursor - treat prompt writing as a design activity, not an afterthought
• Do use plan mode before agent mode - map the approach before you execute it, especially for complex flows
• Do feed Cursor's output back to Claude before moving to build - sense-check that what's been generated still aligns with your original design intent
• Do treat the checkpoint before build mode as non-negotiable - it's where you catch drift before it compounds
• Do use this workflow to protect design thinking time - the point isn't to build faster for its own sake, it's to free up sprint capacity for the harder problems

Don'ts

• Don't go straight into Cursor with a vague instruction - the quality of the output is determined by the quality of the input
• Don't skip the sense-check stage - AI can quietly drift from your original intent and you won't always notice in the output itself
• Don't use AI to make design decisions - it builds what you tell it to build, the design judgment has to come from you first
• Don't assume GDS compliance without checking - always verify generated components against GDS standards, especially for accessibility
• Don't treat generated output as final - it's a starting point for iteration, not a finished prototype

Helpful prompts: AI-assisted prototyping for GDS services

Layer 1 - Prompts to use in Claude first (to shape your Cursor prompt)

Start by explaining the problem to Claude like you're briefing a teammate. Include:

• What the flow is and where it sits in the service
• What the user has just done and what they need to do next
• Which GDS components or patterns are involved
• Any constraints - existing page structure, naming conventions, route logic

Example brief to Claude:

“I'm building a change flow for reinsurance repayment profiles. A user has already added a profile and selects 'change' - it should take them to a new page with a different heading but the same upload structure. After uploading and clicking continue, they go to a confirmation page, then the journey picks up where it left off. Help me write a precise Cursor prompt for plan mode that includes the Figma links and the routing logic.”

Claude will then return a tightened, token-efficient prompt ready to take into Cursor.

Layer 2 - What a well-formed Cursor prompt looks like

Here's a real example from the UKEF GIFT project:

“Let's do a new prompt for Cursor plan mode. Context: this is for the 'Change flow: reinsurance repayment profiles'. Once a user has already added a reinsurance repayment and selects the change hyperlink, it will take them to the equivalent of the upload page but the heading will say 'Change reinsurance repayment profile' instead - so this needs a new page. Implement this design from Figma: [Figma link - upload page]. After a user uploads a CSV and clicks continue, it should take them to a new page: [Figma link - confirmation page]. Upon selecting save, the journey will pick up where it left off.”

What makes this prompt work:

• It gives Cursor the service context before any technical instruction
• It describes the user journey, not just the screen - Cursor understands what comes before and after
• It references specific Figma frames rather than describing the design in words
• It specifies the mode (plan mode) before execution
• It defines the routing logic explicitly so Cursor doesn't have to infer it