Website templates for Claude Code
Ask Claude Code for a website from scratch and you get a page that looks like every other generated page. Start from a designed template instead and Claude does what it is good at: rewriting the content of a finished design for your business, without breaking the layout or the motion.
Every template here is free under the MIT license: one index.html with its CSS and scripts inside (GSAP, ScrollTrigger and Lenis load from jsDelivr), plus AGENTS.md, CREDITS.md (photos from Unsplash under the Unsplash License, fonts under the SIL Open Font License) and LICENSE, in its own GitHub repository at github.com/8bsite with a live demo on GitHub Pages. Each template's page has the download commands.
Five steps
- Pick a template below. Each is one
index.htmlwith its CSS, scroll animations and phone layout inside. - Download it into your project folder. Every template page has four
curlcommands; for the restaurant template they are:In Windows PowerShell typecurl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/CREDITS.mdcurl.exe. You can also ask Claude Code to run them. LICENSE is the MIT license; CREDITS.md lists the photos and fonts. - Start Claude Code in that folder (
claude) and paste the template's prompt. It starts with "Read AGENTS.md, then edit index.html" and ends with a part in angle brackets: replace it with your business, what you sell, prices, address and how people contact you. - Check the page in a browser, on a desktop and at phone width. Ask for changes one at a time: "make the accent colour dark green", "replace the third section with our pricing".
- Publish the folder on any static host: GitHub Pages, Netlify, Cloudflare Pages or Vercel. There is no build step.
Why download the file instead of giving Claude a link
When Claude Code reads a web page it works from a summary of it, not from the full source. Given a link to a template, it would rebuild a page that only resembles it. Given the file in your project, it edits the real thing: the same markup, styles and animation scripts, with your content.
What AGENTS.md tells Claude
Each template comes with an AGENTS.md: short editing rules written for coding agents.
- Which classes and data attributes the animation scripts read, so they are kept when the text changes.
- Where the placeholders are (email, phone, form, social links, preview image, favicon) and that they must be replaced with real details, never invented ones.
- Which facts on the page are demo facts, so Claude asks you for the real ones.
- How to connect the contact form (Formspree or Netlify Forms) or remove it.
- How to rename the brand in every letter case, swap the photos and recolour through the CSS variables.
Claude Code loads CLAUDE.md by itself. To keep these rules in every session while you work on the site, add the line @AGENTS.md to your CLAUDE.md.
Prompts that work well
- "Read AGENTS.md. List every placeholder and demo fact in index.html and ask me for the real details."
- "Change the palette to navy and cream through the CSS variables in :root. Keep the contrast of the buttons."
- "Rewrite the copy for a family dental practice in Leeds. Keep the number of sections and the length of each headline."
- "Turn this page into a Next.js component. Move each section's animation into useGSAP and start smooth scrolling once."
Questions
Do I need an MCP server or a plugin?
No. The templates are plain files: curl puts them in your project and Claude Code edits them. If you want a new design generated for you instead, 8B also has a Claude plugin, 8b-ai-website-builder.
Will Claude break the animations?
Less likely with AGENTS.md: it lists what the scripts depend on. If a section stops moving after an edit, ask Claude to compare that section with the original file and restore the classes or attributes it removed.
Does this work with Codex, Cursor or Gemini CLI?
The files and the prompt are the same for any coding agent that edits files in your project. Codex reads AGENTS.md on its own; in other tools the prompt tells the agent to read it.