I’m a designer working from finished Figma designs, using Relume, Webflow and Claude Code with the Figma, Relume and Webflow MCPs. My usual workflow is to start with the Relume Webflow starter, customise the Style Guide, then build all approved modules on one page before assembling the final site. I’m trying to work out the fastest reliable MCP workflow:
Can Claude read my Figma variables/styles and accurately update the Relume Webflow Style Guide?
Should Claude choose the closest Relume components, or should I identify them first?
Is it best to import the native Relume Webflow component, then have Claude customise it through the Webflow MCP?
Has anyone used this workflow successfully on a real production site?
Big thanks!
Sean R. Claude and the Figma MCP/Webflow MCP do a great job of referencing variables - easy for it to match between the two environments. I have not got to a point where I would be using the Webflow MCP to recreate sections but I have seen videos of this being done - biggest risk is trusting that it did it right - so reviewing every div, every setting, across the breakpoints etc. I gave this post a few days to simmer to see if anyone had any ideas but honestly most of these questions could be answered most effectively by trying them out. Personally, I don't have enough real-world/client experience with the process you are trying to do to give you a direction with high confidence. It's something I hope to explore very soon. I'll use your 4 questions as an outline for a test case and refer back here with my findings, would be cool if you also find anything useful and wanted to share it! 💪
Curious if there’s update to this. I’m having this problems right now 😄
good times, glad to hear you are making some headway with this workflow. I have as well
I think my favorite part so far is simple things like grabbing assets or icons or updating copy. if you finalize the figma file, and just tell it to go fetch, it does.
Hi Matt J. Generally, what is the best process for using Relume MCP. I have an existing website that uses Relume components but my marketing manager created a new website from scratch via Claude Design which doesn’t reference Relume. The problem I encounter is translating those 20 pages to follow my style guide system in Webflow. I think it’s 70-80% correct but if the layout used is unique and not in Relume, it fails. Do you create like a Relume skill or something for the instruction, is there a workflow guide from Claude to Webflow? Thank you in advance!
Rey A. yeah such as the world we live in now, so many ways to do things.
Whats the destination of the site?
What framework/platform/stack is the website built in?
Which MCP server are you using? We just launched Relume Publish MCP today - but were you using the Relume Library MCP? The Library MCP is completely different from the Relume Publish MCP we just released today.
Webflow
Claude only (for this instance)
I didn’t know about this difference 😄 whill check
I think Relume Library mcp
yeah I think so too since your original comment here came in before we released it. Okay, so walk me through what's going on here though. You want the website's final destination to be in Webflow. Your Marketing manager went rogue and generated a website in Claude Design. How are you using the Relume Library MCP during all of this? I guess for the style guide tokens, yeah? What I think is happening is likely the biggest opportunity in AI right now which is trying to fit a square peg in a round hole....... You're trying to apply a design (claude design), that was created with zero guardrails, no framework, no common language, and apply it to a system. Claude Design calls them design systems, but they are only a system to themselves. Claude can translate its own system just fine. What I would probably do if I were in your shoes, is work directly with the claude design artifacts first. Mold the "mock-up" of the website - similar to how you would have in Figma. I remember when Graphic Designers would try to design websites - they'd do it in Adobe Illustrator and the way it was built (the layers) barely resembled a website. Feels a lot like this. So work with claude design, maybe even move it to claude code. First ask it to explain the system to you in a concise way - using 5th grade reading language - provide visuals of the system and rules. Then ask it to create a "style guide" page - based on the "system" it created. Then I would ping the Relume Library MCP to grab the style guide from inside Relume. Then I would ask Claude to read the relume style guide and spot the differences between the two. Then I would make decisions (dont let Claude do it, because then we're back to the square peg in a round hole). My decisions would be trying to map whatever claude put together for a style guide, to the Relume style guide. I would probably bet a lot of money that you'd actually be cutting things out of the claude system. After I'm happy with the mapping and I have a style guide that I'm happy with, I would get to building that out in Webflow - most likely I would first have an agent bring the tokens into Webflow, maybe update buttons and typography, and likely hold there. Check things. Then I would ask the agent to build out the color schemes. I'm flying blind at this point, no idea how any of this will go up to this point. I've done pieces of this flow before. One bad prompt or one lazy decision and you could have a mess on your hands. Thankfully AI has a very efficient undo. Maybe once you get to the point where you are down to one style guide, you can share it with me and we can figure out next steps. The long story is that I think its possible for you to get this up in Webflow and for it to follow Relume but your marketing manager needs to not be using claude design. If they want to build quicker and on their own, they should use either Relume Publish and you can use the new Relume Publish MCP to bring those ideas to life in Webflow, or you guys agree to use the Relume Library MCP and the react component library shows you what is possible for layouts. Otherwise you'll have to do this translation layer every single time they spin up a new page.
appreciate this very detailed feedback
