Last updated on: Reading time: 8 min read

How to Let Your Team Edit Your Website With Claude

Summarize with AI

Table of contents
  1. What “editing the site with Claude” means
  2. Step 1: put the site where an agent can work
  3. Step 2: write the docs the agent reads first
  4. Step 3: give it a design system, not a blank page
  5. Step 4: keep content where editors already work
  6. Step 5: preview every change
  7. Step 6: make approval the only way to production
  8. What a normal week looks like
  9. What it doesn’t replace
  10. How we run our own site
  11. Setting it up
  12. FAQs

Your marketing team can change the website by asking Claude, and it doesn’t have to be risky. Put the site in a git repository, write down the rules the agent must follow, let every change arrive as a pull request with a preview link, and make a person’s approval the only way to production.

We run our own site this way at DesignMe, and we set it up for clients on Astro and Next.js. Here is the setup, step by step, and where it still needs people.

What “editing the site with Claude” means

Claude Code is Anthropic’s coding agent. It runs in the terminal, in VS Code and JetBrains, in a desktop app and in the browser, and it reads a project’s files, makes changes and runs commands. Through its GitHub Actions integration, anyone with write access can mention @claude in a pull request or issue and have it implement the change and push commits. Anthropic also connects Claude to Slack, so a request can start in the channel your team already uses.

So the person asking doesn’t open a code editor. They write “add a case study page for the new customer, using the same layout as the Lightdash one”, and get back a link to a preview of the page and a summary of what changed.

Step 1: put the site where an agent can work

An agent works best on plain files in a git repository: components, styles and content it can read, change and build. That is why code-based sites give it the most room.

  • Astro fits content-heavy marketing sites, blogs and docs. Pages ship as HTML, and Astro runs an official docs MCP server so agents can read current documentation instead of old training data. The Astro team joined Cloudflare in January 2026, and both sides said Astro stays open source and works with any host.
  • Next.js fits when the site shares components with a React product or has logged-in areas. Since version 16.2 it ships version-matched docs inside the project, and from 16.3 it writes a managed block in AGENTS.md that points coding agents such as Claude Code to them. Vercel’s own evals found a 100% pass rate with bundled docs, against up to 79% for skill-based approaches.
  • Framer and Webflow connect to external agents too. Framer’s agent setup works with Claude Code, Cursor and others, and Webflow’s MCP server works within your existing roles. If your team lives on a canvas, that can be the right trade, with less control than code. Our Astro vs Framer comparison covers the choice.

If you are moving platforms to get here, plan it as a migration with every URL kept, not as a rebuild.

Step 2: write the docs the agent reads first

Claude Code reads a CLAUDE.md file in the project at the start of every session, and the team shares it through git. Many other agents read AGENTS.md, and Claude Code can read that instead. This file is where your site’s rules live. Ours covers:

  • The stack. Framework, CMS, hosting, where content and images live.
  • Design rules. Use the semantic tokens, never a raw hex value or pixel size. No new card or list styles: extend the existing component instead.
  • Rules that don’t bend. URLs never change without a 301 redirect. Every page keeps its title, description, canonical and Open Graph tags. No em dashes in site copy.
  • How to check work. Build the site, check both themes, check the page on a phone.

Keep it short and specific. Anthropic’s docs are clear that Claude treats these files as context, not enforced configuration, so anything that must never happen also needs a check in code or a permission it doesn’t have.

Step 3: give it a design system, not a blank page

Ask an agent for a pricing page on a site without a design system and you get a generic pricing page. Ask it on a site with design tokens, approved sections and written rules, and you get a page that looks like yours. The design system is what keeps agent output on brand, which is why we build or tidy it before connecting anything. We wrote up what that system needs in design systems AI agents can build with.

Three card variants from the DesignMe component library on the styleguide page: raised (the default), subtle and plain

From our styleguide: one Card primitive with three tones, so an agent picks a variant instead of inventing a new card.

Step 4: keep content where editors already work

Decide who edits what before the build. Marketers usually want a headless CMS such as Sanity, whose official MCP server lets agents query and patch documents with awareness of your schema. Developers and agents are happy with Markdown in the repo. Blog posts in Markdown, case studies in the CMS and page layouts in code is a common split, and the agent can work in all three.

Step 5: preview every change

Every change should come with a link to the site as it will look. The common hosts do this by default: Vercel builds a preview for every push to a non-production branch and every pull request, Netlify builds a Deploy Preview for every pull request, and Cloudflare Pages gives every pull request its own preview URL.

The preview is what makes the workflow usable for people who don’t read code. The marketing lead checks the page on their phone, asks for changes in the same thread, and approves when it is right.

Step 6: make approval the only way to production

