I used Windsurf, an AI-powered coding assistant built into VS Code, to build a clickable GOV.UK prototype with 32 screens in just two hours — without writing a single line of code. In this article, I share what I learned, what impressed me, and where tools like this might be heading next.
Choosing Windsurf over other AI IDEs (integrated development environment)
While several tools explore similar territory — Cursor, Codestral by Mistral, Replit Ghostwriter, and GPT Engineer, to name a few — I chose Windsurf because it works entirely within Visual Studio Code. That matters for designers like me who build functional prototypes using the GOV.UK Prototype Kit. The kit is code-based and relies on templating languages like Nunjucks, so working in a full code editor is essential. Visual Studio Code is already widely used across the public sector for this kind of work, thanks to its flexibility, extensions, and support for Node-based projects. Having Windsurf embedded directly in that environment means I can generate, test, and refine prototypes faster — without switching tools, introducing copy-paste errors, or stepping outside how we already work.
That said, new tools are emerging. Earlier this month, Figma introduced Figma Make, which lets you go from natural language prompts to working prototypes inside Figma itself. It looks promising, especially because Figma is so widely adopted. Whether it can integrate well with public sector prototyping kits like GOV.UK’s own remains to be seen, but it’s worth keeping an eye on.
Visual interface understanding is changing the pace of UI development
One of the most significant improvements in AI-powered design tools lately has been their ability to understand and translate user interfaces from images — often referred to as UI recognition or visual interface understanding. This feature allows the AI to interpret and rebuild UI layouts from screenshots, significantly accelerating the prototyping process, especially for interface-heavy projects.
With Windsurf, you can now drag and drop a screenshot of a screen from Figma and let the AI build the corresponding HTML, layout, and even basic logic automatically. What used to take hours of manual translation from visual to code can now happen in seconds.
I tested this capability in a small experiment. Instead of uploading a single screen and describing how it should behave, I uploaded two screenshots of the same UI — one before interaction, one after. I then asked the tool to implement the logic based on the difference between the two states. It interpreted the changes perfectly and generated the correct conditional behaviour without further explanation.
This may seem like a small step, but it’s a clear sign of where these tools are headed. It reduces the need to describe layouts in words or annotate prototypes manually, and instead enables a more natural, visual-first design-to-code process.
In practice, this doesn’t just speed things up. For example, imagine trying to describe a specific UI behaviour — such as a state change where an ellipsis appears after the second block of text. If you’re unable to articulate this using technical terms, the AI might misinterpret or hallucinate the intent.
In such cases, providing a visual representation — a before-and-after screenshot — can immediately clarify what needs to happen and lead to a more accurate result. This lowers the entry barrier for designers who may not be familiar with specific CSS properties or component terminology. As visual workflows and natural language become more universal, UX designers no longer need to hold exclusive ownership of prototyping — it becomes a collaborative space where more people can contribute actively and confidently.
From Figma to functional
Encouraged by this, I uploaded a screenshot from a Figma file and asked Windsurf to start with the service start page — part of a design flow I had worked on for a public sector client the previous year. I added logic by asking:
“When someone clicks ‘Start now’, take them to the next screen. But if they say they don’t live in England, send them to a page that says they can’t apply.”
It interpreted the request accurately and implemented the navigation as expected.
Not just code — AI that suggests better design
Partway through, I noticed that one page had a paragraph styled using the inset text component from the NHS design system. I hadn’t asked for this. Initially, I assumed it was an AI error or hallucination. But on closer inspection, I realised it had selected the component because the paragraph contained key eligibility information — content that, according to NHS design guidance, should indeed be displayed using inset text.
That moment shifted my perception of the tool. Windsurf wasn’t just turning my instructions into code — it was also reviewing my design decisions and recommending improvements based on the design system I’d referenced at the start. That level of contextual understanding was something I hadn’t expected.
Using Chat and Write modes effectively
Most AI IDEs are structured around two core features: one for exploring ideas and another for generating code. Windsurf follows this model with Chat and Write modes. Chat is helpful for thinking through decisions or testing assumptions, while Write steps in when it’s time to generate or refine the code. Once I got used to switching between them, the process started to feel more like collaboration than instruction.
By the end of the session, I had created a working, browser-based prototype with 32 interconnected screens. It included layouts, error states, navigation logic, and content structure — all built through a series of plain-language prompts.
Of course, it wasn’t flawless. Occasionally, when asked to revise something, Windsurf would break an unrelated piece of logic. These moments were rare and usually easy to fix, but they served as a reminder that AI tools still require human oversight.
Final reflections
Overall, the experience was transformative. What once took a couple of days — creating a detailed GOV.UK style prototype — was reduced to two hours.
The ability to prototype this quickly isn’t just a time-saver — it opens up space to test earlier, iterate more often, and bring others into the process. But it also surfaces something new: the way we interact with AI tools now matters as much as the tools themselves.
Writing clear instructions, giving structure to tasks and being intentional in our communication makes all the difference. If we want AI tools to be genuinely helpful, we need to meet them halfway.
For me, this wasn’t just about saving time. It changed how I think about my role — not just in delivering user experiences more efficiently, but in learning how to better communicate with the tools that support the process. Reducing prototyping time is a big win today, but it won’t be long before that pace becomes the norm. As other stages of design and delivery speed up, the true advantage will come from how well we prepare the groundwork. The way we frame our instructions and structure the setup will define how effectively AI can help us. We do the thinking and planning. The AI does the heavy lifting. The clearer we are, the better the output. And the more we practise this kind of collaboration, the more confidently and efficiently we’ll build what matters.
