I want to share with you a workflow I've developed for transferring pixel-perfect Webflow websites starting from a Figma baseline. For me, this is a great workflow in the interim before Webflow announced whatever it is that they're going to be announcing at Webflow Conf 2026 where HTML is the source of truth when it comes to your Webflow website. It utilises the Webflow MCP. It's based on Mast. However, if you prefer Client First, get your agent to set up the project in Client First. There's nothing stopping you from doing that. Ultimately, the project tries to constrain the agent and build a static version of the website knowing what the limitations are of Webflow before you transfer up to Webflow through the MCP.

We recently developed this website, which at the time of recording isn't live yet. Hopefully, by the time I release this video, it will be live. But that being said, this workflow just worked flawlessly, particularly with Fable 5 at the helm, although Opus 5 is also a very good contender for this. So making sure that you have a good model that understands complex tasks is really, really important. So without further ado, let's go through the repo, go through the mechanics of it all, and take you through how you can build a Webflow website using an agent. There's going to be an extended version of this video that I go into more depth for my Patreon subscribers. So, if you're interested in subscribing to that, go to patreon.com/zx505. Let's get on with the video.

Basically, everything is sourced from Mast. And if you don't know what Mast is, it's a lightweight component-first framework specifically for Webflow. And I like this because it's a lightweight framework. It allows a lot more flexibility and is not very opinionated. You can see it's got component patterns, conventions, custom code guidelines, how interactions and animation should be created, accessibility, all of the things that it takes into account that Webflow, the sort of restrictions are or things you need to take into consideration when making a Webflow website that's already baked into the static version of the website.

We've also got a bunch of skills for you here which we'll go through but they take you through the various stages of getting your website up from Figma and up to Webflow. We also have site scripts. Now this takes into consideration or assumes that you're going to upload your scripts to GitHub and then serve them through JS Deliver. This is a methodology on actually bundling them, versioning them, tagging them, and you should be able to access your scripts. It will give you the URL that you can access your scripts from and load them on. You just load one instance of the script on every single page. This will take care of loading them only on specific pages. So again, your agent will take care of all of this for you.

It will also give you a Webflow snippet. So again, if there are specific stylings or things like that, looks like I need to clean this up a little bit, that you can't achieve using the Webflow UI and that's like child selectors, all of your usual stuff that you can't bake into the Webflow designer. You'll put it into the Webflow snippet and the MCP will actually just synchronise the two. So if it gets lost, you have a backup, but also you just don't have to take care of it. And the piece de resistance is basically this template folder which contains all of the assets you'll need. We get you started with an index.html which will obviously be your homepage. We've got a style guide page and your styles.css. And this is where all of your pages will be built up where your website will be served from when you work on it locally. And of course all your assets will be stored as well.

I think the best way to show this is actually just to use it and take you through the workflow. So that's exactly what we'll do now. Here's some work I was just doing earlier to kind of clear everything that we had in the project. But there's no harm in just saying serve this project in your Claude or whatever. And it'll pick up the fact that there's two scripts in this project. One for the actual scripts and one for the website itself. So there you saw it's loading up the dev server within Claude here. If you weren't using Figma whatsoever, then you could literally just say, "Build me a contact page or however you would normally command your agent to build pages, you know, without a design reference." And the beauty of this is it will build it under the constraints of Webflow. So, at the end of the day, your static website will adhere to Webflow's guidelines.

But in our case, we want to start from Figma. And as I say, I strongly recommend starting from the style guide. A lot will be taken from this such as the fonts, colours, spacings, things like that from your actual style guide. Now, it will probably try and fill in the blanks as we've got that baseline on certain things it needs such as spacing. If you don't have spacing, it will just use ours. But ultimately, we can copy that frame link with command L. And in our agent, we can go style guide and then paste in that link to the Figma file. We can hit enter and the skill will take care of the rest.

Now, as I say, I would recommend Opus 5, some of the later models. I began this project using Opus 4.8 and it could get it done, but it took a lot of kind of round the houses. So, I would definitely look at using some of the later models at least on medium thinking effort. So, I've just given it the new URL there. It's asking me if I want to change the brand name and yes, we're going to replace brand name with Zoku across the site. Now here it's asking me how the font is hosted. I know Sharp Grotesk can be uploaded to Webflow. I mean we're going to upload to Webflow anyway. So that's how I would definitely recommend. And again it's picking up on all these. So here I'm just going to say Figma is source of truth mostly because I don't understand the phrasing but we want to take from Figma to the static Webflow website.

Cool. So that's basically done. And a few things to sort of round you up here. It's created the style guide page. So, if we go to our design system here, it's created the page. We've got fonts and tokens and colours and things like that that we can now use that adhere to the brand style guide. I can see a few little issues here. I think this should probably be more of an import thing than anything that the fact it's not got the font. It's not got access to the font that we need to provide. Yeah, here we go. It knows it doesn't have the fonts. It's renamed it based on what it picked up on the brand style guide of the Figma file. So that's something either probably you could tell it to or not to do.

