Migrate a site to Webflow·续4

Claude is hopefully adding the fonts, and you might be asking yourself, like, Keegan, there's stuff going into Webflow. And if we go here, we see Pistachio, we see Goldenrod, we see Mint, Tangerine, we've got our size variables. This feels like building. So I thought we were still planning, but it turns out not all plans are perfect, and we may have kind of inched our way into phase two here already. So congratulations and welcome to phase two. We are building in Webflow now, and our design system plan is pretty much done. Especially because I'm seeing that it's in rem here and not pixels anymore. I say anymore like it did it before, but it's done it to me before, just not right now. Now it's okay for border radius to be in pixels. Some stuff you do still want to be in pixels, especially border width. But yeah, I'm feeling great about this base collection. Those, again, are our primitive variables. And if I go into theme here, it went ahead and made a base and inverse. I don't know why it made an inverse. We definitely don't need that. I don't think there's anything in the design system. So Claude's trying to overachieve on us here and, you know, we'll allow it for now, because we're focusing on the process and what's important. So you see how these, like, these semantic max width narrow are pointing to these other variables. So this is kind of how our design system is being built. And it's up to you at this point to decide, this is how I want to build, or this is not how I want to build. Personally, I'm going to go ahead and move forward with it because I'm just happy with moving forward in this lesson. But let's see if we got the style sheets. Yes, we did. So we have a style sheet here and I'm noticing already the fonts are off, and that's fine. Claude kind of outed itself, like, oh, I don't know what font to use, or you have to do it, but it should be able to do it. And I'm seeing colors. I would expect this text to have gotten updated. So it's a little bit strange that that isn't updated. And I've also noticed that sometimes you have to refresh to get the fonts to load. I assume they're not going to. Oh, they did. Look, they're there. And we can check that in Site settings, that the fonts were correctly uploaded. So if I go to Custom fonts here, I'm seeing the fonts from our project. So cool. We are making good progress here. So feeling good about the planning phase. So Claude is going away here with the fonts. Honestly, the fonts are already fine. I could maybe stop it here, but I'll let it finish its thing up. But really, we are in the build phase now, and since we have MCP, we have a CMS schema that we need, we have a design system created, we have Figma, we have kind of all of the pieces that we need to really just like have at this thing. And nothing's published. So we can really, like, we can make mistakes, we can go, we can prompt as much as we need to. Now, obviously you want to be kind of efficient, but that's hopefully where our plans are going to help us. So let's find our, this is our CMS conversation with Claude, and I wanted to go ahead and build the schema. So I'm just going to say, build the schema in Webflow now. So let's hit Enter. But we've already approved the schema. We're happy with that. Once the schema's in, we can look at getting the items in. And while that's going on, we can also just build out parts of the site. And I did talk about looking at the case study detail page first, but as I'm building, I might start with the homepage because that's where my components are going to go. And I might pull components from there that I'll then use in other pages. And for that I'll probably use this design system chat that I have going here. So once it's done, I would want to tell it something like, let's build the homepage design from Figma in Webflow. Skip assets for now, just use placeholders, and be sure to use our design system variables, exclamation points. Let's go into Figma. And I know this is the page, so I'm just going to copy a link to the selection just to give Claude a head start. I'm just trying to look if there's anything else I need to give it. So I'm expecting, like, I'm not expecting it to bring in this image or this. And the reason I'm not bringing them in is, one, I've created my own custom shader for this because I thought it'd be fun. Number two, I find it often exports at the wrong size. And despite, you know, whatever skill you give it and what you tell it, it's really easy for Claude to go off the rails when it comes to assets. And this one as well, I want to import these as SVG and have more control over these. So I'm going to do those separately as well. So the build is going to be static first, placeholders only. And then depending on the scale, I might then give it instructions on just doing assets, or I might just do that myself manually. So let's go back here. Be sure to use design system variables, placeholders. I think I've told it everything I want, so I'm going to press Enter now. All right. And of course that's queued up. It's not going to happen until this whole fonts thing is done. Not sure why it's taking so long here, but I'm just realizing that I should stop. Let's just paste that link in there and click Enter. And now it knows where to start from with the Figma design. It should be able to pick all this stuff up and get going. Oh, looks like it's got something going on here in the CMS. What is it doing? Uh oh, oh, oh, we're seeing problems. MCP Bridge is failing on array arguments. Same calls that worked earlier now reject. I'm trying not to use the MCP Bridge here. I'd like to build as much of this headlessly as I can before I have to have the tab open and foregrounded with the Bridge app open. And the MCP tool has been re-engineered around not using that for pretty much everything except the snapshot tool. So we might have to yell at Claude a little bit here. So let's go here, go to Connectors, Webflow, and Refresh tool list. Tool list refreshed. Maybe it's okay. Let's say, I reconnected the Webflow MCP. Just create the collection schema in Webflow for case studies. Okay, so that's working now, hopefully. That works. We can check in on our designs. This is probably going to take a little bit, so I might take a moment to refill my drink here and we'll come back and see where Claude is at. So for whatever reason, the Webflow MCP has been having difficulty with Claude, and I can tell by these red kind of lines here. It's getting good errors, that it's expecting an array but it's receiving a string, and it ended up ditching the MCP for the CLI. And my computer already has the CLI installed. And what is the CLI, you might ask? Well, it's command line interface, and that's anything, if I'm in like a terminal writing webflow, I'll just do --help here. And so CLI is another tool that AI can use to do stuff, essentially. And Webflow has all sorts of stuff. You can have it, it has auth, it has a CMS command, it has DevLink, it has Cloud, it has assets, it has sites. So the Webflow MCP works with the Webflow API to do things in Webflow headlessly, but it can also happen via the CLI. Now the main thing to know about the CLI is, one, you need to have it installed. So if I just search Webflow CLI, you can see here, this is how you would install it. You open up a terminal and drop this command in there, and then this documentation will have some just guidance for you on how you might want to use it. But at the end of the day, you can just have your AI use it for you. And so Claude was kind of smart. It was like, I can't figure MCP out, so I'm just going to go to CLI. And if I really didn't have CLI installed, or I was maybe like not so sure that I want to use CLI, I could also troubleshoot MCP. I could, you know, disconnect and reconnect, try the whole on/off trick. What else could I try? I could feed it specifically the documentation of the API that I want it to use. So the tools via MCP are going to kind of reference these things. So I'm going to the docs here, the Data API. I want the reference, and then I want to go to the CMS collections. And so what we're trying to get the AI to do is basically create a collection. So we're trying to get it to call this endpoint, and then this is the API endpoint to do that. And then it's also trying to create fields for that collection ID. So behind the scenes, this is what we want the AI to do. I don't really care how it does it, I just want it to get it done. And it looks like it had to get creative and use the CLI. So lots of different ways to do that. The other thing you might do is honestly just open up a new Claude conversation and give it the context of the CMS plan that we already generated and say, all right, make this, but definitely use MCP this time. So rather than troubleshoot MCP here, I'm happy that we have this stuff in Webflow, and we can verify that it's there by just going to our CMS here in Webflow. Click Case studies and we press this gear icon, and we see we've got our schema created in Webflow here for us. So the next step would really be to start populating the collection with the values from our plan. So that's a little summary. We got off track a little bit because we had to use CLI instead of MCP. But if you weren't reading anything from Claude anyway, you wouldn't care. You would just care about the end result, which is that we have the case studies collection made here in the proper way, according to our sheet. Okay, so now that we have the collection schema made, the next step is honestly to start adding items to the CMS. And I could show you any way of doing that. We have the spreadsheet set up so that we could use the import feature in Webflow. I think I'm going to prefer to use Claude here. I'm just going to tell it, start populating items. We could start with one item. You know, if you have a thousand items to do, just start with a handful, just so you can kind of do like, you know, a dry run and see where you hit snags, rather than just Claude looping over and over and getting stuck in places. So let's start by adding one CMS item. Use the first from our spreadsheet, and then once we've confirmed that that's good to go, then I'll go ahead and do the rest of them. So I'm watching Claude work here, and it's already saying three required fields are empty. I think I had mentioned when we were reviewing the plan that, like, when I start, I usually like to just make nothing required, because that gives us the most flexibility to edit those fields as we need to. And then once I'm kind of like really integrated with connecting the CMS up to the front end or the design in Webflow, that's when I might start marking stuff as required so that when the marketers get it, that they don't, you know, empty, like, submit empty stuff. But again, it's just, we're still just building at this phase, so it doesn't matter if stuff is incomplete. All right, so it is also saying that the item is created, giving me the item ID. Everything landed correctly, it says. Let's see, one change I should know about. The create failed first with, card summary field is required. To add the row without inventing copy, I flipped them to optional. Nice. That's a schema change you didn't explicitly ask for. I judged it better than fabricating marketing copy into your CMS, but say the word and I'll revert it. For now, yes, it's better. But eventually I'm going to want you to fabricate marketing copy as well. Staged, not live. Webflow holds CMS writes until a site is published, and I haven't published anything. Seven fields are empty. So let's check what's going on. So I'm going to go ahead and refresh here. So we've got our item here. We see it's queued to publish. Let's see here. So there's no summary, there's no descriptor. A lot of this stuff is empty, and that's okay for now. We do have these, the body. I'm just noticing that a lot of stuff isn't populated, and that's, it wasn't populated in the spreadsheet because it's those missing fields from the design that we had originally noticed. But the sector is populated with the option field, so I'm happy about that. All the SEO and taxonomy stuff is good, but none of the actual real content that we need is here. So, but we have the name, we have the summary. The summary can get generated from the case study body if we need, as well as the descriptor. I think this is like, yeah, this is something special. So yeah, we'll get to these as we start hooking stuff up. But for now, it looks like, you know, the schema and the items are going into this. The schema is there and the items are going into the schema without any major red flags, other than those required fields that we already handled. So let's go ahead and import the rest of the stuff. Import the rest of the items. So I'm watching this run. It's creating all of the CMS items for us. It looks like in its audit it noticed that one of the bodies of one of the items shrank by 25 characters. So it's diffing it, or it's comparing the old one to the new one, and it looks like it's stripped a blockquote wrapper on one of them. It's just here as plain text. It was Crest Point or something. So I'm just going to search Crest Point, go in here, and you see that the blockquote has this kind of fancy markdown. And what I'm expecting in Webflow is for this to have some sort of blockquote. Probably this one right here. This would be the blockquote notation. See that little kind of sidebar shows up there. But I'm going to undo that because I want the AI to really handle it and figure it out. So now at this point I can like just really make a run on fixing and massaging and auditing the CMS to make sure that the content that's here matches what I expect from here on the legacy site. So while that's going, I feel pretty confident about where our CMS is at. I want to check in on our homepage build. And what I like to do is just set up Webflow on one side of my screen or another screen entirely, and then have Figma, and just do a rough kind of visual eyeball of, you know, how are things looking so far? And I can tell you right now it's not great, unfortunately. What's good is we do have kind of the beginnings of a good system here. I can see that, like, rem is being used. I can see that, you know, stuff is zeroing out that I would zero out. I can see that variables are being connected in places where I would expect variables to be connected. I can see that, like, MCP hasn't gone off the rails with connecting up custom properties and things like that. That can sometimes happen. But what I am noticing is a lot of design inconsistencies, and that's around like, the button has full kind of border radius here, whereas if I look in the Figma design, you know, ours have a different border radius assigned to them. The button border radius is one. The spacing rhythm between the heading and the first visual, there's less spacing there and there should be, like, it should be full bleed with divider lines. The nav, these list items and links should be over on the right side here, so right justified. The little dot kind of design accent that we have is a dot and not a square as it is in the designs. If I come down, it's using the accent color, which, let's double check what color I think it's using. Oh, this one's hard-coded, but I don't think that matches the actual accent color. So a number of things that are not one-to-one, and we need to tell Claude to do better. So I'm going to try that. Complete a full redesign of the homepage, but make it one-to-one with the Figma design. And something else I'm noticing is that we're quite high in our context window. Honestly, I have kind of a personal rule of thumb with the 1 million size context window, that like, once I get over 300k I start to notice a lot of degradation in the model. So the other thing I'm going to do is just cut this, start a new chat, do that, and then we're going to do the same thing where we grab our Copy link to selection and paste it there. And then we'll go over here and we need our Webflow site ID, but I don't want to go into the site settings again. So I'll just get that from one of these other chats. Let's see, let's see. Yeah, we got it. We got it. And we'll put it there. Go. All right. So we've given up on Opus trying to do our first build. We said, your context window is too big and your design was too inconsistent, so you get one more chance. And I do have my fingers crossed that this one's going to be better. I've had a lot of luck with this in the past, so let's keep those fingers crossed is all I'm