A working prototype used to be a milestone. Today it can be an afternoon artifact.

That sounds like a pure productivity gain, but it changes design behavior in more interesting ways. When code becomes cheaper, teams can test interaction logic earlier, discover constraints sooner and stop treating implementation as a distant downstream phase.

The danger is obvious: fast code can also create fast nonsense.

This workflow is designed for product designers who want the behavioral fidelity of a coded prototype without surrendering the structure of their design system.

Step 1: define the question the prototype must answer

Do not begin with “build this screen.” Begin with a decision.

Examples:

• Can users understand the difference between two plan types?
• Does progressive disclosure reduce perceived complexity?
• Can a user complete the task on mobile without losing context?
• Does an AI recommendation feel trustworthy when evidence is shown?

The prototype exists to reduce uncertainty around that question.

Published wireframe sketches illustrate alternatives before implementation. Credit: Hal Gatewood / Unsplash. Source.

Step 2: design the minimum flow in Figma

You do not need every screen. You need enough design context to express:

• entry state;
• critical decisions;
• main interaction;
• success state;
• one or two important failure states.

Use real components and variables. The more structured the source, the less the coding agent has to invent.

Figma’s published Dev Mode comparison makes visual and property changes inspectable. The card is demonstration content. Credit: Figma. Source.

Step 3: connect Figma through MCP

With Figma’s MCP server, supported coding agents can retrieve structured context from selected frames, including components, variables and layout information.

Give the agent the specific selection link rather than an entire file whenever possible. Smaller scope produces clearer context and safer changes.

Ask first:

“Inspect the selected Figma flow. Explain the screens, reusable components, design tokens, interactions and missing states. Do not write code.”

Vercel’s design-mode example shows how quickly interface changes become visible. The sample metrics are demonstration content, not product evidence. Credit: Vercel / v0. Source.

Step 4: choose a disposable implementation target

The prototype should live somewhere safe:

• a local prototype repo;
• a dedicated branch;
• a separate route;
• a small standalone application.

Avoid modifying core production paths during exploration.

Step 5: establish implementation constraints

Before code generation, tell the agent what it must not invent.

Example:

“Use existing components and tokens. Do not create new colors, shadows or spacing values. Use dummy data. Keep business logic local to this prototype. Preserve keyboard accessibility. Ask before adding dependencies.”

Constraints are more important than clever prompts.

Four different readiness claims need different evidence; this conceptual progression is not a certification scale. Credit: Original editorial visual prepared for Andrea Mabellini. Source: Original explanatory diagram

Step 6: implement one interaction at a time

Do not ask for the whole flow if the most uncertain part is a single interaction.

Build the plan selector. Run it. Then build the comparison state. Run it. Then the confirmation state.

This lets the designer review behavior continuously instead of receiving a large block of code that is difficult to diagnose.

Published Penpot prototype anatomy illustrates interaction connections. Credit: Penpot. Source.

Step 7: populate realistic content

A prototype with lorem ipsum tells you very little about hierarchy.

Use realistic product names, error messages, data lengths and edge-case values. If the interface handles financial information, test large numbers. If it handles names, test long names. If it supports multiple languages, test expansion.

AI can generate synthetic data, but the constraints should come from your product reality.

Step 8: add the states that Figma tends to hide

Ask the implementation agent for an inventory of UI states implied by the flow.

Typical missing states:

• loading;
• empty;
• partial data;
• validation error;
• server error;
• permission denied;
• offline;
• long content;
• small viewport.

For a research prototype you may not need all of them. But seeing the list helps you choose intentionally.

Step 9: instrument the prototype for learning

If the prototype is going into a usability session, build observation into it.

You might log:

• which option was selected first;
• time before first action;
• number of backtracks;
• whether help content was opened;
• where users abandoned the flow.

Do not over-engineer analytics. Capture what relates to your research question.

Step 10: compare implementation with design

Now the design process gets interesting.

Review the running interface next to the source design. Look for intentional and accidental deviations.

Sometimes the code is wrong. Sometimes the static design was wrong.

