How to Let Your Team Edit Your Website With Claude (2026)

Last updated: 29 October 2026

To let your team edit your website with Claude, give Claude access to the site's source, write the content and design rules down where it reads them every session, and make every change go through a preview and a human approval before it is published. On a coded site that means Claude Code, a GitHub repository and preview deploys; on a Framer site it means Framer's MCP server and staging.

Done well, this turns "can a developer change the pricing FAQ?" into a two-minute job a marketer can do by asking. Done badly, it turns your website into something an AI rewrites without anyone checking. This guide covers both routes, the guardrails that make it safe, a normal week, and what it costs to run. Product facts were checked on each vendor's site in late October 2026, with the dates given below.

What "editing with Claude" actually means

Your team describes the change in plain words, such as "add three questions about annual billing to the pricing FAQ". Claude reads the site, makes the change in the right file or component, and produces a preview. A person checks the preview and approves it, and only then does it go live. Claude does the typing; a person keeps the decision.

Two routes: a coded site or a Framer site

	Coded site (for example Next.js)	Framer site
How Claude connects	Claude Code works on the site's repository	Framer's MCP server connects Claude to the project
Where rules live	A CLAUDE.md file in the repository	Your instructions, plus the Framer components themselves
Preview before live	A preview deploy for every pull request	Staging and branching with previews on Framer Pro
Approval	A protected branch that needs a reviewer	A person publishes from Framer
Best for	Sites with custom logic, many pages generated from data	Marketing sites edited visually as well

The coded route, step by step

1. Put the site in a GitHub repository with content kept in clear data files, so a change to the FAQ is a change to one file.
2. Write a CLAUDE.md file. Claude Code reads it at the start of every session, according to its documentation. Put the voice, the banned words, the components to use and the facts that must never change (prices, legal names) in it. It is context, not enforcement, so the next steps still matter.
3. Turn on preview deploys. Cloudflare Pages, for example, builds a unique preview URL for each pull request.
4. Protect the main branch. GitHub's protected branches can require an approving review and passing checks before anything merges.
5. Give the team a way to ask. Claude Code runs in the terminal, in IDEs, in a desktop app and on the web, per its overview, and Anthropic's GitHub Action can respond to @claude in issue and pull request comments.

The Framer route, step by step

1. Build the site from components and CMS collections, so changes reuse what exists instead of adding one-off layouts.
2. Connect Claude through Framer's MCP server, which Framer lists on its pricing page.
3. Work on a branch or in staging. Framer lists staging and branching with previews on its Pro plan, $30 a month billed yearly when I checked on 29 October 2026.
4. Keep publishing with a person, who reviews the preview before pressing publish.

The guardrails that make it safe

• Nothing goes live without a person: previews for every change, and approval before publishing
• Facts in one place: prices, plans and legal details in a single file Claude is told never to change without a request
• A design system to follow: tokens and components, so new sections look like the rest of the site (more in design systems AI agents can build with)
• Small changes: one request, one preview, one approval, so a mistake is easy to spot and undo
• Checks that run automatically: a build that fails on broken links or missing pages stops a bad change before review

What a normal week looks like

• Monday: marketing asks for a new customer logo on the homepage; the preview is reviewed and merged before lunch
• Tuesday: sales asks for two new FAQ answers; Claude adds them in the existing component, and they ship the same day
• Thursday: a landing page for an event, built from existing sections, previewed and approved
• Any day: a typo, a date, a link; the kind of change that used to wait a week for a developer

What it does not replace

Claude is good at changes inside a system that already exists. It does not decide your positioning, design a new page type from nothing, or know which claim is true. New templates, a redesign and anything with legal or pricing weight still need a designer, a developer or the person accountable for it.

What it costs to run

Item	Cost	Notes
Claude Pro	$17 a month billed yearly, or $20 monthly	Includes Claude Code; checked on claude.com/pricing on 29 October 2026
Framer Pro, if on Framer	$30 a month billed yearly	Staging and branching with previews
Hosting for a coded site	From free	Cloudflare Pages has a free plan with 500 builds a month
Setup	Quoted after a call	Repository, rules file, previews and approvals

How I set it up

This site runs a version of this: a Next.js codebase with a CLAUDE.md file that says where the prices live and how to check a change, lint and type checks on every change, and a deploy that only runs if the build passes. For a team, I add the preview links and required approvals described above, because more people means more changes to review. I set this up for clients on coded sites and on Framer. Details and the steps are on let your team edit your website with Claude, and if you would rather someone build the agent-ready site first, the Next.js and Framer pages cover both.