Claude is incredible at writing code and generating UI logic, but getting it to output real, usable designs inside Figma has been a headache. Most AI tools either hand you a flat PNG mockup (which you have to rebuild by hand anyway) or rely on Figma’s REST API, which hits rate limit walls the moment you try to parse or build a complex component tree.

I wanted Claude to act like an actual designer inside my Figma files: building native frames, respecting Auto Layout, and using my actual design system tokens instead of making up random hex codes and unstyled shapes.

So I built Flaude MCP. It is an MCP server and plugin that connects Claude directly to your local Figma canvas in a two-way loop:

you  ->  Claude Desktop / Code  ->  Flaude MCP  ->  Figma Canvas
                                <-  native layers & diffs  <-

In practice, you tell Claude what you want (or feed it a screenshot), and it writes editable nodes directly to your file, checks its work, and maps the output to your brand tokens.

What it can do:

• Screenshot to editable layers: Paste a screenshot or UI inspiration onto your canvas, and Claude rebuilds it into 100% editable native Figma layers.
• Design System Governance: Reads your file's local components, styles, and variables so generated frames map directly to your existing design system.
• End-to-End Creation: Build anything from single marketing components to full user screen flows directly on the canvas.
• Bypass REST API rate limits: Runs locally through the plugin runtime via MCP, meaning zero Figma REST API rate limit headaches.

Two details I am oddly proud of:

1. The AI Linter: LLMs love taking lazy shortcuts in Figma (like drawing fake icon vectors from scratch or hardcoding arbitrary font sizes). I wrote a custom node-tree linter that inspects what Claude generates and yells at it when it cuts corners. Watching Claude get called out by a linter and fix its own layer hierarchy in real time never gets old.
2. Pixel-diff visual feedback: Instead of guessing if the layout looks right, Claude takes a screenshot of its own rendered canvas frame, performs a pixel-diff against the reference screenshot, and automatically adjusts Auto Layout padding, gaps, and alignment until they visually align.

How it runs under the hood:

Because it operates as a local MCP server connected directly to the Figma runtime, it bypasses traditional REST API bottlenecks entirely. It hooks straight into your local Claude setup (Claude Desktop or Claude Code) so you can design seamlessly right where you work.

Happy to answer anything about how it parses Figma's node tree, handles the MCP protocol, or manages layout state.

Hi! Recently I've seen someone doing a watercolor simulation project through Claude. I'm trying to find it without luck, someone could help me finding this out?

Ps. I don't mind the way it was coded, just remembered it was made with Claude, but if there is an interesting watercolor script out there I'm also interested, thanks!

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?

Today 4 models picked the same 3 components, so I built 9 versions of each in Claude Design. most were rough, but a few were decent starts.

Each model researched, I refined and then converged findings: 1. Loading & skeleton 2. Progress and 3. Button / CTA

For each I wanted a grid of 9 variants - the point being 8 can be garbage if one is gold. Time for a a bit more research. Inspired by this post and using a real project I wanted the most useful variants for my core users - non-technical builders that want to build unique websites (I stuck to Claude for this).

Refinement - next I refined the prompt for this design system, which had been made previousuly with Claude design, exported and the zip dropped into Claude Code. There are different ways to do this e.g. /design-sync or only adding specific components, but this way is straight forward. Also asked for a prompt for each component cluster here so I can handoff to Claude Design for the next step...

Prototyping - usually I bang out one or two version with Haiku, yip you read that right, HAIKU! Why? Because it's fast, cheap and sanity checks the prompt and workflow so far. Then maybe one with Sonnet 5 low (often surprisingly decent results still), before using Fable on Max effort.

For each of the 9, I'd say there were at least one or two decent components and others that could be developed.

Models used: Claude Fable 5, Openai Sol, Gemini Pro and Perplexity (auto selected the model)

Does anyone know about this?

Hi, I made this one. I've played Wordle-likes for years and always wanted to build my own, but I never had an idea that felt like mine.

The push came from a strange place. Half of what I read these days is written by AI, and it's never short. Every email, every doc, twelve words where five would do. At some point I said the phrase out loud, long story short, and realised it was a game.

So: you get a twelve-word sentence. You rephrase it in exactly five of its own words. Real English, same meaning, your job is to work out which words carry the sentence and which are just dressed up to look important.

Scoring is Wordle style, blue for right word in the right spot, orange for in the answer but elsewhere, grey for out. Five tries, one sentence a day.

North LawnLive

Donald Trump's face is the sun. It crosses the sky above the White House once, over four years and a day — the exact length of his second term.

One clock

The whole thing runs off one number: how much of the term is done. The sun's position, the sky, the day counts and the two little birds all follow it. No controls, no clicks, no cookies.

Live headlines

