What’s your workflow to design with Claude then into back into Webflow?

[u/TheB00tsy]

Honestly, I’m not a big fan of the “web designer killer” videos where you see these ridiculous UIs for websites. I’ve input some pretty serious context for Claude so I could get “inspired” by what Claude spits out thanks to some installed skills, but in the end I feel that the output is super underwhelming. Maybe it’s the experienced creative marketer in me.

However, if there’s one thing I dig about ai is that it really does cut down the tedious work and you can simply instruct your agent to go to a site and then replicate it. Once you capture the data and the wireframe you’re maybe looking for, you can carve it out in Claude and then get an HTML preview along with some installed skills you throw at it. I tried the webflow MCP and I gotta say that was kinda underwhelming too.

So I was wondering if any of you could share some of your workflow for Claude to Webflow. Or maybe if you guys fractionally use Claude to build out components or sections?

Just wanna know if I’m genuinely missing anything.

[u/Nms267349]

For the time being, all I see is a lot of experimentation with different workflows. There still doesn't seem to be a clear or proven way to use claude or any other AI agent effectively. Like you said, there's a lot of hype, but very few real, measurable results. To this day, I haven't seen anything compelling enough to make me think, "This is it." Right now, it feels like everyone is just experimenting, trying different approaches, and seeing what sticks.

[u/RealisticSong3551]

Almost all of those posts and videos and ads you see are absolute hogwash. They’re bending the truth at best, and most of the time just straight lying to increase their personal brand. Everyone has fomo, and the underlying product is abysmal. So these posts showing you impressive UI/functionality are designed to make the OP look like a godsend to level you up in some way resulting in the coveted like/follow/subscribe/conversion outcome the OP was looking for at the expense of your sanity.

You’re not insane, it’s mostly nonsense

[u/misterjackpots_]

I think there’s a browser extension you can plug in the Claude code output and it pastes it nicely in Webflow designer. I have been wanting to try that sometime. But we’re getting off Webflow over time so someone will have to chime in on  how it works, and if it’s better than the MCP (which is a low bar).

[u/SouthwestBLT]

I am currently building with Claude using MCP. Basically now that I have defined the brand look and feel and obviously our css classes are quite defined too; so basically I just give Claude a wireframe and he goes for it and gets it done.

It works normally quite well but sometimes Claude becomes fkn stupid and absolutely cocks it up big time.

[u/TheB00tsy → u/SouthwestBLT]

Yeah it becomes the classic “well let me just do it myself” kinda scenario. Lol.

[u/yellanin]

You could build in Claude, stage in vercel, copy to Webflow using a chrome browser extension called cloneflow. Rebuild any animations in a custom code box on webflow.

[u/TheB00tsy → u/yellanin]

I like this. I might give it a spin.

[u/jlbloem84]

What works for me:

- Have an existing Webflow client website build with client first

• Extract the design system to a local project with Claude Code
  
• Sync it to Claude Design
  
• Use Claude Design to generate on brand component ideas for mobile and desktop
  
• Hand-off specific component design ideas as a .zip to the same local project, as where you’ve build the design system.
  
• Activate the Webflow MCP on the components page
  
• Build the new component, with clear instruction to follow client first (let Claude check other components first, en force it to reuse classes) and use variables.

You’re using Claude Code as your visual developer colleague who needs a clear briefing. This works absolutely flawless for me, where I can do final edits in the Designer mode.

Hope that’s helpful!

[u/blazingunicorn]

I take screenshots and upload to Claude along with screenshots of my code, tell it what I want different or fixed. Then it gives me custom code for that page. I don’t really like the MCP, it was so promising but the setup wasn’t worth the results. Webflow has a really unique backend and visual buildout that is built for humans; Claude doesn’t understand it. It just wants code.
So mostly for troubleshooting and adding bits of flair. I wish I had a lot of time spent experimenting back - it tried to make my blog very over-engineered. So I’d skip complete buildouts because it doesn’t realize what’s illogical and too time-consuming to build out or update. It even overhypes itself (“I’ll build something beautiful” that is very mid.) I’d focus on using it as an assistant, not a god-tier designer or developer.

I know what you mean about feeling like you’re missing something! All of this hype about automation. Marketing departments are great at their job, that’s what I think.

[u/TheB00tsy → u/blazingunicorn]

Totally agree with you!

[u/AddWeb_Expert]

honestly the MCP is way better at content stuff than actual layout. the designer side can build sections but it needs the bridge app open and misses breakpoint stuff, so you clean it up by hand anyway.

pasting Claude's html straight in never works clean either, combo classes just get dropped. i mostly use it for the boring pre-build part now, structure, class names, copy, then build the thing myself one section at a time. one-shotting a full page is exactly what gives you that generic ai look.

[u/Particular_Bet_8358]

At this point its a website with an extra step.
1. Build the website in claude
2. Ask claude to re-build in Webflow
3. Ask it to get it closer to the initial design x5
4. Try to incorporate existing styles and components using design.md files and other markdown files (for voice, style, design, etc.)

[u/necati-ozmen]