Responsive constraints may show that a layout does not scale. Real text may break a carefully balanced composition. Focus states may make an interaction hierarchy ambiguous. These are design findings.

Step 11: bring the implementation back into design review

Figma’s newer MCP direction includes code-to-canvas workflows in supported clients, allowing live UI to be captured back into Figma as editable layers.

Even if you do not use that feature, the principle is valuable: the implementation should return to the design conversation.

Do not let the coded prototype become a parallel truth that nobody reconciles with the source.

Step 12: decide what survives

A prototype is not automatically production code.

At the end, classify the output:

• throw away entirely;
• keep as research prototype;
• reuse interaction logic only;
• promote selected components after engineering review;
• use as specification for a clean implementation.

This protects teams from prototype archaeology, where experimental code quietly becomes the foundation of a product.

The prompt I would reuse

“Use Figma MCP to inspect this selected flow. The goal of the prototype is to test [research question]. First list the minimum screens and interactions required. Map Figma components to existing implementation components. Use existing tokens only. Build the prototype in a separate route with dummy data. Include the selected error and empty states. Do not modify production behavior. After implementation, list deviations from Figma and any design issues revealed by the running UI.”

Why this workflow matters

The biggest gain from AI-assisted prototyping is not speed of drawing or speed of coding.

It is speed of learning.

A static design can hide false assumptions because it only needs to look coherent. A working prototype has to behave.

When the cost of making behavior tangible drops, product designers can test decisions earlier and communicate with engineers using a shared artifact instead of a speculative handoff.

That is a much more interesting future than automated mockups.

A concrete example: redesigning a pricing flow

Suppose the research question is whether showing annual savings as a total amount helps small-business customers choose annual billing confidently.

In Figma, create only the required states: current plan, monthly/annual comparison, selected plan, confirmation and one pricing-error state.

Use your real pricing components and tokens. Then give the selected frames to the coding agent through MCP and ask it to map components before coding.

The implementation can use dummy pricing data but should behave realistically: toggle billing period, update totals, preserve selection and handle a failed price refresh.

Now you can test understanding instead of testing whether participants can imagine an interaction from static screens.

Prototype fidelity should match the question

Do not build backend logic if you are testing information hierarchy. Do not polish animation if you are testing terminology. Do not create ten responsive breakpoints if the study is desktop-only.

AI makes overbuilding cheap enough to become tempting. Resist it.

The minimum viable prototype is the smallest artifact capable of producing reliable learning.

Use production components when visual trust matters

For concepts involving pricing, security, financial data or enterprise administration, visual realism may influence perceived trust. Reusing production components can make the prototype behaviorally credible without manually recreating the system.

This is one reason Figma MCP plus existing code libraries is a powerful combination.

Generate edge-case data deliberately

Ask the agent to create test fixtures that break comfortable layouts:

• very long account names;
• zero results;
• 500 results;
• negative values;
• missing avatar;
• expired plan;
• mixed currencies;
• slow response simulation.

Then inspect the prototype visually and behaviorally.

Keep a prototype decision log

As AI makes iterations faster, decisions can disappear into chat history. Keep a small markdown file in the prototype repository containing:

• research question;
• scope;
• key design decisions;
• known compromises;
• states intentionally excluded;
• what changed after testing.

This prevents the generated artifact from becoming more authoritative than the reasoning behind it.

How to run a usability session

Treat the prototype like any other research artifact. Do not explain that it was AI-generated unless that fact is relevant to the study. Participants should react to the product concept, not your tooling.

Have a reset mechanism so each session starts from a known state. Log only what you actually need. Ensure synthetic test data cannot be confused with real customer data.

After testing: ask the agent to implement findings as alternatives

Do not immediately overwrite the prototype. Provide the observed findings and ask for a change plan.

Example:

“Three of five participants interpreted annual price as the monthly charge. Propose two interface changes that address this without adding another step. Explain the trade-off of each. Do not change code yet.”

Then select the hypothesis and implement it.

Use code-to-canvas as a review bridge