The agent drafts, a person approves, and only the approval publishes. In practice:

  • Protect the main branch. GitHub can require a set number of approving reviews before anything merges, and the agent’s work never skips that.
  • Scope access. Give the agent the repository and CMS it needs, with separate rights to draft, publish and approve. Anthropic’s GitHub Actions docs recommend granting the workflow only the permissions it needs and reviewing Claude’s changes before merging.
  • Add automated checks. Build, broken links, accessibility and page weight run on every pull request, so the reviewer looks at the page, not the plumbing.
  • Be careful with untrusted input. Anthropic warns about prompt injection, where text inside content tries to redirect the agent, and advises against piping untrusted content straight to Claude. Keep agents in trusted channels and repositories.
  1. Request Someone on the team asks Claude in plain words, in Slack or on GitHub.
  2. Agent edits files Claude changes the pages and content on a branch, following CLAUDE.md.
  3. Pull request and preview The host builds a preview link; checks run on build, links and accessibility.
  4. Review A person checks the preview, asks for changes in the thread and approves.
  5. Merge and deploy The protected main branch merges only with an approving review.

Review matters because the output isn’t always right. In Stack Overflow’s 2025 Developer Survey, 84% of developers said they use or plan to use AI tools, and more of them distrust the accuracy of those tools (46%) than trust it (33%).

Use or plan to use AI tools84%
Distrust their accuracy46%
Trust their accuracy33%
Share of developers surveyed. Review stays in the loop because the output isn't always right.

What a normal week looks like

A request comes in on Monday: the sales team needs a landing page for a trade show. The marketing lead asks Claude for it, using the event page layout, with the booth number, a form and three product photos. Twenty minutes later there’s a preview link. They ask for the form above the photos, approve the second version, and it goes live after review.

It works the same way outside SaaS. A hardware company adds a spec sheet page for a new model from the existing product template. An industrial supplier adds a distributor to the locations page. None of these needed a developer before, but all of them used to wait in one’s queue.

What it doesn’t replace

The agent takes the everyday requests. It doesn’t decide what the site should say, pick a new visual direction, or catch every mistake on its own. New sections, a change of positioning and anything involving pricing or legal copy still need people, and someone senior has to review what the agent produces. We say the same about our own work in how we use AI: AI does the legwork, people make the calls.

How we run our own site

We ran designme.agency on Framer for three years and moved it to Astro in October 2026. We kept all 63 live URLs, and on the staging build the homepage’s first load dropped from 54 MB on Framer to 2.67 MB. The repository has a CLAUDE.md with the rules above, the tokens and components are documented on a styleguide page, and the content is typed collections in Markdown.

  • 63 live URLs kept in the move
  • 54 MB → 2.67 MB homepage first load, Framer vs. Astro staging build

We change the site by asking Claude for a page or a fix, reviewing the change and shipping it. The first drafts are fast. The review is where the time goes, and it is where the quality comes from.

Setting it up

If you want your team editing the site this way, there are two parts: a site built for it and the workflow around it. Our headless CMS and custom builds start from $15k and take 4+ weeks, with team and agent docs included. AI workflows, where your team asks an agent in Slack or Claude and approves a preview, take 3 to 4 weeks to set up on a site that’s ready. Full ranges are on our pricing page.

DesignMe designs and builds websites for funded SaaS and AI companies that their teams, and their agents, can change without breaking the design. If you want your team editing the site with Claude, send us your current site and we’ll reply within one business day:

designme.agency/intro

Need more info?

Questions about editing a website with Claude

Adrian

Can't find your answer?

Book a call and let's talk.

Or email us hello@designme.agency

Can a non-technical team edit a website with Claude?

Yes, if the site is set up for it. The site lives in a git repository, the rules for the agent are written down in files such as CLAUDE.md or AGENTS.md, every change arrives as a pull request with a preview link, and only a person's approval publishes it. The person asking never has to touch code.

Which website stack works best with Claude?

A code-based site in git, such as Astro for a marketing site or Next.js when the site shares code with a React product. Claude reads the components, tokens and content as plain files. Framer and Webflow now connect to external agents too, with less room to work.

What is a CLAUDE.md file?

A Markdown file in the project that Claude Code reads at the start of every session, shared with the team through git. It holds the project's rules: the stack, the design system, what never to change and how to check work. Claude treats it as context, not as enforced configuration, so hard rules also need checks and permissions.

How do you stop Claude from breaking the live site?

Never let the agent publish. Every change goes to a branch, the host builds a preview, and a protected main branch requires an approving review before anything merges. Add automated checks for the build, links and accessibility, and keep the agent's access to the repository and CMS it needs.

Do we still need developers if the team edits the site with Claude?

For new direction, complex features and reviewing what the agent gets wrong, yes. The agent takes the everyday changes off the developers' plate, such as new pages from existing sections, copy updates and small fixes.

You've reached the end, so now…

Tell us what you’re building.

We’ll help you map the right scope, team, timeline, and next steps.

Book a call