By Shaheer Malik · Prices and product details checked on 27 October 2026 · Not affiliated with Anthropic or Framer
Quick answer: Your team can edit a website with Claude when three things are in place: the site lives somewhere Claude can work on it, Claude has written instructions for how the site works, and nothing reaches the live site until a person has seen a preview and approved it. For a coded site that means Claude Code on the repository. For a Framer site it means Framer MCP. The first two make edits fast. The third makes them safe.
What "editing with Claude" actually means
It does not mean a chatbot that rewrites your live site on its own. It means a loop with three roles. Someone on your team asks for a change. Claude makes it on a copy of the site. A person looks at a preview and approves it, and only then does it go live. The speed comes from Claude. The safety comes from the preview and the approval.
Coded site or Framer site
| Compare | Coded site | Framer site |
|---|---|---|
| How Claude connects | Claude Code on the repository, or @claude on GitHub | Framer MCP, from Claude or Claude Code |
| Where instructions live | CLAUDE.md in the repository | Your prompts and the project's own components and styles |
| Preview | A preview URL for every pull request | Staging and branching with previews on Pro |
| Approval | Branch protection: a review and a passing build | A person checks staging before publishing |
| Best for | Sites with real logic, or teams with a developer | Marketing sites run by a marketing team |
Not sure which you have, or which you should have? Framer vs Next.js covers the choice, and who is allowed to publish covers where AI tools should stop.
The setup, in five steps
1. Put the site where Claude can work on it
For a coded site, that is a Git repository, usually on GitHub. Your team opens Claude Code in the terminal, a code editor, the desktop app or the browser, and asks for the change. With the Claude Code GitHub Action installed, someone can also write @claude in an issue or a pull request comment, and Claude makes the change and pushes the commits.
For a Framer site, it is Framer MCP, which connects Claude and Claude Code to your Framer project so they can design, build and update it. Framer's pricing page listed the MCP server as free during its preview when I checked on 27 October 2026.
2. Write the instructions Claude reads first
Claude Code reads a file called CLAUDE.md at the start of every session. It is where the site explains itself: which file holds the prices, how pages are built, which words the brand never uses, how to check a change before handing it over. Without it, every request starts from zero and your team re-explains the same things.
One thing to know: Anthropic's documentation describes these instructions as context, not enforced configuration. Claude follows them closely, but the rule that protects the live site has to live somewhere that cannot be skipped. That is step 5.
3. Give it parts, not a blank page
A site built from named sections and components, such as a hero, a pricing table, a case study card or an FAQ, is easy to edit by asking. "Add a case study for Acme using the same card as the others" works because the card already exists. A site where every page is one-off markup turns each request into a design decision, and the results drift. Most of the setup work is here: naming the parts and keeping content in one place.
4. Preview every change
Nobody should approve a change from a description of it. On Cloudflare Pages, every pull request opened from the repository gets its own preview URL, which updates as new commits are pushed. Your team clicks the link, looks at the real page on a phone and a laptop, and only then says yes. On Framer, the Pro plan includes a staging environment and branching with previews, which play the same role.
5. Make approval the only way to production
On GitHub, branch protection can require an approving review and passing checks before anything merges into the branch that deploys. With that on, Claude can propose any change it likes, and none of it goes live until a named person approves it and the build passes. This is the step that makes the rest safe to hand to a whole team.
What a normal week looks like
Once it is set up, requests look like this, each one ending in a preview link and an approval:
- Marketing: "Change the hero headline to the one from Tuesday's test, and update the page title to match."
- Sales: "Add the Acme case study from this doc, using the same layout as the others."
- Founder: "The new plan is $49, not $39. Change it everywhere it appears."
- Support: "Add these three questions to the pricing FAQ."
None of these needs a developer, a ticket or a wait. Each one takes minutes, and every one is checked by a person before it is live.
What it does not replace
- Design direction. Claude is very good at using the parts that exist. Deciding what a new page should look like, and why, is still design work.
- Checking claims. Claude writes what it is told. A wrong price or a claim nobody can back up still needs a person who knows the facts.
- Building a product. Logins, accounts and payments are an application, not an edit. That is a build of its own.
- Owning the result. Someone on your team approves every change. The setup makes that quick, not optional.
What it costs to run
Two bills, both small next to a developer's time. The first is Claude. On Claude's pricing page on 27 October 2026, Claude Code was included in all paid plans: Pro at $20 a month, or $17 a month billed yearly, and Team at $20 per seat a month billed yearly, or $25 monthly. The second is hosting, which you pay anyway: a static host for a coded site, or a Framer plan for a Framer site. Prices change, so check both before you budget.
How I run this site
This site works this way. It is a Next.js codebase with a CLAUDE.md file that explains where the prices live, which words the site never uses and how to check a change. A change starts as a request to Claude Code, which makes it on a separate branch and runs the lint and type checks. I check what changed before it is pushed. The push starts a build, and the deploy only runs if the build passes, so a broken change never goes live. After it deploys, the live page gets checked again.
This page went through the same loop. Every price on it was read on the vendor's own page, in a browser, on 27 October 2026. For a team, I would add the preview links and required approvals from steps 4 and 5, because more people means more changes to review.
How to set it up with me
- You already have a site. Send a brief or book a call. You get a scope and a fixed quote within 24 hours, covering the instructions file, the parts, previews and approvals.
- You need a new site. The custom-coded website sprint and the Framer website sprint are each $1,999 for 14 days, and you get the source code or the Framer project at the end.
- You would rather not edit it at all. The monthly partnership on pricing is $2,500 a month for a steady stream of changes, and you can pause it.
- You built a prototype with Claude Code and it needs to be production-ready. That is Claude Code help for a prototype.
If your product should talk to AI assistants too, not only your website, see what an MCP server is. The finished work is in the case studies.
Editing a website with Claude: questions
Does my team need to know how to code?
No. They describe the change in plain English and review it on a preview link. Someone should be comfortable reading a short summary of what changed, but nobody has to write code. On a coded site, a developer usually handles the first setup and anything unusual.
Which Claude plan do we need?
Claude Code is included in all paid Claude plans. When I checked on 27 October 2026, Pro was $20 a month, or $17 a month billed yearly as $200 up front. Team was $20 per seat a month billed yearly, or $25 billed monthly, for teams of 2 to 150. Check Claude's pricing page before you buy.
Can Claude break the live site?
Not if the setup is right. Claude works on a copy of the site, every change gets a preview, and branch protection means nothing merges into the live branch without an approving review and a passing build. Without that last step, a bad edit can go straight out, which is why it is part of the setup, not an extra.
Does this work with a Framer site?
Yes. Framer MCP connects Claude and Claude Code to a Framer project. Framer's Pro plan adds a staging environment and branching with previews, so changes can be reviewed before they are published.
Is our content used to train Claude?
Claude's Team plan lists no model training on your content by default, as of 27 October 2026. The terms differ by plan and can change, so read the current terms for the plan you choose.
What does the setup cost?
There is no published price, because it depends on how the site is built today. Send a brief or book a call and you get a scope and a fixed quote within 24 hours. A new site from my 14-day website or Framer sprint, at $1,999, starts from a clean codebase or Framer project that suits this way of working.
Change the site by asking, safely
Book a 30-minute call or send a brief. You get a scope and a fixed quote within 24 hours.