How We Built Our Website With Claude Code: 5 Steps to Building a Successful Website With AI

We build pelcro.com with Claude Code in five steps: rules in the repository, a migration skill, Claude Design, a test site, and automated checks. Claude Code writes the code, a person reviews it, and nothing goes live until every check passes.

This post is for businesses weighing an AI-built site against staying on Wix or another page builder. It covers where our code lives, how we left Wix, how we design new sections, and the path one change takes to the live site.

What Does It Mean to Build a Website With Claude Code

Building a website with Claude Code means an AI coding assistant writes and edits the site's real source code from plain-language instructions. We moved our own website off Wix in June 2026, and we have built it with Claude Code ever since.

Instead of dragging blocks around a page editor, you describe the change and Claude Code makes it in the codebase. You end up with a site you fully own, without the layout limits of a page builder.

The hard part is not getting Claude to write a page. It is keeping a growing site consistent, fast, and safe when an AI makes most of the changes. That is what the five steps below are for.

The 5 Steps We Use to Build Our Website With Claude Code

Here is the actual setup behind pelcro.com, in the order a change meets it.

1. Keep the code and the rules in one place

The website's code lives in a private GitHub repository. Our rules for Claude live in that same repository, in a file called CLAUDE.md, right next to the code.

CLAUDE.md covers things like page speed targets, how sections should look, and how to name changes. Claude Code reads it at the start of every session, so every session starts from the same rules.

When we change a rule, it goes through a pull request like any other change. The rules get a history and a reviewer, and there is no separate wiki that can fall out of date.

2. Leave Wix with a migration skill, not by hand

We did not rebuild the old Wix pages by hand. We built our own Claude Code skill just for the migration, and for each old Wix page it:

• Opens the old page
• Checks the layout
• Copies the text and images in the right order
• Rebuilds the page on the new site
• Converts the images to a lighter format so the page loads faster

Here is the Subscriber Services page before and after. The copy, photos, and section order came across from Wix, rebuilt on the new site's own components.

3. Design new sections in Claude Design first

New sections start in Claude Design, not in code. That includes homepage sections, the digital rights management page, AI agent pages like the AI Customer Service Agent, and the media kit template tool.

Starting in Claude Design means we agree on the look before any code exists. Claude Code then turns the design into the real page, using the site's shared components and brand colors.

Claude Design does the look, and Claude Code does the build.

4. Ship every change through a preview and a test site

Every change takes the same path, including this blog post:

1. Claude Code makes the change on its own branch and opens a pull request on GitHub.
2. The pull request gets its own preview link, so reviewers see the real page before it ships.
3. Automated checks run on the pull request.
4. After review, the change goes to our test site, called sandbox.
5. From sandbox, it goes to the live site.

The live site runs on Cloudflare Pages. There is no traditional server: every page is built ahead of time, and Cloudflare serves those ready-made pages.

Anything that needs a secret key, like our lead form or address verification, runs as a small Cloudflare function. The keys stay on Cloudflare and never reach a visitor's browser.

The live site only updates if every check passes. If one fails, the site stays exactly as it was.

5. Let the checks decide what goes live

This is the step that makes the other four safe. None of these checks are new: they are standard web development best practices. The difference is that they run automatically on every change Claude Code makes.

Every pull request runs these automated checks on GitHub:

• Lint catches code mistakes and style problems.
• Type check catches broken TypeScript before it reaches a browser.
• Build produces the full site, so a page that does not compile never merges.
• Content validation checks each post's details, images, and author before a reviewer opens it.
• PR title keeps the change history readable.
• Bundle size reports how much JavaScript a change adds to the site.
• Image weight flags any image over 500 KB.

Before the live site updates, the deploy runs lint, type check, build, and content validation again. If any of them fail, Cloudflare is never told to deploy.

Page speed is checked by hand before every pull request. The floor is 90 in Google PageSpeed Insights, on both mobile and desktop.

A person also reviews every change. AI writes the code, but nothing goes live without passing the checks and a review. Walk through it yourself below: pick a change and follow it all the way to the live site.

How Pelcro Plugs Into a Site Built With Claude Code

A site built with Claude Code still needs a way to sell subscriptions, control access, and handle renewals. That is the part Pelcro adds.

Pelcro's JS SDK and React Elements drop into a Next.js codebase, the same one Claude Code is already editing. Plans, entitlements, and checkout are available through Pelcro's API, so your site calls them directly instead of bolting on a separate tool.

For paywall and checkout changes after launch, Pelcro Agent works the way this site does. You describe the change, it lands as a commit on a branch, and you review it before it ships. You can try the interactive Pelcro Agent demo to see that flow on sample paywall and checkout changes.

Frequently Asked Questions

Do I need to know how to code to build a website with Claude Code?

Not for a simple site. Claude Code writes the code from plain-language instructions. If your site takes payments or holds subscriber data, have a developer review changes before they go live.

What is the difference between Claude Code and Claude Cowork?

Claude Code is built for software work: it reads and edits a codebase, runs commands, and opens pull requests. Claude Cowork brings the same agentic approach to knowledge work beyond coding, working across your files and tools toward a goal you set. For building and changing a website's code, we use Claude Code.

What web development best practices matter most for a site built with AI?

The ones that run on every change without anyone remembering to run them. For us that means lint, type checks, a full build, content validation, a preview link for review, and a page speed floor of 90 on mobile and desktop.

What happens to my subscribers when I move off Wix?

Your pages move into the new codebase, and your subscriber and billing data moves separately through Pelcro's migration process. Talk to our team before the rebuild so both moves land at the same time.