u/Flashy-Alfalfa-9

every AI design setup i've tried has the same shape: the model generates, the model looks at what it generated, the model says done. figma make does it. the figma mcp does it. every console-style bridge does it. the screenshot goes back to the same model that made the mistake, and claude always thinks it looks right.

the standard fix is more context. design system, references, hardened prompt. i did all of it, and it helps, but it shapes what gets generated. it doesn't tell you when this particular screen came out wrong. i still got builds with the right tokens and the right components where the padding had drifted and a whole section was quietly missing. rules all followed, screen still wrong.

and with metered pricing that's not a small annoyance. run 4 comes out broken, you prompt again, that's more tokens. as someone put it in the figma make thread, while we pay for tokens instead of results, sloppy output is the business model working.

you can't make the model deterministic. you can make the acceptance deterministic. so i built that part: claude builds in figma through a plugin, the plugin screenshots what actually landed on the canvas, and the screenshot doesn't go back to claude. it goes to a pixel diff against your reference, plus a linter with hardcoded rules walking the real layers. swapped icons, drifted padding, placeholder rectangles. fail either and the screen can't be marked done, claude gets the defect list and keeps working. and every caught defect lands in a shared ledger, so a mistake anyone's session made last month becomes a rule everyone's gate enforces now.

the model is still a slot machine. it just lost the right to say "done."

everyone's talking about claude writing to figma since code to canvas shipped, and it's cool, but generating from a blank prompt was never my actual problem. my problem was: an existing flow i like, and two hours of manually rebuilding it before i can even start restyling.

so the flow in the screenshot: top row is elevenlabs' real onboarding — home, sign in, sign up, verification, pasted into figma as actual editable layers (real auto layout, real text nodes, not a screenshot import). bottom row is the same four screens after claude restyled the whole flow to my product's brand. gradients, buttons, copy, the works, structure intact.

the part that made this work isn't the prompt, it's the checking. every screen gets pixel-diffed and run through a structural linter (~24 hardcoded rules) before it counts as done, so the restyle can't quietly break spacing or swap in fake elements. claude fails its own review a lot, then fixes it. that loop is 10-15 tool calls per screen, which is also why this runs through a plugin instead of the metered api.

happy to answer anything about how the paste or the verification works.

for anyone here building tools or integrations on top of figma: how are you dealing with the REST API rate limits?

i’ve been working on an automated workflow tool that inspects files and builds UI frames directly on the canvas, but the REST API limits hit almost instantly. as soon as you try to do anything moderately complex (like parsing a deeper component tree or making rapid, sequential node updates), figma just shuts it down with 429 errors.

it feels like the REST API was really designed for basic read/export scripts rather than real-time interactive canvas generation.

if you’ve built heavy figma integrations, custom internal tools, or automated workflows, i’d love to know how you structured things:

• are you aggressively caching full file trees on your own servers?
• did you ditch the REST API entirely in favor of local plugin runtime / socket setups?
• how are you handling request batching when canvas state changes constantly?

i’ve been testing almost every AI design tool that comes out, and the loop is always the exact same: you type a prompt, get a flat mockup image back, and then spend two hours rebuilding the whole thing by hand in figma anyway.

a png of a button is not a button. the AI gets to do the fun part and leaves you with the data entry.

so over the past few weeks i built a plugin and MCP that connects claude directly to your figma canvas. instead of generating flat images, it builds actual figma frames with auto layout, real text styles, and component mapping.

two technical things ended up being way more interesting than i expected:

1. screenshot to editable layers: you can paste a screenshot of a screen you like onto the canvas and have claude break it down into native, editable layers. to keep it from hallucinating spacing, i added a pixel-diff check where it compares its generated vector frame against the original image and adjusts padding/gaps until it aligns.
2. a linter for AI laziness: LLMs love taking lazy shortcuts in figma (like drawing fake icon vectors from scratch instead of using proper components, or hardcoding random text sizes). i had to write a custom linter that inspects the generated node tree and calls claude out when it cuts corners. watching it fail a linter check and clean up its own layer structure never gets old.

it’s been my daily driver for a few weeks now—mostly for taking real-world UI inspiration and instantly turning it into editable frames mapped to our design system components.

happy to answer anything about how it works under the hood, handling figma's node tree, or the MCP

Six months ago I posted my open-source Figma plugin that lets Claude design directly inside Figma. The community feedback was great, but the same complaint kept coming up: the local MCP setup was painful and most people gave up.

So I shipped a hosted version this week. The MCP runs on our servers — you install the plugin, paste one URL into Claude (Desktop / web / Claude Code), and you're designing. ~60 seconds total, no terminal.

The biggest practical win nobody mentioned to me when I built this: there are no Figma AI usage limits. You're using your own Claude subscription, so as long as you have tokens, Flaude works. Figma Make has aggressive quotas on every plan and people hit the wall fast. Flaude doesn't have that problem — it lives on the Claude side, not the Figma side.

What I learned building this:

• The AI is way better when you give it strict design system rules (DESIGN_SYSTEM.md). I went from "this is generic AI slop" to "this actually matches our brand" after about 5–6 iterations refining the rules.
• The hosted MCP is a much bigger UX win than I expected. The OSS version had hundreds of downloads but very few people actually got it running.
• The biggest unlock isn't AI generating new ideas — it's AI maintaining your existing design language consistently.

Links
Free open-source: https://github.com/Ana-creates/flaude
Hosted version ($45 lifetime, no monthly fees, no usage caps): https://flaude.app

Happy to answer anything about the architecture, MCP setup, how I got it to work with Figma's plugin API, or how it compares to Figma Make / other AI design tools.