← Back to articles

I Built a Client Website with Claude Code Instead of Webflow

I built a client website with Claude Code instead of Webflow and lost another client because they wanted the website in Webflow and I couldn’t go back to manual building anymore. Here’s what happened.

Backstory

I learned about Webflow in 2020 when I was looking for tools to build my website on. The most compelling feature, I remember, was to visually build a custom website. Being a designer and knowing a little bit of HTML and CSS, it felt powerful. I thought I could finally build something I have in mind. Prior to this I tried different tools, including coding, but I’d always hit a wall. Webflow promised me that I can remove that wall.

And it did.

Since then I’ve built dozens of websites and even transitioned from pursuing a career of architect to web design and development.

I’ve fought Webflow over its limitations numerous times but I could get the job done and I enjoyed building with it. The abstraction of HTML and CSS made it possible to both build visually and extend it with code where necessary.

The ‘aha’ moment

A few weeks ago I stumbled upon Google’s new product Antigravity and gave it a go. I was impressed by what it can do, but not necessarily by the product itself, but by Claude Opus 4.5. It was the first model that I felt is genuinely intelligent. It could precisely understand my intent. It followed the prompt very well.

I’ve been using LLMs since ChatGPT 3. Then I switched to Claude, and then to Gemini. To me Opus 4.5 is as impressive as was GPT 4. I felt this was a leap from toy to tool.

I realized that the latest Opus model is so intelligent that I can use it for professional work and beyond. I now use it not only for web development, but also as my business operating system orchestrator.

If you think about it, Opus and Webflow are both no-code tools. They both let a non-developer create applications. And they both punish you if you don’t know what you’re doing.

A person who doesn’t understand the box model and has no idea about HTML and CSS is going to build a Frankenstein in Webflow. Same with LLMs. You can build something with it, but it’s going to be a nightmare if you lack fundamentals. The tool changed. The requirement didn’t.

That’s what most people miss about this shift. It’s not “AI replaces developers.” It’s “the abstraction layer moved up.” Webflow abstracted the act of writing code. LLMs abstract the act of building. But in both cases, the person directing the tool needs to understand design, structure, and systems thinking. Becoming a generalist, someone who understands design and engineering, is going to be one of the main differentiators going forward.

Back to web development. Before Opus 4.5, I tried to build websites that I designed in Figma with LLMs but the discrepancy between the design and the outcome was too big. I felt that I’d spend more time battling with it and correcting the mistakes than gain in productivity.

With Opus 4.5 I knew this can become a thing. I wanted to test if that’s true.

Fijordo website design in Figma vs the built result

The experiment to build a custom website with Claude Code

I set myself an experiment to try and build a website for a client using Claude Code and Opus 4.5. This test would show me if it makes sense at all. I designed the website and started my experiment. It took me about 4 iterations to figure the workflow out.

In the first 2 iterations I was trying to understand what works and what doesn’t. At that stage I was collecting feedback after each phase of execution -what worked and what didn’t. Claude was providing me feedback on how to improve the process to mitigate inconsistencies and reduce mistakes.

In the third iteration everything came together and we polished the last few bits of the workflow and created a set of skills that Claude would use when we start a new project.

The fourth iteration was the final test and it’s the production version of the website that I will finish soon and hand it over to the client.

Below are my learnings.

Design prep

When designing in Figma, you have to minimize errors that Claude will later make during the build. Therefore, you have to use a clear design system, use autolayout, structure the pages, and name the layers.

It’s best if your design system in Figma and the same counterpart in code are mirrored. I am using semantic and utility classes both in Figma and in code. For instance, bg-primary, text-secondary and container-large. When you sync both, you minimize errors and the room to make mistakes.

You can ask Claude to analyze the Figma file and validate it. I created a skill that I run before building to understand if my design file is structured, layers are named, autolayout used, no hardcoded values used, and so on.

The build process

Before you start the build you create the design system. Once all the variables, utility classes, and components are set you can proceed with the build.

To let Claude read the file you need to use an MCP. What I learned is that Figma remote MCP is unreliable. Figma Desktop MCP is better but still lacks a lot of features. Figma Console MCP is the best I’ve found so far. Claude can not only read data from it, but also manipulate the file. It’s very powerful. Note: the MCP has lots of tools so it takes a lot of tokens in the context -use it only when you need it.

When Claude builds you have to explicitly tell it to use both design data and screenshots to maximize the precision.

You have to use a planning and execution system. I use spec driven development framework. Every project starts with initializing the project by creating a spec, state and roadmap files where everything project related is captured. Every task starts with planning the phase and then executing it. By doing so you always provide the right context to the model. Proper planning minimizes mistakes and maximizes efficiency.

You have to plan to build the pages section by section. This is the most efficient way because otherwise the context grows and rots. The bigger the context the more error prone the model becomes. It’s better to plan and then execute slowly.

Fijordo website built with Claude Code

Quality control

You have to verify every build yourself. Claude may claim that something works and is built but there are times when it’s not true.

Common issues I catch: layout drift where spacing doesn’t match the design, missing responsive states on tablet or mobile, subtle non-common styling and interactive states. These aren’t hard to fix, but you won’t find them unless you look.

I run automated tests where possible and QA manually for visual accuracy. When something’s off, I write a bug report and feed it back to Claude. Most fixes take one pass.

