Current best workflow for AI-Assisted Product Design (Mar 2026

Step 0: Know what you want to build

Obviously. With these new tools, it becomes evident who can really think clearly and who understands a problem space at a deep level.

Step 1: Design some of it in Figma

Why: AI coding tools are not great at visual craft.

Step 2: Have a design system

Why: because you need consistency in order to communicate clearly to the AI systems

Step 3: Build a first prototype iteration in Figma Make

Why: Because it’s fast to begin, easy, and references some of the styles in the design system.

Why not stay in Figma: It’s slow to iterate, can’t handle large chunks of work, doesn’t adhere to styles the way I’d like, and you can’t leave comments on the prototypes when you share them with users (WTF?)

Step 4: Export Code out of Figma Make, and into VSCode

Why: Faster, more flexible, can handle larger chunks of work at once than Figma Make. Still not great at following visual craft instructions.

Step 5: Iterate back and forth with VSCode and Figma MCP

Go back into Figma, switch to dev mode.

Whatever the AI didn’t visually build as intended, click on that element in the Figma design, copy the MCP prompt for that specific element, and paste it into VSCode. This works most of the time.

What this doesn’t solve:

The prototypes the AI tools generate still don’t properly reference design tokens and components from your design system. This makes design-dev collaboration tricky and requires some cleanup afterward. However, this only matters when you work in scaled teams. The speed increases you gain by building this way offset most downsides.

Example:

Built this at work with this process. Added a commenting module in the right hand side where you can leave comments (Because you actually can’t do that in Figma Make’s code prototypes)