Prototyping public services with AI – practical tips
By automating repetitive and complex coding tasks, AI elevates the Interaction Designer from a ‘prototyper’ to a ‘strategic problem solver‘
(Part 1)
This is the first of 2 posts about how we’ve been using AI in prototyping. In this first post, we share some tips based on what we’ve learned so far. In the second post, we’ll talk more about the importance of the human in the loop.
Prototyping is an essential part of interaction design. Various methods exist, ranging from rudimentary pen-and-paper sketches and Balsamiq wireframes to sophisticated Figma designs and front-end frameworks such as Bootstrap or Tailwind.
Interaction designers in the UK public sector benefit from access to the robust and fully supported GOV.UK Prototype Kit. The kit facilitates the efficient creation of clickable, navigable prototypes, provided there is a foundational understanding of front-end coding. However, challenges can arise with more intricate functionalities, including routing, temporary data management, or the integration of advanced JavaScript features. These very often need collaboration with developers.
But with the advent of AI, there’s now considerable potential to enhance coding productivity. Several dxw designers collaborating with the Department for Education (DfE) have adopted Cursor AI for their prototyping, with good results.
The ‘Superpowers’: where AI excelled
We are definitely not the first to write about AI and prototyping, but here’s what we’ve learned from pairing the GOV.UK Prototype Kit with Cursor AI.
It’s GOV.UK Prototype Kit “ready”
There is no need to train Cursor AI — like most of the popular front-end libraries, Cursor AI understands well what components and patterns are available in the GOV.UK Design System. Tell them to insert a button, they will give you a button powered by the govuk-button class, not a Bootstrap button. This instant design system fidelity is a massive win for interaction designers, as it acts as an embedded accessibility and style guide, guaranteeing correct markup from the start.
Speed and efficiency
Cursor AI is great at doing repetitive tasks. For example, when we want to apply a similar pattern logic to multiple pages or journeys, a proper prompt will be able to help us fix everything in one go, which saves a lot of time. This acceleration radically shortens the feedback loop, boosting an interaction designer’s overall project velocity.
Ability in handling data and routing
Cursor AI helped implement complex logic (e.g. conditional routing, handling sessions data), making prototypes more realistic. This is one of the things designers often struggle with and look to developers for help.
Supercharged predictive logic
AI elevates predictive coding to a new level by understanding intent, not just syntax. For instance, when mocking up a complex conditional task list, the AI quickly recognised the desired structure. It correctly generated all the required conditional logic for the different task statuses (‘Not started’, ‘Complete’, or ‘Cannot start yet’), saving us from manually writing and debugging multiple, repetitive conditional statements. This capability means faster, cleaner code for intricate rules-based functionality.
Focus on design, not syntax
Perhaps the biggest benefit for an interaction designer is the mental shift from troubleshooting Nunjucks or routes.js to concentrating purely on the user experience. By automating the boilerplate coding, Cursor AI allows us to spend more time analysing content and information architecture. This ensures we are solving the right problem with the right content, rather than getting bogged down in implementation details.
Our practical tips for designers using Cursor AI
Please do not think Cursor AI can do everything. It will very often mess things up when the commands are not clear enough. Here are some tips from us to help you avoid the common issues we experienced when using the tool.
Tip #1 – Break your prompt into small pieces and check the results after each move
AI is actually quite bad at taking a large piece of information in one go. For example, if you want to build a journey of three pages, instead of writing the prompt like this:
Add 3 pages, the first page contains a search box, the second page displays a list of results in radio button format, and then the third page shows the selected results with radio buttons of yes and no to confirm the selection.
You should probably build the first page with this command:
Add the first page, name it “search-input.html” which contains a search box and a “Continue” button.
Then make sure the result is what you want, before you enter your second prompt:
Add another page, name it "search-results.html". It displays a list of results in radio button format, with 5 answers. The first answer is "London Bridge Primary School", and please create dummy answers for the rest of it in a similar format.
Then check again, before you move on to create the final page. Iterating the prompt immediately and page-by-page is way more efficient than iterating a large prompt in one go.
Tip #2 – AI is not for beginners in prototyping
While AI is very powerful, prototypers need to have knowledge of how the prototyping kit works. You need to understand what a template is in the view directory, what to put into the route.js file, and the idea of using session storage to create and store temporary data. Without this, AI may still be able to propose something for you, but you will struggle with a lot in debugging which may take longer than coding manually. For an interaction designer, this basic knowledge is essential to effectively guide and audit the AI’s output.
Tip #3 – Learn the right level of trust in AI
As useful as AI can be for speeding up parts of the prototyping process, there’s still a learning curve. Even if the tool performed flawlessly, it takes time to build confidence in what it’s doing, to trust that it’s interpreting your intent rather than just your words. You also have to learn its limits: how far you can push it before it starts to wander off in unexpected directions.
In practice, that means a fair bit of early trial and error. You start to notice patterns in how Cursor interprets prompts, how it structures code, and where it might take creative shortcuts. Over time, that familiarity becomes a kind of collaboration, knowing when to let it run, and when to step in and guide it back on track.
Trust comes with experience, and a bit of healthy scepticism.
Tip #4 – You need to know what “good” looks like
Back in the day, WordPress templates were a quick way to get a website up and running. They often looked great in the developer’s demo, but unless a client wanted that exact design, they could be surprisingly tricky to customise. It was frustrating to use a tool meant to speed things up, only to spend more time tweaking CSS through awkward settings than if you’d just written the code yourself. In those moments, having hands-on experience with HTML and CSS made all the difference. Someone without that background would have struggled to wrestle the template into shape.
It’s a similar story with AI-assisted tools. Cursor will often get things right, but it still needs a bit of supervision. You need to understand what’s going on in the code; to recognise when something doesn’t look or behave quite as expected; and to know how to correct it. Without that grounding in design or prototyping, it’s easy to miss when AI’s output looks plausible but isn’t quite right.
Like any design tool, AI’s value depends on the experience and intent of the person using it.
Tip #5 – Be specific about where you want changes to happen
This is a practical example that follows on from the trial and error tip above.
In the prototype I was working on, I had different versions in different folders to reflect the sprints in which the latest prototype work was carried out. I prompted Cursor to create code in a particular file which I had opened and was the version I expected it to make changes to. Although this seemed intuitive and obvious to me, Cursor actually found the first version of the file chronologically in the file structure and applied the changes there.
Sometimes you need to be more specific than you might think.
In the next post, we’ll talk more about the role of interaction designers when working with AI.