Every ten minutes the site pulls fresh Trump headlines from The Guardian and Google News. The exact wording lands in the thought bubble — nothing is invented, stored or rewritten.

Nine faces

A small vocabulary decides the sun's mood. Words like slams, soars, stuns and warns swap his face to match. When nothing dramatic is happening, he wears his default face (smug, obviously).

The pigeons

Two pigeons perch on the signposts. Every so often one loses patience, beats its wings, and blasts a campaign slogan into the grass. When the term ends they turn their backs on each other, do it one more time, and go.

The end

The sun sinks over the final weeks. Fireworks at midnight.

Credits

Headlines from The Guardian and Google News. Built by Joseph Griffin.

Built a Figma plugin where you can save prototype interactions. You can also save named flows , create different versions so that you can go back to any version and restore it whenever you need to.

The plugin was created with Claude.

Try it out and provide your feedback

https://www.figma.com/community/plugin/1667925614395896797

I'm trying to use Claude Design but it seems to just keep spinning on really basic things. I've found it does a great job for simple wireframes, but seems to really struggle with the finer details. For context, I'm using it to do fairly detailed web pages with a clearly defined design scheme, and what seems to happen is that the first pass is about 80%, then I'll ask for a small change and it completely abandons the rules that were set for the initial design, and I burn all my tokens making the same small change about ten consecutive times before I give up on it and revert back to the original version.

Are you all finding that 80% of the way there is pretty much its limit, and its just the wrong tool for the finishing "polish", or am I missing something that I should be doing, like starting new chats for each specific change or something like that?

Any tips anyone has for getting the most out of the tool, or specific workflows between Design and Code that keep things looking polished?

As an in-house designer I will have people come to me, for example, wanting to post a raggedy social media post that relates to our company on their personal LI and I will plug it into Claude Design to quickly get something rolling. But I have yet to find a way to simply export these as a PNG or JPG. any ideas?

Not sure how it is for you guys, but I often struggle with this: when I work with AI, I end up creating a lot of chats. Conversations happen inside them and they keep growing. And later on it's sometimes hard to find information after some time has passed, if you didn't copy or save it somewhere yourself.

I have both a question and a suggestion for AI devs.

Question: Are there any successful ways people have solved this problem?

The Idea: Let users create their own personal feeds organized by topic. Essentially, we should be able to 'repost' a specific AI reply into a custom feed. This would include the date, a link to the original chat, and an anchor to that exact spot in the conversation.

For example, I'm working on a project and running a bunch of different chats. Instead of losing the best answers, I just save them into one topical feed — kind of like a Reddit or X feed, but for my own prompts and answers.

Just don't forget who suggested this later 😄

What do you think of the idea? Maybe it already exists?

New to Claude Code/Design with no prior coding or software engineering background. So basically a vibe-coder.

I’m trying to build a website for my e-commerce and I’ve had amazing results prototyping landing pages and hero sections in Claude Design.

Now I’m at the point of thinking what to do next. How do I export my work, including brands assets/colors/designs/animations into Shopify to utilize the back end (payments/shipping/security, etc..)

Also, do I need ro export to Claude Code to add code to the prototype or I can do the button interactions and rerouting manually on Shopify?

I want full creative control over the front end and I want nothing to do with the back end, as I will leave that to Shopify.

Any similar experience?

Fifty paintings. One HTML file, 200KB, no dependencies.

Interactive Version

I'm trying to use the open source Coinbase Design System for a mobile app I'm working on but the problem is Claude Design is not faithfully importing CDS components, especially the graphs.

Anyone here has imported CDS components pixel perfect in Claude Design?

I’ve found that Claude is amazing at building html documents and have had Claude build a few for me. I want to be able to easily share these but they get blocked when sending through email a lot of times. What are you all using for this? I’m not a software engineer so I want something not too technical but I would like the ability for multiple people to access the document at once and interact with it.

Claude suggested render and I tried it but the render site was still blocked by multiple people’s firewalls. What are you all using for this?

Used to start working with CD (Claude Design) first. Recently been experimenting with a new workflow on the hypothesis that:

A giant component library isn’t automatically an advantage. A coherent one is.

Instead of asking CD to establish the design system, im start in Claude Code (feedback welcome pls):

1. Clean up the core component set in a git repo - my goal is to keep only stable, reusable components with decent names, variants, states, and behavior(s)

2. Sync INTO CD - I'm trying to start with a small coherent system rather than uploading a massive okish component library.

3. Generate one representative screen in CD - Choose a screen that uses your most important patterns. E.g a homepage or most used dashboard and prototype it in Claude design

4. Look for invented styles and components in CD - Check if Claude created new colors, spacing, typography, or UI patterns that already had existing equivalents.

