Migrate a site to Webflow·续5

saying. But while we do that, we can check on the CMS exports and it looks like this is done. So I'm just going to see if it had anything important to say. And remember, last we were using this it was like, all this stuff about the blockquote. So it looks like there was kind of this nested p tag inside of blockquotes. Webflow's canonical rich text blockquote holds inline content directly, so blockquote with a nested p gets unwrapped. Let me fix the markup and re-push all 20. Now the real test. Okay, so honestly we can just check this by looking at the CMS ourselves. So we remember that the first one didn't correctly do it, and now it is doing it. And I think, was it Crest Point was the other one? So, and it does have it. So we're starting to feel more confident that these blockquotes are being handled well now. And that's the whole point of using Claude Code here, is that Claude Code can write its own deterministic scripts, grab everything in our CMS, apply it to all of them, fix it all, and re-push it out. So feeling good about the CMS. I think our CMS is really done at this point and it's ready to be hooked into the front end. But we need a front end to do that, and right now we still don't have a front end. So let's see. Claude has a question for me. The 13 existing homepage sections diverge structurally from Figma, not just cosmetically. How should I handle them? Yes, recommended, that was what, replace the sections but keep the design system. That's what I want. Designer Bridge is not currently connected. Build with it or headless? Headless, then Bridge for QA. Let's do that, that's what I prefer. Fixing button radius from pill to 6 pixels changes buttons site wide, including style sheet and case study pages. Yes, fix it globally. Boy, Claude really wants some reassurance here. But I can understand, because I like the reassurance too when I'm doing these things. But while this is working, some other thing you might consider is, rather than going directly from Figma to Webflow, you might take a look at what skills are out there for porting your designs from Figma into Webflow. There's some resources you can find on Webflow University around that, or on Webflow.com. Additionally, something I sometimes have done with great success is building in HTML first, because agents work really well with just kind of plain HTML and CSS. I'll take a Figma design, build it out in HTML, that's really quick, and then take that HTML file and send that into Webflow, and that's really quick. So you have this intermediate layer of HTML, but because agents work so well with it, it can actually kind of improve the speed and the iteration of your getting your first design done, so that once your system is locked in place in Webflow, you can just start building a lot faster from there. And we're talking so much about speed and, like, everything's so fast now and I can do it all for you. And we did talk about how upfront having a plan will really help, and we kind of did that pretty quickly. In reality, this is going to take a little while. So I think the thing to note, though, is that previously this might have taken a team months to accomplish, but in the last year or two, you're really finding that smaller amounts of people can go ahead and migrate an entire site in weeks instead of months, or even less than that. That's what we're seeing, at least at Webflow. And so that's really exciting because one person can do a lot more now, but at the same time, it also leaves a lot of responsibility on one person. So we're waiting on Claude again. Actually, the biggest pitfall for me is people focusing on the actual build and the physical artifact, as opposed to the planning and kind of all this stuff behind the scenes, like the scripts and the events and all this stuff that has to be part of the migration. When you think of a website, you think of the front end. It's that people see a beautiful design and they're like, wow, this is awesome, we love it and we want to implement it right away. But there's not a lot of thought of, where does this thing actually exist? Has anybody gotten the content for these new fields that we need? So it's not just the website that's messy, it's the stuff that goes alongside with the website. So that's what I think it's like. There's a lot of baggage on a website that comes along when you're doing a migration, and you have that opportunity to really clean up that baggage, but it requires a lot of planning up front. All right, so Claude has finished up with the homepage, and I'm pretty pleased with where it got after I asked it to do a little bit better. We can see it even went ahead and did the assets here, because I didn't quite tell it not to do that since we started a new conversation. But I'm just liking, like, the typography, the spacing rhythm, the, you know, this little dot guy over here, this color is correct. So I'm just seeing a lot of things have been corrected, and so I'm starting to feel a lot better about this build. And it just took two prompts, one to get it started and two to say, hey, you're going in the wrong direction and you really need to make it better. So yeah, I'm just looking at the homepage and things are feeling really good. And what I would do now is, you know, I have this fun idea for a shader that I can import for these kind of the glowy heat field maps that we have. I can definitely bring in the asset that belongs down here on my own. I'm ready to start tying in our CMS to this. So, you know, next I would tell it like, hey, instead of case grid, now use a CMS collection and populate that with our dynamic data that lives in our CMS. At that point, I'm also going to tell it, you know, start making components out of things that I see us reusing on other pages, or even ask it to go and look at the other pages and say, what would make sense to use this components here, so that we can have reusable chunks of our website to use across new pages, other pages, what have you. So that is the homepage. Great job, Claude. I think now it makes sense to transition to our finished webpage, because, you know, honestly, all you're going to see me is just doing more prompting, telling Claude, hey, build this, build that. And it probably just a couple hours, less than a day, I would think, to really build out all of the pages that we need. One thing I do want to show is like, how much Claude usage have we actually used? So if I do open Claude and I go to my Settings and I come up to Usage, I'm at $190.86. So I think we started at what, 51 or something? So for about 140 bucks, we've migrated most of our website. It's not done yet, but we have done, like, I think that's a pretty fair price for the amount of work that we've done. So I spent some more time prompting, and here's our finished site. So you can see here we've got components built, we've got our code component that's doing this cool shader, we've got our icons imported as SVGs. I'm just like, I'm really liking our design system in use. I'm liking that we have some layouts built out as components, we've got card components. And I'm just scrolling here to give you a short tour of what we've been able to build with MCP in less than a day. And if I come to Pages here, we see we have all of our pages built. We have this component library that surfaces all the different components used across our site so that, you know, we can see like, oh, if we need to build a new page, if we have some reusable stuff that we can use. We have our style sheet that's all done. So we go in here and we can see the design style guide is all completed. And we also have our Platform page that is existing right here. We have our About page, this is here. And on the About page we do have our team, and we have a full form here that is going through Webflow forms. And lastly we will just take a look at the case studies page. We have our case studies grid. Couple CMS items still haven't been populated, but that's pretty easy to clean up at the end of things. And then of course we have that case studies template page. So up here we see the headline and we see, like, we have measurable result, 40%, doesn't make sense, but we're just make believe right now. We have deployment scope filled out for each different collection item. So open up another one here and just check at that. And so yeah, we're doing pretty good. The rich text could use some more styling here. And then also just notice we have a case studies categories template. So when I built this out, we actually had a case studies categories CMS. Talked about how you could use an option field or a single reference. So in this case, when we go and look at the industry, it's actually built out as a reference field. So I talked about this at the beginning. We do have some subtle differences between the final build and our working build, but overall the intention is the same, and we just want to show the process. So that completes phase two, building our actual website.