HTML website templates. Choose a ready-made design and customise it with AI (Claude, ChatGPT/Codex, Gemini and more).
Start with a website you can already picture as yours. Compare its layout and included files, then adapt the selected project with your own content and AI tool.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Your website
You
Use my services, projects and contact to organise this website for my business.
AI · example response
Give me your offer, main examples and how visitors should contact you. I can place them in the template’s sections and move or add sections if your content needs a different order.
Arrange your website content
Collect the material
Use your service descriptions, project images and contact details.
Place it in the template
Ask AI to replace sample sections and keep the design elements you like.
Reorder or add a page
Move important information earlier or create a detail page when it needs more room.
Next: read the website as a visitor and see whether the offer and contact are easy to find.
Illustrative conversation, not a live AI session.
01 / Your website
What should your website help a visitor do?
Visitors should be able to understand your offer, see your work or try your product, then contact you or take the next step. Choose a template that already has room for those things; you can change its text, images and links with AI.
Present services
Explain the offer, who it suits and how to contact you.
Show your work
Give real projects room for imagery, your role and context.
Introduce a product
Explain its workflow and link visitors to your actual app or demo.
02 / Choose a design
Compare the work each design is built to present.
Choose Forma Studio or Offset for a visual portfolio, Morrow for classes and services, or Relayline for explaining a software product. Open the complete previews to see the sections below the hero, then choose the layout closest to the website you need.
Forma Studio
Identity and digital studio: work, approach and services. Bring your own projects.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.png
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
See the source files and technical details
Relayline: Source section order
04-relayline/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #unnamed — Give every handoffa clear next step
02 #unnamed — (visual section)
03 #overview — Keep the contextwith the next step
04 #features — Small details. Clearer handoffs. Explore the building blocks of this fictional workspace.
05 #unnamed — The next person should be able to pick up the work without piecing together the whole story.
06 #scenarios — Different work.The same clear handoff.
07 #principles — Built around the personwho picks up next
08 #faq — FAQ
09 #try — A clear next step.Ready when you are.
Morrow: Source section order
07-morrow/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #home — Make roomfor yourself.
02 #begin — Take it at your pace.
03 #unnamed — (visual section)
04 #classes — A little movement.A little space.
05 #studio — A shared space.Your own rhythm.
06 #retreat — A slower weekend.
07 #first-visit — You can start here.
08 #journal — A few thoughts onmoving, noticingand making space.
Visitor question
Source location
What the actual source shows
What your website needs
What will the visitor use or understand?
Relayline #overview / #features / #scenarios
A software-workflow explanation leads into three handoff scenarios.
Supply your actual product screens and supported tasks. The local handoff is not an app backend.
Which service should I choose?
Morrow #classes / #studio / #first-visit
Six class types sit beside studio context and a first-visit guide.
Supply real class scope, location and availability. Booking and payments need a separate service.
Relayline
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
Morrow
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
AI ChatWorkflow example
Inside the ZIP
You
What do I do with the HTML and RECREATE.md in this download?
AI · example response
Give me the unzipped folder. I can read the HTML and design guide, identify the assets and then work on the files you want to change.
Open your website project
Unzip the project
Keep index.html, the guide and assets together in the supplied folder structure.
Open the folder in AI
Give your file-capable agent access to the complete project, not only a screenshot.
Describe your changes
Supply your text and pictures, and say which parts of the design to keep.
Next: open the project preview and describe the changes you want.
Illustrative conversation, not a live AI session.
03 / Inside the ZIP
What do the website files and instructions do?
The HTML file is the website you can open and edit. RECREATE.md explains the design to your AI. Unzip the project into one folder and give the agent access to the whole folder, including any assets; the exact contents are shown for each product.
Website files + design instructions
Unzip the project
Keep index.html, the guide and assets together in the supplied folder structure.
Open the folder in AI
Give your file-capable agent access to the complete project, not only a screenshot.
Describe your changes
Supply your text and pictures, and say which parts of the design to keep.
See the source files and technical details
Forma Studio: supplied reconstruction instructions
11-forma-studio/ RECREATE.md, first 8 lines (output contract)
The guide describes this particular page and its original structure. Read it with index.html; it is not an operating CMS or hosting service.
# Recreate Forma Studio
## 1. Output contract
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.
Target current Chromium with native dialog, named details, IntersectionObserver, backdrop-filter and svh support. The page should open directly from disk with network access and via a local HTTP server. All enquiry and email-preview actions are local browser demos with no submission, storage or backend. Generate the page and its three supplied asset files. Preserve the exact design and copy below, including all fictional/concept disclosures and testimonial-example labels. Do not create additional commercial claims, external destinations, animations or content.
AI ChatWorkflow example
Visitor actions
You
Make this website send enquiries to me. What should I connect?
AI · example response
Choose email, a form-receiving service or a booking link. I can connect that destination and help check a test submission. A message shown in the browser is not proof it arrived.
Connect enquiries to your inbox
Choose the destination
Use your email address, a form-receiving service or your booking link.
Ask AI to connect it
Give it the destination and ask for the button or form to be connected. Private credentials stay in the authorised tool setup, not the public HTML.
Send a test
Confirm the message arrives or the booking appears in your service, not only as a success message on the page.
Next: check the test message or booking inside your receiving service.
Illustrative conversation, not a live AI session.
04 / Visitor actions
Will a click actually send a message?
Only after you connect it to your contact route. Ask AI to link the button to your email address, connect the form to a service that receives submissions, or add your booking link. Send a test enquiry and confirm that you actually receive it.
Choose the destination
Use your email address, a form-receiving service or your booking link.
Ask AI to connect it
Give it the destination and ask for the button or form to be connected. Private credentials stay in the authorised tool setup, not the public HTML.
Send a test
Confirm the message arrives or the booking appears in your service, not only as a success message on the page.
AI ChatWorkflow example
Make it yours
You
Replace the studio with my business, use my text and photos and keep this layout.
AI · example response
Open the unzipped template folder and give me your content and images. I can replace the examples in the supplied HTML while keeping the selected design. Then we can view it locally and refine it before you publish.
Make the template your website
Open the downloaded project
Unzip the template and open its complete folder in your file-capable AI agent. Keep the supplied asset paths.
Supply your content
Add your text, photos and brand details and say which parts of the selected design to keep.
Open the local preview
Ask AI to show the edited page. Refine it before choosing how to publish; no existing website or hosting project is needed to start.
Next: open your first personalised preview; choose hosting when you are ready to publish.
Illustrative conversation, not a live AI session.
05 / Make it yours
Can I ask my AI to change the website?
Yes. Open the downloaded project in a file-capable AI agent and describe what you want: your business name, new text, photos, colours or a different layout. Tell it which parts to keep, then open the updated preview and ask for further changes until it fits.
See the prepared template example
›_ AI editing exampleFormwell
You
Replace the sample studio introduction and services with my supplied business content. Keep the existing layout.
AI · example response
The prepared example changes the studio copy while preserving the layout. Review the wording and contact route before using your own version.
My website is finished. Publish this folder on Cloudflare using the CLI or API after I authorise my account.
AI · example response
I can prepare the complete folder and use Cloudflare’s CLI or API to upload it after you authorise account access. Keep index.html and asset paths intact. We can open the resulting address and connect your domain next.
Publish the finished website
Prepare the folder
Keep the finished HTML, scripts and assets in their original relative locations.
Authorise deployment
Use your Cloudflare or Vercel account and allow the agent to deploy through the provider’s CLI or API.
Open the public address
Check the website online, then add your domain and test links, images and contact.
Alternative: give the complete ZIP to hosting support or an IT person. Ask whether they can upload it and connect your domain.
Illustrative conversation, not a live AI session.
06 / Before publishing
What will my website still need?
It needs your final content, working contact links, and a place online. Ask your file-capable AI agent to deploy the finished folder to Cloudflare or Vercel with your authorised account access. Alternatively, send the project ZIP to hosting support or someone in IT; keep the folder structure intact.
Checked locally on this device; nothing is submitted.
07 / Choose access
One design or more projects ahead?
Choose Single when you want one particular design. Choose PRO if you want the template library for this website and future projects, plus the other creative assets included in PRO. Yearly renews each year; Lifetime is a one-time purchase. Compare the options in the pricing below.
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 →