And also it's created a design system skill as well. So that means when you create new components either with your agent or with a Figma design system again it's going to constrain the agent and work within the confines of the design that you initially provided. That's why we do this design system first so that it can adhere to all of this stuff. It's asking us to reload the plug-in. So, why not? Let's just do that. And that kind is everything when it comes to the design system.

The next thing I recommend is identifying the components, the things that are going to be reusable. And of course, the biggest one here is obviously going to be the header and the footer. So I'd recommend selecting the header there, copying the link to that command L, coming back here and loading up a new thing and then loading the component skill and then providing it a link to that actual component. And now it's going to actually create that component. It's going to put it into the component page so that we have a registry of all the components and that will come in handy later on when we're transferring the components to Webflow.

It's asking me if I want to have a date, which of course I do. Mentioning here it only contains a closed bar. We obviously provide an open bar. So, let's stub the trigger and then we'll okay, let's invent an overlay. Why not? It's got the design skill. It might figure out something quite cool. And then we want to update the token for the nav height which protects the content, pushes the content down on our fixed header. This will obviously all be dependent on some of your design choices. This is what we have going on right now.

Cool. And that's done. Basically to take you through a few things I noticed it did, it updated the agent to start including the navigation. In the agents there you've got the component which is a navigation. Again all of this is just taken care of by the agent itself. It also gave us some stuff in the Webflow snippet in order to make this work with Webflow because of course some of these nested panels and nested things don't actually you can't actually do them in the Webflow design panel. So if we go here, it's created us a menu here and it's even written some JavaScript to show and hide this.

So that means if we take a look at the file system site scripts, we've got a nav panel that it's created and this will automatically be loaded on every page just as long as we've included the Webflow snippet upload as JS Deliver. But in the meantime, it's all kind of working in here. So this is coming along really, really great. I'm noticing that this probably isn't quite what it showed in the design. It's still that font issue that we need to upload. So all we need to do is upload that font which let's just quickly do it now and copy-paste. I've added the font to template assets fonts; it should be able to figure this out for us.

Cool. And then that is done. Everything's starting to look a lot more correct now with those correct fonts. So, you'd obviously repeat this with all of your components, reusable components, because the point is that if it detects that you're trying to use a component, it will opt to use the component as opposed to then recreating a potentially slightly different variant inside of the Figma because you might not have used the component feature inside of Figma, if that makes sense. So it just makes sure everything's more uniform and it has a good baseline to start with.

So with that, we can clear this out now and we can actually start getting on with our pages. And if we go into here, we can select the whole entire page, copy the link, paste it here, and then maybe just say this is the homepage. And then because we've already got the index, you might as well use that there and then give it that to work with. And we're giving it a desktop style. It knows all the breakpoints, so it's using Mast as a baseline. So hopefully it's going to break down and at least look somewhat presentable on the mobile designs. However, it's just a case of prompting it and mentioning mobile, tablet, portrait, tablet, or whatever the different varying breakpoints are on Webflow in order to fine-tune some of this stuff.

So just a thing to note here is that there's a few places that disagree with the design system. That's the whole point of doing the design system first. That has a baseline to kind of lock on to and keep consistent. So with that, we're going to bear that in mind. It's actually saying it's bringing to the surface that actually the homepage sections aren't in the existing component architecture. Now this is important because they're not meant to be actual components in the idea of the Webflow sense. They are just sections. So this is what we mean when it comes to inline scoped CSS. So, we're actually going to do that through the meet. There are components on the actual page itself, but in the grand scheme of things, we're just going to build the inline scoped CSS because realistically, we would have built all of the components first. So, any components it encounters on this page will just be built as components, if that makes sense.

So, we're just going to go inline here. It's saying about the footer. We're going to leave the current we're going to actually what we're going to do we might say create this as a component every button five-pixel outline. So there's some divergence here. Add the variant CC on dark. Again this is a BEM convention here. Follow the design system. Actually we're going to raise the token to 16. Again, this is just understanding and knowing the design of the rest of the site that allows me to make those decisions.

Nearly there. A couple of things to point out. It actually likes to run the or check the browser. So, it's really good to have the Chrome dev server or the Chrome MCP run. So, it's able to check its own work. Just thought I'd mention you probably have it already installed. And just a few things like it's got a page log. So it's keeping things up to date with regards to what the pages are, what pages have been built. And I did see something as well giving instructions to Webflow telling it how it should build certain things. So really quite a cool system here that kind of is full of redundancies and ways to migrate to Webflow really effectively.

It said it couldn't do the footer. So, I think yeah, let's just do component and then let's go for the black one as a starting point and then we'll add the white one as a variant. And low key, this is a bit of a throwback if you've been a fan of the channel for many years. I actually think that Pinegrow is a really good tool to use in this workflow because it allows you to edit the local files with a visual editor and keep the source of truth as being your local copy. That'll make sense more when we push it up to Webflow a little bit later on. But ultimately, you might want a visual editor local on your machine instead of just completely working through your agent or you'd have to build stuff keep everything in Figma, transfer it through to the code. Up to you really, but you might consider Pinegrow.

