Use Claude Code as Your CMS: Turn a Cloned Site Into a Dynamic One

The idea: Claude as your CMS

You cloned a website. You have working HTML, CSS, and the right visual structure — but it's all hardcoded. Every headline, image, paragraph, and link is baked into the template. Changing anything means hunting through files.

The traditional fix is a CMS: Contentful, Sanity, Webflow, WordPress. You set up schemas, configure a dashboard, pay a subscription, and learn another tool.

There's a better way if you're the only one managing the site: use Claude Code as your CMS.

The approach is simple. All editable content lives in /content/*.json files. Components read from those files. When you want to change something, you describe it to Claude, and Claude edits the right file. No dashboard. No subscriptions. Full version history in Git. And Claude can also add new pages, restructure sections, or wire up entirely new features — all from plain English prompts.

Step 1: Audit your clone

Before touching anything, have Claude map out exactly what you have. This gives you a shared understanding of the structure and surfaces any issues early.

cd your-cloned-site
claude

Audit this project and give me:
1. The current tech stack (is it static HTML, a framework, something else?)
2. A list of every section on the homepage with a one-line description
3. All the content that's hardcoded and should be editable (headlines, body copy, images, links, prices, etc.)
4. Any issues you see that would complicate a migration to Next.js

Don't change anything yet — just map it out.

Claude will read the file structure and return a clear breakdown. Save or screenshot this — it's your migration plan.

Step 2: Migrate to Next.js + JSON content

This is the one-time setup that makes everything else easy. Claude converts the static clone into a Next.js app where every piece of editable content is extracted into JSON files.

Convert this project to Next.js 15 with the App Router. Here's what I want:

1. All editable content extracted into /content/*.json files — one file per section (hero.json, features.json, nav.json, footer.json, etc.)
2. Each section becomes a React component in /components/ that reads from its JSON file
3. The homepage at /app/page.tsx just assembles the components
4. Keep the exact same visual design — same fonts, colors, spacing, everything
5. Tailwind CSS v4 for styling
6. Use TypeScript

Important for the global CSS: wrap any existing reset or global styles in @layer base {} so Tailwind utility classes always win in the cascade. If the original site only has a basic * { margin: 0; padding: 0 } reset, you can delete it entirely — Tailwind v4 Preflight already handles this. Only keep custom global styles (font smoothing, selection colors, scroll behavior, etc.) and place them inside @layer base.

Start with the foundation (package.json, config files, global styles), then build section by section. Show me each JSON file as you create it so I can verify the content is right.

Show me the final /content/ directory structure and the contents of each JSON file. I want to verify all the editable content was captured correctly before I run the dev server.

npm install && npm run dev

Open localhost:3000. It should look identical to the original clone. If anything looks off, just describe it to Claude ("the nav links are the wrong color" / "the hero image isn't full width") and it fixes the specific component.

Gotcha: CSS resets breaking Tailwind

After the migration, things might look slightly off — containers not centering, padding disappearing, buttons a bit too small. Before you spend 30 minutes debugging, check your global CSS for a reset like this:

* { margin: 0; padding: 0; box-sizing: border-box; }

In Tailwind v4, raw CSS written outside of a @layer has higher cascade priority than Tailwind utility classes. That innocent reset silently overrides mx-auto, px-6, mt-4, and basically any spacing utility. The fix is one line:

@layer base {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

Wrapping it in @layer base puts it below Tailwind utilities in the cascade, so utilities always win.

Step 3: Edit content with prompts

This is where the workflow pays off. Content changes are now just plain-English instructions.

Changing copy

Change the hero headline to "Ship faster with AI" and the subheadline to "Everything you need, nothing you don't."

Update all the pricing in the pricing section — Free plan stays, Pro plan is now $29/mo, Enterprise is "Contact us".

Rewrite the features section descriptions to sound less corporate. Keep the same structure but make the tone more casual and direct.

Swapping images

Replace the hero background image with /public/images/new-hero.jpg. Keep the same overlay and text positioning.

Structural changes

Add a fourth feature card to the features section: title "Integrations", description "Connects to the tools you already use", icon is a plug icon.

Remove the testimonials section entirely and move the CTA section up to fill the gap.

Step 4: Add new pages

Adding a page is the same as editing content — just describe what you want. Claude creates the route, the content JSON, the component, and wires up the nav link.

Simple page

Add a /pricing page. It should match the visual style of the homepage. Include:
- A hero section with headline "Simple, transparent pricing" and a short subline
- Three pricing tiers: Free ($0), Pro ($29/mo), Enterprise (contact us)
- Each tier has: name, price, 5 feature bullet points, and a CTA button
- Add "Pricing" to the main nav

Store all the pricing data in /content/pricing.json.

Blog or content section

Add a blog to this site. I want:
- A /blog listing page that shows article cards (title, date, short description, read time)
- Individual article pages at /blog/[slug]
- Articles stored as Markdown files in /content/blog/
- The design should match the rest of the site

Start with 2 placeholder articles so I can see how it looks.

Landing page variant

Create a variant of the homepage at /lp/summer-sale — same structure as the homepage but with a different hero headline, a countdown timer showing 3 days, and a red banner at the top that says "Limited time: 40% off Pro". Don't add this to the nav — it's a landing page only.

Step 5: Deploy to Vercel

Once the site is ready, push it to GitHub and connect it to Vercel. After the first setup, every push auto-deploys — and Claude can trigger deploys directly.

Create a GitHub repo for this project called "my-site", push the current code to it, and tell me the repo URL.

My site is live at my-site.vercel.app. From now on, after any changes I approve, commit them with a short message and push to main — Vercel will auto-deploy.

Your ongoing workflow

Once the site is set up, the day-to-day is simple:

1. Open Claude Code in your project. It already knows the full structure — no need to re-explain anything.
2. Describe what you want. "Change the headline", "add a page", "update the pricing", "add a new testimonial from [person]". Claude finds the right file, makes the edit, and shows you the diff.
3. Approve and deploy. Say "looks good, push it" and Claude commits the change and pushes to main. Vercel deploys automatically.

Useful prompts to keep handy

Show me all the content files and give me a summary of what's editable in each one.

What pages does this site currently have?

I want to A/B test two different hero headlines. Set up a simple way to toggle between them without deploying twice.

Add an announcement bar at the top of every page with the text "Now in beta — sign up free". Make it easy to remove later.

What this replaces