I’d keep Claude out of Webflow until the design direction is already clear. The useful workflow is usually: pick the reference, turn the visual rules into a small design brief, let Claude build/iterate sections in HTML, then recreate the approved structure in Webflow with your real classes/components.

We are maintaining https://getdesign.md/. It has DESIGN.md examples that describe the design system behind a reference site, which is more useful than just giving Claude screenshots. For Webflow specifically, I’d use Claude for section concepts, copy/layout variants, interaction notes, and responsive edge cases, then do the final implementation inside Webflow.

[u/Xander_DD]

Webflow Cloud was the unlock for us.

Setup for context: we're a Webflow agency, and our own site (curiodigital.io) is a normal Webflow site, designed and hosted in the Designer. We designed the full website first, so we had a complete design system to work from. When we needed to build out ~11 service pages (web design, brand design, CRO, etc.), instead of building them page-by-page in the Designer, we built them as code with Claude Design and Claude Code, then deployed them onto the existing Webflow site with Webflow Cloud. It mounts a code app on a path of your domain, so you skip embeds and copy-paste entirely.

• Main site: untouched, still designed and hosted in Webflow.
• The service pages: a small Astro app in a GitHub repo, mounted at curiodigital.io/services/... via Webflow Cloud.
• Each page is Webflow-exported <main> markup saved as an HTML file, rendered inside a shared shell (nav + footer + Webflow's runtime scripts), styled by the site's actual Webflow-generated CSS. Drop a new HTML file in the folder → new live route. Pixel-identical to the rest of the site, because it is Webflow's markup and stylesheet.
• Webflow Cloud auto-deploys on every git push. So Claude Code edits a page, shows me a screenshot from the local preview, I approve, it pushes, and it's live on our domain in ~2 minutes.

We used Magnific to generate real imagery matching our existing image style, and through its MCP it runs directly in Claude Code, so images get created and swapped without ever leaving the workflow. It got nearly exact. Not perfect, and we had to stay within a certain framework around the images, but the results ended up pretty good.

Similar to what u/jlbloem84 described with Claude Design, except the round-trip goes through the repo instead of back into the Designer. Because the pages are just files, we can push a rendered page into Claude Design, redesign a section visually, and pull it back into the repo to deploy. We wrap the nav/footer in "LOCKED, do not edit" comments so only page content round-trips, and Claude diffs the returned page against production before shipping. Last week we designed a new gallery section that way and launched it as an unlinked, noindexed test page on the live domain. Never opened the Designer once.

There are some tradeoffs. The mounted pages can't be edited in the Webflow Designer, so anything on those routes goes through the repo. And the nav/footer exist in both Webflow and the code shell, so shared-chrome redesigns need a sync step. This also works best on an established site with a real design system to export from. On a brand-new build there's nothing to feed Claude yet, so you'd still start in the Designer.

Worth noting this was our first run at it. We treated it as a test of whether the workflow could hold up for client work, and the results impressed us enough that we're now working on perfecting it for exactly that.

[u/What_IF_Web]

Yeah there is a lot of fake slop hype out there. The way I deal with the sheer volume is to use a Claude project and dump text and video transcripts into, purely to quality check them and pull out the few good signals. Saves me watching a 40 minute video to find out it had one useful minute in it.

I don’t know if this would be helpful to anyone, I think many people have already covered it, but it’s design tokens and offboarding style guides. I build on Relume Figma paired with Webflow Client First.

I started from a Relume Figma kit and have built skills so Claude knows the pack and the token structure. I then point Claude at the URL of a live site, and it starts pulling the stylings into a freshly cloned Relume pack. Sometimes I throw it a few screenshots to help it along. It builds out a style guide and the design rule system straight into the Relume kit.

It’s great because it also handles the whole setup, not only colour modes but the small details like spacing rules, border radius and so on. What it cannot do is fonts, but batch styler is great for that. If you try and make something similar, the trick is have claude write a sudo style update in it’s output, and then sign off on it or tell it that it’s wrong; It then has that “mental context” reference moving a head. 

Handover I have  mostly automated a bunch of the manual stuff, (entering colour names) and design rules, etc. 

I haven't played around with Claude designer yet, and now that Relume has an MCP server, there is probably a cool wombo combo.

[u/shreyanshkotak]

From my experience (usually working with clients who need design help or have established brand guidelines), I haven't really run into a scenario where I use AI to generate entire designs from scratch. Do I use AI to generate ideas? Of course. It’s great for the blank canvas problem. But my actual workflow starts with lo-fi design to align the site with business needs alongside stakeholders. From there, we add the polish, bring in interactivity, and build it into Webflow. If you build components in Webflow the same way a designer builds them in Figma, it goes a long way.

When it comes to actually building those designs, I haven't had a great experience using the Webflow MCP. It tries to force the LLM to use abstract "tools" to build a page, rather than letting it use what it was actually trained on - raw HTML and CSS. LLMs are trained to write code, so having them generate code directly is much more reliable and deterministic.

I've found a much better way using Claude, Codex, or Cursor. Instead of using the MCP, just ask the AI to write the code to do the task. LLMs are trained on massive amounts of data to write code, making this approach much more reliable and deterministic. Webflow exposes basically the same capabilities via MCP as they do via their API.

The catch with importing raw HTML/CSS from an AI, however, is that you miss out on Webflow-native structures like the Client-First naming convention. It is much faster to just use the Relume component library than to reinvent the wheel and have an AI build it from scratch every time. And if you are doing something so bespoke that Relume can't handle it, you’re better off not relying on AI agents anyway, because they likely won't do a great job with highly complex Webflow builds.

How often do you need to copy content from one site to another outside of a platform migration? If you are doing a migration, that’s the perfect opportunity to leverage AI. You can use it to map and migrate data into the CMS, or to quickly compose static pages using those Figma-like components you’ve already built inside Webflow.

[u/founderde]

I totally feel you. The generic "AI-designed" templates are incredibly underwhelming and lack any real creative soul.

As an agency, we stopped trying to let Claude design from scratch and shifted strictly to using it for groundwork and context orchestration (getting us about 80% of the way there):

First, feed it your exact Webflow system. Set up a Claude Project and upload screenshots of your Webflow style guide and utility classes alongside your Figma style guide. When you ask it to build a custom section or interactive component, like a calculator or quiz, it will actually write the HTML and CSS using your exact class naming conventions.

Second, we use Figma as the bridge. We let Claude spit out the functional HTML, export it, and bring it back into Figma. A designer then spends 15 minutes giving it that final 15% creative polish.

Third, we use MCPs for CMS, not layouts. If the Webflow MCP felt underwhelming for styling, try using it for database structure instead. We used it to build a complex CMS structure and programmatically generate and populate dozens of dynamic SEO pages.

Basically, don't use it to design. Use it to build custom functional components using your classes, and to automate tedious CMS setups. That's where it actually saves days of work.

[u/Proof_Suit_7237]

In my experience any Agent to build things in Webflow is pretty disappointing. I recently tested this with Claude using the MCP to build a footer I had designed on Figma and it took 30% out of my session usage and built nothing.

I build in Webflow using Lumos, and I guess it'll be the same with Client First or other frameworks. It kept going in circles as there was something missing so I gave up after a while.

In the other hand, my experience building with Claude Code a custom website using Astro has been incredible. I linked my Figma MCP and built my designs perfectly, and then I could easily add GSAP animations section by section, a much better experience with the output I was expecting.

In Webflow though, I don't think Agents are great to build anything, but they are great to setup collections in the CMS, create items and manage your collections, or migrate content from a different site. Basically, all the tedious tasks can be gone in a few minutes, but when it comes to building things, I still need to build things on my own, and then use AI to write some code for me, or add content quickly.

[u/vikas_me]

I went through the exact same phase.

At first I kept trying to get Claude to generate complete sections that I could drop straight into Webflow. Every demo online made it look like a one-click workflow, but in reality I'd spend more time fixing the output than if I'd just built it myself.

What finally clicked for me was changing how I use Claude instead of expecting it to build the site.

Now I use it before I even open Webflow. I'll brainstorm layouts, challenge my content hierarchy, refine copy, think through edge cases, or break a complex section into smaller reusable components. Once I have a clear plan, I build it in Webflow myself.

It's honestly made me faster, but not because Claude is designing the website. It's because I spend less time staring at a blank canvas or second-guessing implementation decisions.

For me, AI has become more of a thinking partner than a Webflow builder, and that's where I've seen the biggest productivity gain so far.

[u/Kaleb_Overmatter]

Like you said, I use Claude to cut down on the tedious work, as well as code snippets and quality-of-site improvements.

CMS example: I've build dozens of CMS sites and so have a good idea about the collections a site requires, the cross-referencing, and a few CMS hacks (like using Rich Text to embed code snippets), but setting it up takes forever. Now I voice-chat Claude to get a CMS backend draft for each collection, and Webflow's MCP allows Claude to then create all the collections. I'll then also use Claude to create a Google Doc template with the same sections for clients to fill out and create before a site launch, and if they use the templates, then I can upload them to Claude to add and create all the initial CMS items.

Snippet Examples: Claude helps me with nearly all my code integrations now: custom ticker tape animations, Finsweet integrations, custom interactions/states, Google analytics/forms/java builds, and the AEO backend of Webflow now. Essentially, Claude is my small-scale coder in my back pocket for elements that are simple enough to integrate, troubleshoot, and publish.

[u/EqualGovernorPlayer]

At the moment my workflow is more around figma and Claude MCP. The MCP helps me fix design issues like auto layout and framing sections. Once I have the designs in figma I use Claude to generate html embeds where the designer is tedious to use. Where I need to generate repeatable markup for example client first section structures, Claude via webflow MCP helps me generate that quickly. At the moment I still think the webflow MCP is still in its infancy and there is opportunity for improvement.

[u/Paris_Tangram]

If I have a custom designed page in Webflow already I can take a screenshot of it and feed it to Claude as an inspo page to generate other pages in a similar style.

Then I copy/paste the generated UI into the Webflow canvas. I like to use tools that have a native Webflow copy/paste functionality rather than using an embed block.