Migrate a site to Webflow·续3

confident in that for your migration. But for this example, we're just going to show Webflow forms because I want to keep the scope manageable for you to understand more about the processes behind planning and executing a migration. And we've already really seen that with the scripts plan, the CMS plan and the URL plan, and the forms plan is really just an extension of those. And how I kind of showed you what I'm looking for is going to be incredibly similar to the forms plan. Okay, it looks like Claude has finished here. It took some time to crawl the whole site, but that's, I guess, to be expected. And we've got a form inventory. It came up with six rows. I only knew about one form, but I did tell it to find hidden forms, and it found a bunch on the admin page, which makes sense. There's forms there to like, log in and to create and edit items and things like that. So we can actually just like, F2 through F6, we can ignore. And the important one, let's just look at the plan. Browse the project beside your file. Don't need to do that. The main one we care about is this one on the About page. Gives us a ton of information about the form. The main thing we might care about is the purpose, the field counts, what fields exist. And so now we can kind of start to take that opportunity to either consolidate forms, figure out what pages we want to put them on, things like that. But again, for this example, we just have one form. So the next thing I want to do is get into our design system plan. And really that's about like, setting up our Webflow site with the right variables, fonts. We'll get into components and we'll actually start building, which I'm super eager. I'm always like, that's always the first thing I want to do. But I'm usually better served by sitting down for quite a while and working with these plans. Because what you'll start to find out is you'll start to figure out where the, like, the hard parts are going to be. And that's really what you want to find out by doing these plans. So let's go ahead and fire off this prompt while we have a moment. And so we're just telling Claude to create a design system. So we have the luxury here of starting from scratch with our design system. You can tee up Claude for how you want it to build your site, and it's going to be using AI anyway, so it's not going to follow any of your rules. But you know what, we can at least start with optimism and then see where we land, and hopefully we get something that's workable. Right. This is going to use the Webflow MCP. So before I press Enter, I will show you that I have the Webflow Beta MCP connector installed here and I have it set to Always allow. Let's make sure that that's set. And then I also have the Figma connector here. And so what I'm expecting the MCP to do is, basically thought I saw one that was, here we go. I want to set this to Always allow. What I'm expecting it to do is to look at everything in our Figma file and then create kind of that system in Webflow. And that's why I need to give it both the Figma file and the Webflow site. So let's go ahead and grab this link to the page and then we'll go back to Claude here, and I'm just going to put the Figma file down. And over here on Webflow, get that site ID again. Webflow site ID is this. So I'm feeling good about this. Let's press Enter and let it get going. Now I talked about how spending time with these plans can really help you anticipate where you might run into, I guess, speed bumps or difficult times. Perhaps you could also spend quite a bit of time with the Figma file to do the same. So this might be the first time you're working with a particular designer, or you might have worked with this designer a lot. And the things you want to know are like, okay, so did they even give me some sort of style system? What rules and conventions is the designer working from? Because I'm going to want to try to mimic those so that the Webflow and the Figma feel really connected, and that if the designer designs new pages, like they're going to, the systems are going to mesh really well. So that's something I'm thinking about. And so for that I can see their sizing system and their variables here. And when I talk about primitives, primitives just means that, like, 20 pixels, 24 pixels, it's like the raw value, whereas semantics is like, how is the value used? So small would be 12 in this case, or medium is 16. Semantics means like, what is the meaning behind the token? And then coming up here we have our primitive color variables. Notice we don't even have semantic color variables. That's how this designer wants to work. And are those variables now being used in the Figma? So if I come to, you know, maybe this, it's actually just hard-coded a hex value. It's not using any of these variables. So that's something to have in the back of my mind, is if I were building this in Webflow, I might want this to be connected to a variable. Or if I look at this text, let's see, I'm just looking for anything in Figma. When you see these, you know, the names or sometimes for values for stuff, SVGs are likely going to be hard-coded like that. Let's find a good example. Here we go. So on this description text we have typography is linked to semantic body medium, 16 font size, 24 line height. So that's kind of just what I'm looking at as I go through these things. Claude is done and we're just kind of reading through what Claude did. It's creating typography variables, responsive variables. Lots of variables going on here. The token layer is complete and consistent. Never heard the term token layer before, but we got it here. Okay. The good stuff seems to be here at the end. So 178 tokens were created across five token collections. I'm cool with that. It's saying that everything went great. You know, two calls I made: our naming system, Flowkit, cool. And letter spacing is em, not percent. I prefer em letter spacing myself. Anyways, what I am curious is, did it use rems instead of pixel values? Because our Figma design system was in pixels, but I prefer to build in rems for more responsive design. So, needs you before this renders correctly. Rename base collection to primitives. Not going to do that, don't care. Add the three fonts. You should add the fonts. You should add the fonts. I'm going to have it do that while we keep auditing it. Set HTML tag styles against the typography tokens. The MCP only writes classes, not tag selectors. You know, that's something we'll do when we get to the build. And check color contrast. I'm hoping the designer did that. That's not my job.