How do you build a website with Claude Code? Turn a ready-made template into your business website without writing the code yourself.
Start from an existing website. Check Claude Code access, open the complete project and review one small change before asking for the next. Keep an accepted version you can return to.
Sample designs · replace the fictional content with your own.
01 / Starting setup
Which Claude workflow am I using?
Use Claude Code with access to your website folder. After installing and signing in through Anthropic’s instructions, open the unzipped project and ask it to edit the supplied HTML. The AI account is separate from the template purchase.
Checked locally on this device; nothing is submitted.
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.
02 / Give file context
How do I make sure Claude reads the right files?
Ask it to inspect index.html, RECREATE.md and companion resources before editing. Request a summary of page structure, remote dependencies and controls that only demonstrate a service.
Website files + design instructions
Inspect first
Ask for understanding without changing files.
Separate your brief
The design guide explains the original. Your approved text describes the new business.
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.
03 / First edit
How do I adapt the page without rewriting everything?
Describe the content, images or style to replace and explicitly keep the existing layout. Claude can edit those parts of index.html; it does not need to recreate the entire website from RECREATE.md unless that is what you ask for.
›_ 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.
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 / Check and correct
What proves the requested change is right?
The saved files and browser result, compared with your brief. Review the first pass and request a correction tied to a visible problem before keeping the next version.
01
Read the source changes
Verify text, links and unexpected edits.
02
Inspect both screen sizes
Look for clipped headings, awkward crops and broken mobile navigation.
03
Correct the observation
Describe what is wrong and what the corrected version should show.
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>
A saved version you can return to
11-forma-studio · LP18-restore.diff
The saved first edit was copied back on a disposable local file and its checksum matched. This demonstrates file restoration, not an agent checkpoint or a hosting rollback.
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 · Find the missing project file
You
This image is missing in the preview. Check the image URL and local file path in index.html.
AI · example response
I will compare the HTML reference with the actual files and check whether it uses a remote URL. If the file is missing, I will ask for it rather than substitute an unrelated image.
You
The correct image is in assets. Fix the reference, keep its filename and check the crop on mobile.
Steps to take
Check the reference
Read the image path in the actual HTML.
Find the asset
Compare local files or confirm the remote URL loads.
Reopen the preview
Check the corrected image and crop in the browser.
Result to aim for: the intended image loads from the correct path.
Illustrative workflow. No live AI connection.
05 / Missing files
What if Claude cannot see a file or an image is missing?
Check the actual folder, file paths and permissions. Then inspect local assets and external requests in the browser. Do not solve missing context by asking for an invented replacement.
Can I undo a rejected change?⌃
Keep the original ZIP and an approved folder or Git version. Tell the agent which version or edit to restore, then open the restored page to check its content and links.
06 / Choose the project
Which website do I want to work from?
Compare the actual content structures. The designs below offer different presentations; they are not evidence of identical results in every Claude environment.
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/common-ground.png
assets/loop-radio.png
assets/mono-house.png
assets/serein.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 / What remains
What lies outside this Claude Code task?
After editing, connect any real enquiry or booking service and ask your AI agent to publish the folder to a suitable host. Approve the account access and upload, check the returned public URL and then connect your domain. Hosting and AI access are separate from the template.
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 →
