From a chosen design to your first reviewed version
Build a website with AI. Turn your chosen template into your own website with your brand and content.
Choose a website template, provide your business content and request focused changes. This guide helps you work from the files, review the result and plan what still needs connecting.
Sample designs · replace the fictional content with your own.
01 / Choose a route
Is a file-based website the right route?
Yes, for a business website, portfolio or product presentation whose files you want to edit with AI. If visitors need accounts, payments or a large editorial system, keep or choose the appropriate service and use the template as the website presentation.
Presentation site
Start with an HTML design and connect the visitor action you need.
Editorial or app workflow
Choose the content system or application services before treating a frontend as the whole solution.
Change the company name, headline and service descriptions to the copy I supplied. Keep the layout and replace only the images I identified.
AI · example response
I will edit the existing HTML, preserve the other sections and show which files changed.
You
Make the main button open my booking page. Use the URL I supplied.
AI · example response
I will update the button link, then check it and the edited headline in the browser.
Steps to take
Supply your content
Give the AI exact text, image filenames and link destinations.
Edit the template
Ask it to edit the existing files and preserve the parts you like.
Review the preview
Read the new content and click the actual links on mobile and desktop.
Result to aim for: your business in the design you chose.
Illustrative workflow. No live AI connection.
02 / Your brief
What should I give the AI before it edits?
Your facts, your goal and your approved assets. Keep missing information out of the page until you can supply it.
Checked locally on this device; nothing is submitted.
Choose a source path and one first change
Your own working plan
AI ChatWorkflow example
HTML + design instructions
You
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.
03 / Use the files
Which file should the AI work from?
For a direct edit, start with the supplied index.html. RECREATE.md describes the original design for reconstruction. Either way, provide your business brief and keep an untouched copy.
Website files + design instructions
Open the extracted folder
Use an AI environment that can inspect and edit the actual project files.
Keep resources together
Retain companion files and inspect remote image or font references.
Can one copied prompt finish the whole site?
The files already provide a page. A copied design guide can request recreation, but personalization, checks and publication may need follow-up work.
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.
Route A · keep and edit the supplied source
Authored task specimen · not a provider transcript
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.
Read index.html and RECREATE.md. Edit the supplied HTML. Replace only the studio name and the requested headline. Keep the structure, sample media and local controls. List the changed files.
Route B · recreate before personalising
RECREATE.md · experimental route still pending
The saved previews show Route A. They are not evidence of a successful reconstruction or a first-prompt result.
In a separate folder, implement the original fictional page described in RECREATE.md. Compare its structure, resources and controls with the supplied source before asking for personalisation. This reconstruction route has not been executed in this example.
04 / First change
What is a useful first request?
Tell the AI what the finished page should say about your business. Supply your name, offer, images and contact link, then ask it to put them into the selected template while preserving the layout you like.
›_ 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
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.
05 / Review and correct
How do I know the right things changed?
Compare the result with your request. If something is wrong, describe the visible problem and the expected result. Review the corrected version before asking for more.
01
Read what changed
Check approved facts, text, image paths and unexpected edits.
02
Open mobile and desktop
Inspect long headings, image crops, navigation and keyboard controls.
03
Save the accepted version
Keep the original and reviewed outputs so a later change has a clear starting point.
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
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.
06 / Connect and publish
What remains after the page looks right?
Connect any contact or booking service you need, then ask your file-capable AI agent to publish the finished folder. It needs your hosting account authorization and upload permission. Review the public address before connecting or switching your own domain.
Compare work presentations, service stories and product pages. Choose the section structure you can fill with real information, rather than copying fictional proof.
Forma Studio
Show studio work, services and approach with your approved content. Enquiry and newsletter demos need live destinations.
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 →