Where supported, Figma’s code-to-canvas capability can capture live UI into Figma. This is useful after the prototype reveals layout and state changes that should become part of the shared design artifact.

The goal is not pixel-perfect round-tripping. It is keeping design discussion connected to what actually runs.

Prototype debt is real

AI prototypes accumulate quickly. Name them, archive them and delete what no longer matters. A folder full of half-working generated concepts creates confusion for humans and future agents.

Every prototype should have an owner and a status: active study, archived evidence, promoted pattern or disposable.

What engineers should review before reuse

If any prototype code may enter production, engineering should review architecture, dependencies, state management, security, performance, tests and maintainability.

The fact that code works locally is not evidence that it belongs in production.

The new collaboration model

The designer can bring a working interaction to an engineering conversation. The engineer can critique real constraints earlier. The product manager can experience scope before tickets are finalized. Researchers can test behavior instead of slides.

That compresses the feedback loop across disciplines, which is more important than the raw speed of code generation.

Practical review pass 1: turning the workflow into a team habit

Before adopting this workflow in a real product team, run one final review. What problem is this solving? Which part of the output comes from evidence and which part comes from generation? What system or guideline should constrain the result? Who is accountable for the final decision? What could go wrong if the output is confidently wrong?

Then review the artifact with the people who will live with the consequence. Designers should inspect interaction quality and consistency. Researchers should protect evidence quality. Engineers should review technical implications. Product managers should confirm that the work still addresses the intended outcome. AI can compress the path between these disciplines, but it should not erase their different forms of expertise.

Finally, document what worked. If a prompt, setup or sequence repeatedly saves time, turn it into a reusable team workflow. If it repeatedly creates cleanup, stop using it. The goal is not maximum AI usage. The goal is a better product-development system.

Practical review pass 2: turning the workflow into a team habit

Before adopting this workflow in a real product team, run one final review. What problem is this solving? Which part of the output comes from evidence and which part comes from generation? What system or guideline should constrain the result? Who is accountable for the final decision? What could go wrong if the output is confidently wrong?

Then review the artifact with the people who will live with the consequence. Designers should inspect interaction quality and consistency. Researchers should protect evidence quality. Engineers should review technical implications. Product managers should confirm that the work still addresses the intended outcome. AI can compress the path between these disciplines, but it should not erase their different forms of expertise.

Finally, document what worked. If a prompt, setup or sequence repeatedly saves time, turn it into a reusable team workflow. If it repeatedly creates cleanup, stop using it. The goal is not maximum AI usage. The goal is a better product-development system.

Practical review pass 3: turning the workflow into a team habit

Before adopting this workflow in a real product team, run one final review. What problem is this solving? Which part of the output comes from evidence and which part comes from generation? What system or guideline should constrain the result? Who is accountable for the final decision? What could go wrong if the output is confidently wrong?

Then review the artifact with the people who will live with the consequence. Designers should inspect interaction quality and consistency. Researchers should protect evidence quality. Engineers should review technical implications. Product managers should confirm that the work still addresses the intended outcome. AI can compress the path between these disciplines, but it should not erase their different forms of expertise.

Finally, document what worked. If a prompt, setup or sequence repeatedly saves time, turn it into a reusable team workflow. If it repeatedly creates cleanup, stop using it. The goal is not maximum AI usage. The goal is a better product-development system.

Practical review pass 4: turning the workflow into a team habit

Before adopting this workflow in a real product team, run one final review. What problem is this solving? Which part of the output comes from evidence and which part comes from generation? What system or guideline should constrain the result? Who is accountable for the final decision? What could go wrong if the output is confidently wrong?

Then review the artifact with the people who will live with the consequence. Designers should inspect interaction quality and consistency. Researchers should protect evidence quality. Engineers should review technical implications. Product managers should confirm that the work still addresses the intended outcome. AI can compress the path between these disciplines, but it should not erase their different forms of expertise.

Finally, document what worked. If a prompt, setup or sequence repeatedly saves time, turn it into a reusable team workflow. If it repeatedly creates cleanup, stop using it. The goal is not maximum AI usage. The goal is a better product-development system.