With that, it's kind of rinse and repeat. You're just pulling down all of those pages until you have something that resembles the entire site. In fact, actually, let's go to the homepage right now. Here is the design of the page. That's looking pretty spot-on to me. If we flick, it looks like there's a bit of an error there, which we can sort out. And in fact, even these are working. So, that JavaScript is working great. Flicking through to the actual homepage itself. Everything kind of looks kind of good, but obviously tweak it as you go.

Now, with the JavaScript, I'm not going to actually do this, but ultimately, you're going to if you've got an update to the JavaScript or whatever, and obviously following what the agent actually says, it might tell you that it has produced some JavaScript that you need to deploy. You might just run tag and release and then just mention the site scripts file here and it will hopefully update this version file to keep track of the version and update the Webflow snippet. Now, I'm actually going to stop doing that because I don't want that to actually do it. I'll mess up my codebase otherwise.

But realistically, it's just going to update this URL. It's all going to look exactly the same except this is going to be the URL of your user, whichever this public repo is stored on, and then obviously the name of the repo itself plus that version. Again, watch what the agent does, what it tells you. It might tell you that it's bumped the version and whatever. That will tag the release and then you need to push it up to GitHub and then that's which is what will make it live here.

So now we're going to actually transfer the Webflow website to Webflow itself. Now we have this Webflow transfer skill that runs through in a very specific order. It adds the stylesheet, adds the fonts, adds the variables, the classes. Does it in a very specific order, even creating the components that you've already created inside of your components file and all the rest of it. So, we don't really need to worry about anything.

So, all you need to do is go Webflow transfer or say something like transfer the Webflow website but not before running MCP clicking this and if it's new or hasn't been authenticated you actually want to authenticate it with the site that you want to update. So let's just do this one here. I don't mind editing this site and it's all connected and that's all good. So with that all authenticated, we're going to go Webflow transfer here and it should just run through that golden order and update it to upload this to the Webflow website.

Now with this whole process we've been running on Opus High. Now you want there's a lot of complicated things, a lot of considerations you want to make sure that are at least from a foundational standpoint looking really, really good when it comes to incremental updates. Whether that is a new component that's been added on the Figma file or you kind of want to generate a new page or generate a new section or something like that with no design input, remembering again that we've got the design system that it created right at the beginning. Really, you can drop down to Sonnet for that sort of stuff.

I don't like waiting around for Opus on High to kind of get very, very simple stuff done because this is a simple website. It's just a static website. At the very most maybe dropping Opus down to medium thinking strength. Again, you just don't want to be waiting around for all of these little incremental changes as the website progresses or you want to change it. But it's important really and I know it's going to be hard because I did it myself. This divergence that happens between the Webflow version and the static version of the website. Really helpful to keep the source of truth as your local version and then synchronising the thing that you've done.

Ignore what I'm saying at this point. I basically forgot that if you update a component or you update a page on your local static version of the website, then you just need to say to your agent update this section on app mentioning the local file that you changed and push this or synchronise this to Webflow and it will do it for you. It's uploaded the site here. You can see it's looking pretty pretty good in comparison to what we've done. Over in the static site, you can also see it's got the style guide page as well. So, it's got all of this stuff, font sizes, things like that.

So, actually, if we look in here, we've got these different variables that it's uploaded here that we can build on. So, pretty good result from my perspective. Again, there, you know, with these colours and things like that, there's bound to be a couple of things here or there that it doesn't get. I'll often, you know, say, "the colours in the style guide page on Webflow are not showing the colours from" and then me be a bit more specific. Mention the actual style guide page, set it off, do its thing, but this workflow was very, you know, gave me a much better result than directly using going from Figma to Webflow using the MCP.

It also just gave me a lot more flexibility on improving the site and adapting the site and developing this site as the client requests came in. We would update the static version and then push that up or transfer that to Webflow in order to achieve it. And it got to a point again Fable was very very good at this. Got to a point where changes were just flying through without any problems whatsoever even uploading the files, the images, things like that. And of course making sure to synchronise the Webflow snippet as well.

So that'll do it for this one. If you do use this and you have any suggestions or ways of doing things or I've missed something that I don't take into consideration, I'm not a massive user of Webflow anymore. So, I'm not kind of aware of some of the newer things. This worked for this project for the features that we needed for this Webflow project. This is what works. So, this is as far as this template kind of went. But I'm more than happy to hear updates, more than happy to hear suggestions, and maybe I'll open this so that you can contribute to it as an open-source project. So, as I say, links for everything will be down below. Like, subscribe if you haven't already. As I said, Patreons get a longer extended version of this, more in-detailed version of this video. So, if you're interested in that, check me out: patreon.com/ux5m5. Until next time, keep on vibing.