For years I always went through Webflow to get a clean site. A bought template with a few tweaks did the job, but it came with real dependency → every change went through the interface, every new section meant fiddling...
The tool is powerful but stays technical, with frontend basics you cannot skip.
Last month we rebuilt our website 100% with Claude Design and Claude Code. Custom site, open-source CMS, editing in plain language, deployed on Vercel in one click.
Here is the whole process, step by step, so you can reproduce all of it.
Why build your website with AI rather than with Webflow
Webflow, WordPress and the rest are very good tools, but you pay a subscription for a site built on a template, with customisation limits and friction on every edit.
With the arrival of Claude Design and a mature Claude Code, the equation changed. You can now:
- build a 100% custom site, aligned with your brand, without starting from a template
- edit content in plain language (”add a client case to the references section based on the attached document”)
- set up Claude routines that publish content on the site on a regular basis
Step 1: the site mockups with Claude Design
We started with a first pass in Claude Design to generate the mockups and iterate visually on each section. You can pick the “prototype” option and share your request directly, including screenshots of competitor or inspiration sites. I recommend a look at Dribbble for ideas.
As you can see on the screenshot, in my case I had already created a design.md. A file that generates visuals following my brand guidelines (font, colour, and so on).
I covered how to create your design.md in a few minutes in this newsletter. Take a look.
Once I have that first version, which I can already edit in Claude Design in both substance and form, I can switch to Claude Code to have it locally on my machine and test every section.
Nothing simpler, you just share the result with Claude Code:
That turns the mockups into real code, handles the changes and takes you further. Ideally you move to an IDE like VS Code, but you can stay on Claude Code Web.
At that point you will have all the code generated by Claude Design locally, in a “Website” folder. You then have 2 options:
- Keep the same logic for the other pages of your site
- Stay in Claude Code to build the other pages on the base you already have
Personally I prefer going back to Claude Design, at least for dedicated sections I do not have yet.
Quality is clearly better in Claude Design than in Claude Code, even when using skills (more on that below). Here for example is the “sector approach” section I built on its own:
A tip to save your credits → use the Claude Design tweaks panel. It generates sliders and palettes you manipulate in real time (colours, type, spacing) without sending new prompts. Every round trip avoided is tokens not spent ;)
Step 2: build and iterate with Claude Code
Once you have switched to Claude Code, iteration is in your hands. From there, here are several steps to follow to reach a satisfying final result.
1️⃣ Use a claude.md (and keep it alive)
Before generating anything, we created a claude.md file. It is the document Claude reads before every single action. Think of it as the project's permanent brief.
Inside, we put:
- the company context: who Tandem is, our positioning, our audience
- the site structure: pages, sections, navigation
- the project rules: always test locally before pushing to GitHub, invoke the design skill before writing any frontend code
That file keeps evolving. As the project goes on, you add your preferences and your recurring corrections so you do not have to repeat them in every prompt.
A look at our claude.md here:
Add a voice.md file with your tone, your style and a few sample texts. I already covered it in my edition on Claude Cowork, the principle is identical. Without it, Claude writes generic copy. With it, the site's texts sound like you from the very first version.
2️⃣ Skills: the design guardrail
The frontend-design skill, available directly from Anthropic, helps add some depth to your site. With it, the output is more modern and professional, even with a minimal prompt.
Every model has been trained on the same SaaS templates. Without a guardrail, you get the same tics on every project: Inter everywhere, purple-to-blue gradients, cards nested inside cards. You have definitely seen them on dozens of landing pages
To go further, I suggest digging into Impeccable, which I have used a lot.
The skills I just shared are design knowledge injected into the code. That is what makes the difference between a vibe-coded proto and a site you can show to a client.
3️⃣ The screenshot loop
Further down I talk about the concept of a “loop”. To let Claude iterate, you can ask it to take its own screenshots of what it builds (via Puppeteer, which it installs on its own), analyse them, and fix: padding, margin, alignment, contrast.
Instead of playing proofreader on every iteration, you get a version that is already clean.
⚠️ Careful with animated elements. They are not captured in the screenshot
4️⃣ Draw on existing sections
No need to invent everything. Sites like 21st.dev are full of components: animated backgrounds, buttons, heroes, scroll effects.
The logic is simple → you spot a component you like, you copy its code or its prompt, and you ask Claude to integrate it into your site, adapted to your brand. In a few minutes you have a dynamic element that would have taken a developer hours.
An example here for a comparison section:
The web vocabulary to know: hero, CTA, padding
This is THE underrated point. Claude is powerful, but if you cannot name what you want, you will multiply the round trips.
A website has a precise vocabulary: the hero (the first visible section with the main title), the CTA (the action button), padding and margin (the spacing),..
The difference is concrete. Saying “the hero CTA lacks contrast, increase the section's vertical padding” gets a result in 1 iteration VS “the top doesn't look great”..
You do not need to be a developer, but a few hours spent understanding this vocabulary will save you dozens of round trips.
Important → think your site structure through BEFORE generating. Which pages, which sections per page, which user journey. Claude executes very well, it does not think your site out in your place
Step 3: plug in a headless CMS for the content
On a site, some pages are unique (home, contact) and others repeat with the same format: blog articles, client cases. If everything is hard-coded, every new article means going back through Claude Code. Not workable day to day.
That is the role of a CMS: the content lives separately from the code. You build the template once (the layout of an article), and every new piece of content displays in it automatically.
On our side we went with Sanity, a headless CMS with a visual back office. The marketing team creates and edits articles without touching the code, like on Webflow, without paying the subscription.
And because the content is structured, you can plug Claude into it. Two concrete uses:
- editing in plain language: “add this client reference to the CMS with this title and this summary”, and it is published
- content routines: scheduled Claude tasks that generate and add content to the site on a regular basis (industry watch articles, page updates)
If your site is a simple 4-5 page brochure site with no regular publishing, you can do perfectly well without a CMS. No need to over-engineer
Step 4: put the site online with GitHub and Vercel
At this stage your site runs on localhost, it only exists on your machine. If you send someone the URL, they will see nothing. To make it accessible you need 2 building blocks, both of them free.
- GitHub, to store all your files online with the full version history, where every change is tracked and reversible.
- Vercel, which is the shop window. It takes the code stored on GitHub and turns it into a site accessible on the web.
Here are the steps to follow:
- Create a GitHub account, then simply ask Claude Code: “create a repository and push the site code to it”. It will ask you to authenticate once, then it handles everything. That keeps GitHub and your local files in sync.
- Create a Vercel account by signing in with your GitHub account (it makes everything simpler).
- On Vercel, create a project to import your GitHub repo, then deploy. 60 seconds later, your site is live on a URL like mysite.vercel.app.
- For your own domain name (wearetandem.ai in our case), head to the project settings, Domains tab. Vercel guides you step by step through the configuration.
A look at a few pages, and I invite you to browse the whole site here.
Once that is done, when you tell Claude Code “push the changes to GitHub”, Vercel picks up the update and deploys the new version in 30 seconds. Once it is set up, you never touch it again.
Here is the history of GitHub pushes to Vercel:
The 3 limits of building a website with AI
Three points of friction we ran into:
1️⃣ Micro-changes → conversational editing is great for creating, but frustrating for fixing a typo. Changing two words of copy can mean prompting, waiting for the loop, checking, pushing. Where a classic CMS takes 10 seconds. That is exactly why we put Sanity on the content side: the structural work goes through Claude, the editorial work goes through the back office.
2️⃣ Repetitive patterns in Claude Design. As you stack up generations, you find similar structures (same layouts, same effects). Hence the importance of outside inspiration like 21st.dev to break those habits.
3️⃣ The web knowledge required. We will never say it enough: the tool does not replace understanding. Site structure, section logic, SEO keywords, information hierarchy, all of that is still work.
Should you rebuild your website with AI? Our verdict
In 2014 I was learning frontend: HTML, CSS, JavaScript, and I rebuilt entire sites with Bootstrap. Weeks of work for a decent result.
Twelve years later, building an advanced website has never been this simple. In a few days, with Claude + GitHub + Vercel, you can get a result better than most of the web.
The verdict mostly depends on your profile:
- You have a solid tech background: go for it, it is a huge accelerator and you keep full control.
- You start from zero with standard expectations: AI does 80% of the work, and the result will be very decent for a brochure site. That is where the potential is wildest.
- You are in between, with precise requirements but without the words to express them: you will need patience, it will be ping-pong with the tool.
At the start, do not be too ambitious and begin with 1 landing page, not the whole site. Set up your claude.md, turn on the frontend design skill (or Impeccable), and build the habit of the screenshot loop. You will quickly see the potential.
