AI Design Workflow: Figma MCP, Cursor and html.to.design
Author
Demo Author
Date Published
Let's talk about "design workflows". I see a lot of my friends and colleagues in design struggling with how to integrate AI to accelerate the design process without sacrificing editorial control or constantly babysitting agents with time-consuming, repetitive prompting.
In a time when workflows are changing so rapidly, it's tough to go it alone. So I thought I'd share what I've been doing to get tight, pixel-perfect, reproducible design systems in the age of hallucinated slop.
Step 1: Start with an established UI framework
I like to kick off my designs by building out a component scaffolding based on primitives from established front-end frameworks like Tailwind, shadcn/ui, or Radix UI.
Step 2: Build a boilerplate style guide using an AI agent
Here's where things get fun. Kick off a code project where your view shows every single permutation of the UI components and primitives. Provide the agent of your choice (in my case, Cursor an AI powered IDE) with a styled theme you build out using tools like ShadCN Create:
Step 3: Import the code to Figma with html.to.design
You'll now have your styled starter theme elements as Figma designs. You can use these as building blocks to flesh out your ideas into high-fidelity designs structured exactly like the base code for your Tailwind (or other front-end) project.
Once you get the first drafts of your new designs using real building blocks from code, it's time to move on to my favorite step.
Step 4: Figma MCP 🙌
This is the magic. Now, dear designers, do not be afraid of setting up the Figma MCP server. This is your gateway to a pixel-perfect AI design loop with you in the driver's seat. Follow the guide for your favorite vibecoding or agentic workflow, then send your designs back to code to be sanitized and turned into a real working prototype.
From here, you can continue using html.to.design and the Figma MCP connection to your vibecoding agent to make fine adjustments and get repeatable results. At the same time, you'll be building out a design system that developers and agents alike can't miss.
Much love, and keep on designing! 🩷
#DesignSystems #Figma #CursorAI #UXDesign #UIDesign #DesignOps #AIWorkflows #FrontendDev #Vibecoding #WebDesign