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.
Limitations of 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. There's also the challenge of unmoderated testing — since the flow is pre-defined, if users go off-path or get stuck, they often drop off entirely.
HTML Prototypes via AI
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.
Running Unmoderated Tests
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.
Important moments — like where users get stuck or abandon the session — are automatically highlighted, saving time during analysis.
Choosing the Right Tool
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.
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.
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.