AI prototype for advanced usability testing

AI tools are transforming the way websites and apps are built. Designers can now turn their ideas into functional applications without writing a single line of code.

With the recent introduction of the MCP server in Figma, it’s now possible to create pixel-perfect designs using real assets, making the design-to-development handoff more accurate than ever.

In this post, we’ll explore how designers can build HTML prototypes using tools like Copilot, and how they can run unmoderated user tests with Hotjar. But first, let’s look at some of the limitations of traditional Figma prototypes.

Figma prototypes are mostly used for screen transitions and click-through flows. While they support basic interactions like hover and drag, they don’t allow users to engage with the product in meaningful ways.

For example, users can’t type into a form field or trigger real-time logic. You can only link screens together or apply overlays, and even with the use of variables, input remains non-functional.

This makes testing difficult. If a user is asked to complete a task that involves entering data or seeing a response, they can’t do it in a Figma prototype. This breaks the natural flow of the test.

Duplication is another issue. To test something as simple as a login flow, designers often end up duplicating screens many times, creating a bloated file that becomes hard to manage.

As a result, most designers only prototype core functionality and leave out edge cases or complex flows. The rest is often explained verbally during testing sessions.

There’s also the challenge of user testing itself. Since the flow is pre-defined, unmoderated testing is hard. If users go off-path or get stuck, there’s no way for them to continue. They often drop off entirely.

These issues can be solved by building HTML-based prototypes. And thanks to AI, designers don’t need to rely on developers to create them anymore.

Platforms like Replit, v0.dev, and Bolt.ai let designers describe what they want in plain language, and the tools generate a working, interactive prototype.

These HTML prototypes support full input. Users can type data, trigger logic, and store or retrieve information from a database—just like they would in a real product.

Unlike Figma, there’s no need to pre-script every screen or explain how the prototype works. It behaves like a real app, which leads to more natural and useful testing.

These functional prototypes can be tested easily using tools like Hotjar or Maze. You can assign users a start and end goal, and track their entire journey in between.

Hotjar records clicks, scrolls, and interactions. It also tracks who has completed the test and who hasn’t, making it easy to manage large testing groups with just a shareable link.

Even if you don’t define specific tasks, tools like Hotjar allow full session replays. You can watch how each user moved through the prototype, just like watching a video.

Important moments—like where users get stuck or abandon the session—are automatically highlighted, saving time during analysis.

That said, it’s important to choose the right tool based on what you want to test. If you’re testing flow and logic, AI-generated HTML prototypes are a better fit.

If your focus is visual design, Figma is still the go-to option. AI tools often use generic component libraries, so the design might not exactly match what you want to build.

Figma’s new MCP server is helping bridge this gap. It promises pixel-perfect outputs, though currently it works best with desktop tools like Copilot, Cursor, and Windsurf.

Once remote MCP becomes widely available, we’ll likely see online tools delivering more accurate one-to-one design output. That feature is still evolving, but it’s headed in the right direction.

Meanwhile, tools like Replit and Builder.io are ahead. Their plugins are already able to capture design details far better than static screenshots, producing cleaner, more polished code.

The Replit Figma plugin interface demonstrating how design elements are converted into structured code components

AI is making it easier for designers to take control of the entire product-building process—from prototyping to testing. It’s giving us more freedom, speed, and creative power.

There’s a lot more on the horizon. Stay tuned.