Building and Editing a Website with Claude

This guide is for everyone who has no idea about programming but still wants to build or change a website with Claude using normal German sentences.

Briefly: v0 or Claude — what's the difference?

	v0	Claude
Purpose	Design a new website from scratch	Edit an existing website or also from scratch, if you don’t have v0
How	Type in the browser, download the draft	Claude interacts directly with your files on the Mac
Requires	v0 account, Instructions A/B/C	Claude Desktop + IT sets up file access once
Result	Code as a download	Files changed directly — immediately visible in GitHub Desktop

Rule of thumb: Do you already have a website as code on your computer? → Claude. Do you want to start completely new? → v0. Both can also be done sequentially.

Overview of the Procedure

You tell Claude what you want
          ↓
Claude reads your website files and changes them
          ↓
GitHub Desktop: "Fetch" (what others have changed) → Create backup → Upload
          ↓
Vercel automatically rebuilds the website

That's it. You just type sentences into Claude. Claude handles the technical details.

Part 1 — One-time Setup (done by IT, once per Mac)

Only for the person setting up Macs

This part is for the IT or the colleague preparing the Macs for editorial staff. Editors can skip this part.

For Claude to access website files directly, it needs something called "file access." This is a small setting that is made once — after that, you won't notice it anymore.

Step 1 — Install Node.js

Node.js is a small program that Claude needs to read and write files. Just install it, no knowledge needed.

Open nodejs.org/de → download the large button “LTS"
Start the installer → click Next / Install continuously, do not change any settings
Done. Check: Open Terminal, type node --version → a number like v22.x.x should appear

Step 2 — Install Claude Desktop (if not done already)

Download and install the Mac version from claude.ai/download. Sign in with the company Claude account upon first launch.

Step 3 — Clone the Repository on the Mac (if not done already)

The repository must exist as a folder on the Mac. How to do this is described in Part 1 of the Mac setup guide — briefly: GitHub Desktop → File → Clone repository → URL from IT.

Note the path of where the folder is located, e.g.: /Users/max/Documents/Work/Center-Webs/website-our-center

Step 4 — Grant Claude File Access

Claude Desktop has a configuration file in which we need to add a new line. This sounds more complicated than it is.

In Finder, at the top menu: Go → Go to Folder… → enter:
```
~/Library/Application Support/Claude
```
→ click Go
In this folder, there is a file named claude_desktop_config.json. If it does not exist: create a new text file with exactly that name.
Open the file with TextEdit. If TextEdit opens it as Rich Text: select Format → Make Plain Text.

Replace the entire content with the following (important: replace HIER_PFAD with the actual folder path):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "HIER_PFAD"
      ]
    }
  }
}

Example (the path must match the actual folder):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/max/Documents/Work/Center-Webs"
      ]
    }
  }
}

Multiple Centers?

Specify the parent folder that contains all center folders (e.g., Center-Webs). Then Claude can access all of them.

If a Cockpit MCP is already set up

If there is already an "mcpServers" entry for cockpit-os in the file (from the Cockpit MCP guide), add the file access block, do not replace:

{
  "mcpServers": {
    "cockpit-os": { ... existing entry ... },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "HIER_PFAD"]
    }
  }
}

Save the file (⌘S)
Completely quit Claude Desktop (not just close the window, but right-click in the dock → Quit) and restart.
Check: Open a new chat in Claude and type:
```
List all files you see in my website folder.
```
If Claude lists file names — done, it works.

IT Setup Checklist

Node.js installed (node --version shows a number)
Claude Desktop installed and logged in
Repo folder cloned on Mac
claude_desktop_config.json saved with file access entry
Claude restarted and file access checked
Editor knows where the website folder is (note the path or bookmark it)

Part 2 — Everyday: Editing the Website in Sentences

For the Editorial Staff

From here: what you do daily. You do not need the IT setup above.

Before working: always fetch first

Before you let Claude make any changes, briefly fetch what others may have uploaded since yesterday:

Open GitHub Desktop → "Fetch origin" → "Pull origin" (if suggested)

With that, you have the latest status. More about this in the Mac setup guide.

Telling Claude what you want

Simply open Claude Desktop and describe in a new chat in German what should be changed.

How to talk to Claude

Imagine you are explaining to a colleague who is good at programming what you want to see on the page. No technical language needed — the more specific, the better.

So that Claude knows where your files are, briefly mention the folder at the beginning:

I am working on the website in the folder "website-our-center".
Please [what you want].

Examples: What you can tell Claude

