Website templates for Claude Code. Build your business website by telling Claude what to change.
Start with editable HTML and a design guide instead of explaining a whole website from scratch. Use Claude Code with project-file access, supply your business content and review the changes.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Claude Code · Website project folder
You
Read index.html, RECREATE.md and the assets in this folder. Tell me where the headline, images and contact links are before editing.
AI · example response
I will inspect the files and list the sections, image paths and links. I will also identify any form that only demonstrates an action.
You
Use the existing HTML. My business copy and images are in the materials folder.
AI · example response
I will match those materials to the existing sections and ask about missing content rather than invent it.
Steps to take
Open the folder
Unzip the project and give the agent access to it.
Inspect the page
Read the HTML and instructions before replacing content.
Add your materials
Supply your copy, images and actual contact destination.
Result to aim for: the agent works on your actual website files.
Illustrative workflow. No live AI connection.
01 / Project files
What do I give Claude Code?
Give Claude Code access to the unzipped project folder. It can edit index.html, use RECREATE.md to understand the original design and read the supplied assets; then you describe the changes for your business.
Website files + design instructions
The page
index.html contains the supplied frontend, styles and interactions.
The design reference
RECREATE.md explains the original design. Use a separate brief for your business changes.
See the source files and technical details
The actual project files
11-forma-studio · Current inspected ZIP
Current product download inspected on 2 October 2026. Files and remote resources belong to this named project; other templates differ.
The guide describes the original fictional page. Keep its role separate from the changes you want for your own business.
Build an English single-page fictional design studio in `index.html`, with inline CSS and plain inline JavaScript at the end of its body. No framework, build step, module loader or external JavaScript dependency is needed. Supply `assets/terra.webp`, `assets/index.webp` and `assets/vesper.webp` alongside it, using the supplied image files unchanged. These files are identical copies of the corresponding fixed remote images in §9. If the local copies are not included with these instructions, obtain their exact bytes from the corresponding §9 URLs and save them at these three local paths without conversion or regeneration. The rendered page uses the remote image URLs; the local copies are not an automatic offline fallback. Runtime is **network**: images and Google Fonts need internet access. Do not call the result offline self-contained.
I have index.html and RECREATE.md. I want to personalise this website, not recreate the fictional business. Which files should you use?
AI · example response
I will edit index.html and read RECREATE.md as design context. Your new copy, images and requested changes take priority over the sample company.
You
Keep the layout, use my offer and contact details, and remove fictional testimonials.
Steps to take
Existing website
The HTML is the file to edit for personalisation.
Design context
RECREATE.md describes the original layout and behaviour.
Your brief
Provide the business facts and edits you want applied.
Result to aim for: the selected design becomes your website, using the actual source files.
Illustrative workflow. No live AI connection.
02 / Edit or recreate
Do I need to rebuild the supplied page?
No. Ask for a direct edit when you want focused changes to the delivered HTML. Reconstruction from the guide is a separate choice and requires comparison with the original.
A bounded edit
Specify the copy, image or style to change and the layout to retain.
A new implementation
Use the guide as a target and review the resulting design and controls.
03 / Your request
Can I keep the design and change the message?
Yes, that is a useful direct-edit task. Supply approved services and project descriptions, real images and a contact destination. Ask Claude Code to retain the layout and explain its file changes.
›_ AI editing exampleFormwell
You
Adapt Formwell for the fictional Alder brand studio. Change the name, hero headline and introduction. Keep the layout and sample project artwork.
AI · example response
The prepared preview replaces the company name, hero headline and introduction. Compare the Content and Original tabs to see those edits; the other project images remain sample content.
Prepared conversation and project versions. No live AI connection.
See the source files and technical details
A small change you can inspect
11-forma-studio/index.html · L28
These excerpts come from the inspected English original. The following examples are prepared source edits, not a live AI session. Sample businesses and work remain fictional.
Before
<h1>Forma</h1>
First prepared edit
<h1>Cedar</h1>
Follow-up prepared edit
<h1>Cedar</h1>
Original project · Forma Studio
These excerpts come from the inspected English original. The following examples are prepared source edits, not a live AI session. Sample businesses and work remain fictional.Open full preview ↗
Prepared source edit
This prepared version changes selected text or visuals in the same project. Its existing structure and sample content remain. Compare the files before applying a similar change to your business.Open full preview ↗
AI ChatWorkflow example
Claude Code · Review the edited page
You
Compare the edited page with my instructions. Check the headline, image paths, navigation and contact button at desktop and phone widths.
AI · example response
I will list any differences and check what the browser actually displays. A saved file alone does not confirm the visible result.
You
The headline is cut off on my phone. Fix that without changing the copy.
AI · example response
I will adjust the responsive layout and check the same phone width again. You can then approve the result.
Steps to take
Compare the changes
Check your supplied text, images and requested scope.
Open the preview
Check desktop and mobile; click navigation and contact.
Describe the issue
Tell the agent what is wrong and ask it to recheck the corrected view.
Result to aim for: a reviewed version you can continue editing or publish.
Illustrative workflow. No live AI connection.
04 / Review changes
What should I check after Claude says it is done?
Open the edited page and compare it with your request: your company name, headline, images and contact should be correct. Check phone and desktop views; describe any issue to Claude and ask it to correct the same part.
Checked locally on this device; nothing is submitted.
Write a Claude Code change brief
Your own working plan
05 / Claude access
Does this mean ordinary Claude chat too?
This page describes Claude Code working with project files. Other Claude surfaces need their own input, editing and preview method; they are not interchangeable by name alone.
Is Claude access included?⌃
No. Check Anthropic’s current account and usage requirements for your chosen Claude Code surface.
Has every template been tested in Claude Code?⌃
No such claim is made. Choose by the actual package and try a small edit in your environment.
06 / Choose the design
Which page structure fits my business?
Forma Studio suits a work-led studio presentation. Other structures may fit a class, course or product story better. These are design options, not a blanket Claude-tested collection.
Forma Studio
Show studio work, services and approach with your approved content. Enquiry and newsletter demos need live destinations.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/creator-blue.png
assets/creator-coral.png
assets/creator-lilac.png
assets/creator-mint.png
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Claude Code · Cloudflare Pages · from folder to online
You
My website is finished. Publish this project folder to Cloudflare Pages with Wrangler. Tell me what account access and permission you need first.
AI · example response
I will check the site files and image paths. You will need to sign in to your Cloudflare account and approve creating or updating the Pages project before I upload.
You
I approve publishing to a new Pages project. Keep my current domain unchanged until I have checked the preview.
AI · example response
After the authorized upload, I will return the address Cloudflare provides and check images and links there. We can connect your domain after you approve the preview.
Steps to take
Give the agent your project
Use a file-capable AI agent with terminal access and keep index.html and assets together.
Authorize the upload
Sign in to the host and approve the specific project. The agent can run its supported CLI or API.
Check the real address
Open the returned URL; connect the custom domain only after checking the website.
Result to aim for: your website at a public address, then under your own domain.
Illustrative workflow. No live AI connection.
07 / Next steps
What comes after choosing the template?
Download the selected template, open its folder in Claude Code and describe your business changes. After reviewing the page, connect any contact or booking service and ask your agent to publish it with your hosting-account permission. Keep the saved website folder for future updates.
Choose a template. Make it your website with Claude Code.
Download the files, open the project in your AI tool and describe your business changes. You start from an existing design and can keep editing the saved website.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