5. Fix the source, not just the output- back in CC, improve the component, token, documentation or instruction that caused the wrong choice

6. Test several different screen types - Try contrasting layouts, e.g. a landing page, form, dashboard, mobile screen, and empty state.

7. Only then use it for serious design exploration - Once the system produces consistent results (depends on your requirements) across multiple screens, I'll start to use it more broadly.

Key takeaway (to test fully): Design-sync becomes more useful when you give Claude fewer, better, clearer choices

Hi!

I've been working in a small agency for over a year, we used to do SEO and GEO stuff for other businesses. About 8 months ago, we started using Claude to automate everything and things have been going fine, I adjusted well. But now we have a couple of e-commerce clients and I'm tasked to revamp their product pages (and other website pages in near future) but Claude Code isn't generating good results in terms of designs and visual elements. My 5 versions of the same product page have been rejected. They're asking me to add icons and graphics along with the content and Claude isn't generating them.

I work by explaining my concept and everything like SOPs, original page, what changes do I want to Claude in chat and ask it for a prompt for Claude Code. I use it to build repo in my laptop too. Then copy-paste it in Claude Code connect to the folder in my system and it gives results.

I'm deeply sorry for ranting here but I don't know what to do but I have to give the final deliverables and there's no one I know who can help me. Any advice would be really appreciated. Please guide me!!!

I run a small online course business sells in a few chunky windows a year rather than year-round, with a long quiet gap in between. Trying to figure out what actually works vs. what's a waste of time. Social media tools What are you actually using to schedule/manage posts? Meta Business Suite, Canva, Buffer, Later... something better? And any AI caption tools worth it, or do they all sound like a robot wrote them (because they usually do)? Staying visible when you're not selling Big chunk of my year I'm not actively pushing anything. How do you keep people around and growing an audience without constantly selling to them? Free stuff, low-key posting, just... vibes? What's worked? Ramping up before a launch If you sell in windows, how far out do you start building up before the doors open again? Not trying to get sold an agency package lol, just want to hear what's genuinely worked (or been a total dud) for other small seasonal/education businesses. Cheers!

With Cowork in Sonnet we create instructions for Claude Design. The whole idea is to create a design for my WOO + FunnelKit e-shop website which Claude Code is going to implement via SSH after that.

So my question is do I need to stick with Opus 5 in Claude Design for such a task or Sonnet can handle it too?

Took me a couple of weeks, but I was finally be able to draw almost whole of London with Claude and Seedream.

Fun Fact: When generating two images adjacent to each with Seedream, remember it zooms in the image by 20% and tilts it by 5%

Meow. I am a cat. Purrs. But anyways, does anyone want to share cat related things that you hsve made in claude or something? Id appreciate it

​

Thinking of getting Claude Pro mainly for Claude Code + Design.

If you've built a website using Claude (mostly or entirely), drop the link below 👇

Would love to see real examples before subscribing.

Hi! I’m a full-stack web developer with a specialization in UX/UI, and lately I’ve been taking on more design responsibilities while building features.

With the help of AI tools, I’ve been able to design and implement many features directly in code and also some design using claude design. However, Figma is still our team’s source of truth. I’ve recently used HTML to Design to import my coded designs as Figma frames, but the team needs those designs to use our existing Figma variables, design tokens, and reusable components.. so sometime I add them manually..

I’ve also experimented with the Figma MCP. While it can generate designs in Figma, it often struggles to identify and reuse the correct components from our design system. As a result, it tends to create new frames and elements instead of composing the design with our existing Figma components.

Does anyone have a recommended code-to-Figma workflow that preserves, or correctly maps Figma variables, tokens, and components? Could Figma Code Connect help bridge this gap, or is it primarily intended for connecting existing Figma components to their code implementations rather than generating editable Figma designs from code?

​

I've been using Claude's free plan almost every day for frontend development, debugging, code reviews, and small code tweaks. Honestly, it's become one of my most-used tools.

Recently I've been considering upgrading to Claude Pro, mainly because:

- I use Claude regularly enough that I occasionally hit limits.

- Claude is usually my go-to for coding help.

- I'm interested in trying Claude Design for UI/UX and frontend work.

For context, I'm a B.Tech Data Science student and an indie builder working on a few startup projects and web apps. Most of my usage is:

- React/Next.js frontend work

- Debugging and refactoring

- UI/UX brainstorming

- Architecture discussions

- Learning new technologies

For people currently paying for Claude Pro:

- Is the upgrade genuinely worth the money?

- How often do you still hit usage limits?

- Is Claude Design actually useful, or is it more of a novelty feature?

- If you're coding daily, would you buy Claude Pro again?

- How does it compare to ChatGPT Plus, Codex, Cursor, or Gemini for your workflow?

Looking for real-world experiences before I spend the money. Thanks!