What you want	What you write to Claude
Change text on the homepage	`Change the greeting text on the homepage to: "Welcome to Palais Vest — Europe's most modern shopping center."`
Add a new section	`Add a section with our address under the shops: Hauptstraße 1, 12345 Musterstadt. Also include opening hours Mon–Sat 10–20 hours.`
Remove something	`Remove the "Shop Now" button on the homepage.`
Change color	`Change the header color to a dark green, matching our logo.`
Replace image	`Replace the header image. The new file is called "header-summer-2026.jpg" and is in the public folder.`
New section from scratch	`Build a section with 3 cards under the header: "Parking", "Directions", "Contact". Each card has a corresponding icon and a short text that I will provide next.`
Correct something	`Correct the name on the "shops" page from "H&M Kinf" to "H&M Kids".`

With Cockpit Data and Without Cockpit Data

Depending on where the content on your website comes from, you will proceed differently:

Case A — Your website shows data from the cockpit (shops, news, opening hours, …)

Here, content (actual texts, shops, news) should always be changed in the cockpit — do not ask Claude to “type” the data. The website fetches the data automatically when loading.

Claude helps here with layout and appearance:

“Show the shops as large tiles instead of a list"
“Add a short introduction above the shop list"
“Change the font size of the news headlines"

Case B — Your website has fixed texts (no cockpit, everything directly in the files)

Here Claude can change everything — texts, images, sections. Simply say directly what should change.

Case C — Entirely new page from scratch (Claude builds everything)

Give Claude a detailed description — what should be there, what sections, what colors, whether data comes from the cockpit or not:

Build me a new simple website for our center. 
Content: a large image at the top with the center name "Palais Vest", 
below three tiles for Parking / Directions / Contact with short texts, 
at the very bottom imprint and data privacy links (initially empty). 
No cockpit, all fixed text. Color: dark green and white.

Afterwards: Publishing Changes

Once Claude is done and you are satisfied:

Open GitHub Desktop — there you will see all the files that Claude changed (on the left the list, on the right what has changed)
Enter a short sentence at the bottom under Summary about what you did, e.g. “Added address and opening hours"
Click Commit to main
Click Push origin — done

Vercel notices this and automatically rebuilds the website. After about 1–2 minutes, the change goes live.

More detailed with image description: Mac Setup Guide, Part 2

What Claude Can Do — and What It Cannot

Claude can	Claude cannot
Change texts on the page	Write content into the cockpit (for that: Cockpit Dashboard or Cockpit MCP)
Add new sections, cards, areas	Acquire images — someone has to place them in the `public` folder
Adjust colors, margins, fonts	Set up domains or change Vercel settings
Recognize and fix errors in code	Change your cockpit data when the cockpit is not connected
Completely redesign existing pages	Know whether something looks "nice" — always check the preview in Vercel
Build an entirely new website	Ensure nothing gets broken — always do a `Pull` first, and GitHub keeps the version history

If Claude makes an error

No problem — GitHub Desktop shows exactly what has changed. And since everything is versioned, you can always revert to an earlier state. Just ask IT if needed.

Frequently Asked Questions

“Claude says he cannot see any files"

Probably, file access was not set up or Claude has not been restarted. → Ask IT, repeat Step 4 of the IT setup.

“I don’t know what the folder is called"

In GitHub Desktop: the repo name is at the top, in the menu Repository → Show in Finder shows the exact folder.

“Vercel hasn’t changed anything after the push"

Wait briefly (1–2 min.) and refresh the Vercel page. If still nothing: check the Vercel dashboard — there is a list of the latest builds with status under Deployments. Notify IT if errors are shown.

“Claude changed too much or something wrong"

Simply in GitHub Desktop: right-click on the file → Discard Changes — then it’s back to how it was before. Or ask IT to revert the last commit.

“Should I use v0 or Claude?"

A quick decision helper:

New website entirely from scratch, you don’t have any files yet → v0
You already have code on the computer and want to change something → Claude
You want to try out great design concepts with cockpit data → v0
You want to quickly change a text or a section → Claude

Questions about GitHub Desktop (fetching, backing up, uploading): Mac Setup & Everyday Life
Maintaining content in the cockpit (shops, news, …): Cockpit Dashboard
Connecting Claude with Cockpit (reading & writing): Claude & Cockpit MCP

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/content-creator-handbuch/redaktion-claude-website-workflow

Overview of the Procedure​

Part 1 — One-time Setup (done by IT, once per Mac)​

Step 1 — Install Node.js​

Step 2 — Install Claude Desktop (if not done already)​

Step 3 — Clone the Repository on the Mac (if not done already)​

Step 4 — Grant Claude File Access​

IT Setup Checklist​

Part 2 — Everyday: Editing the Website in Sentences​

Before working: always fetch first​

Telling Claude what you want​

Examples: What you can tell Claude​

With Cockpit Data and Without Cockpit Data​

Afterwards: Publishing Changes​

What Claude Can Do — and What It Cannot​

Frequently Asked Questions​