In my experience, by doing the steps above, Claude can one-shot a page at 90% accuracy.

The rest 10% is either bug reporting to Claude or fixing things manually. Since I know HTML and CSS, I can go in and tweak things myself.

Hosting

The next step was to figure out the hosting.

Luckily, hosting is a solved problem and there are numerous affordable solutions. If the website is small you can host it for free. That’s what I did with Vercel with its free tier.

I pushed the code to GitHub, connected the repository to Vercel and that’s it. Every time the new code is pushed to GitHub the changes are picked up by Vercel and the project is live. You can even set up a staging domain, like I did with my website, to preview changes on staging before publishing on main domain.

It’s super simple to set up and it’s very affordable. Even on a paid plan or on another hosting it’s going to be cheaper than Webflow.

CMS

But what if a client needs a CMS, you may ask.

There are a couple of options for CMS on custom coded websites:

  • Markdown files. I am using SvelteKit for the website backend and I can simply create markdown files with properties and use them as CMS. I can also use custom components in these markdown files -something you still can’t do in Webflow CMS.
  • Headless CMS. There are free and paid services. I found Payload (free, open source), Prismic (good free plan, adequate scaling plans), and Keystatic (free, open source) in my research. When you use a headless CMS you essentially create a UI for managing content on the website. Not quite Webflow but who needs full visual control anyway? Create the components and tools to create new pages and modify content and that would be enough in most marketing use cases.

Costs

What about the costs of using Webflow vs Claude Code?

Webflow Agency plan costs me around $400/year. My websites (maray.ai), which I am migrating right now, CMS plan costs $400/year. Claude Code Max x5 costs $100/mo. Claude will cost more, but there’s so much more I can do with Claude beyond website creation -it’s not even comparable.

Client handover

One of the biggest value propositions of Webflow is that you can hand it over to a client and they can update and modify the website further.

In my work, I barely had clients who’d do that. They’d either ask me to adjust things or not touch it at all.

Still, it’s something I wanted to cover with Claude too. Right now, I am creating a set of skills that I would share with the client. Claude will use these skills to modify a page, build a new one, publish the changes.

Another thing that helped is that the whole website is built with components and sections. Therefore, it’s easy for Claude to build pages using these components. Very small room to break things. In fact, I think there are higher chances to break things in Webflow by a client than by Claude in code.

Advantages and downsides

I think there are several massive advantages for Claude Code over Webflow:

  • Flexibility: with code you have no limitations. Need a dashboard? No problem. Need a payment solution? Also no problem. With Webflow you always need third party providers, plugins, custom code and what not.
  • No platform lock. Take your website and host it anywhere. No sudden bills for thousands of dollars. No enterprise license for high traffic websites.
  • Massive workflow opportunities: I integrated my website into my business operating system that I also run with Claude and I can get reports, analysis, publishing, content creation within one interaction with Claude. Can’t imagine how much time I’ll save with this setup.
  • Massive productivity boost: a custom homepage could take me 4-6 hours to build. With Claude, it takes an hour while working on other stuff.
  • Cost: low cost for hosting. More cost for the LLM but if you gain 200x productivity that’s a no-brainer investment.

The biggest downside is you don’t get the visual editor anymore.

However, all the advantages outweigh this. At least for me. Besides, since I know HTML and CSS I can be comfortable with editing the last bits. And last but not least, Svelte -the framework I am using is more user friendly than React and it helps. The website is structured in routes/pages, components, HTML and CSS.

Who’s it for

I want to say it’s not for everyone, but the more I think about it the less I believe that, especially when it comes to designers who use Webflow. If you can build in Webflow, you already understand the box model. You can tweak HTML and CSS. You’re closer to this than you think.

The real question is whether you’re willing to leave the visual editor behind. For me, everything else like flexibility, cost, speed, no platform lock made that trade obvious. For you it might not be yet.

Here’s what I’d suggest: try building one section of an existing project with Claude Code. Not a full site. One section. See if the output matches what you’d build manually. That’s the test that convinced me.

Tools like Cursor already have visual editing capabilities. Either Webflow integrates real AI models into their product, or the visual editor becomes less relevant over time. Either way, understanding how to direct an LLM to build for you is a skill worth developing now.

Summary

It has been a few weeks since I had the thought: “Why would I still open Webflow and build manually when there are models that can do this?” I haven’t been able to go back since.

I enjoyed working with Webflow for years. But the freedom Claude gives -no platform lock, no limitations, no sluggish editor -is hard to forget. The other day I lost a client because they wanted Webflow and I couldn’t bring myself to do it.

I thought they’d be as excited as I am. They said they “try to avoid LLM tools where possible.” It was disappointing but I can understand where they come from. Most people think AI produces slop, and they’re right -when it’s used poorly.

Giving Claude a “create me a cool website” prompt produces slop. That’s not what this is. This is structured agentic coding led by a designer through proper execution: research, design systems, planning, section-by-section builds, and manual QA. The same rigor you’d bring to any professional project, with a tool that makes you dramatically faster.

Vibe coding is for hobbyists who want to make something over a weekend. Agentic structured coding is for professionals who want consistent, production-grade outcomes.

Webflow moved me from architect to web designer. Claude is moving me from web designer to builder. The abstraction layer moved up again and I’m not going back.