An existing design, shaped around your business

Make a template fit your business. Turn a ready-made design into a website with your brand, offer and photos.

Keep a useful design structure and replace the sample business content. Give a file-capable AI agent your approved brand inputs, change one part at a time and review the page where visitors will see it.

Prepare my brand brief See a visual change

Primefolio

Forma Studio

Orbit

Sample designs · replace the fictional content with your own.

01 / Keep or replace

Which parts are design and which are sample content?

The layout, hierarchy and interactions give you a starting structure. Names, work examples, prices and testimonials belong to the sample story unless you replace them with approved facts.

Keep what helps

Retain section patterns that explain your offer clearly.

Remove unsupported proof

Do not reuse fictional customer claims as your own.

See the source files and technical details

The actual project files

02-primefolio · Current inspected ZIP

Current product download inspected on 2 October 2026. Files and remote resources belong to this named project; other templates differ.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

What the original instructions specify

02-primefolio/RECREATE.md · L5

The guide describes the original fictional page. Keep its role separate from the changes you want for your own business.

Build one complete `index.html` for **Forma North — Independent digital design**. Use semantic HTML, one inline stylesheet and one inline classic JavaScript block at the end of the body. No framework, build step, package manager, bundler, JavaScript library or application backend is required. Implement the page and every state described below, including all six project stories, all three editorial notes, thirteen capabilities, the full-width studio menu and the local downloadable project brief.

AI ChatWorkflow example

Personalise the existing website

You

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 brand inputs

What should my adaptation brief contain?

Give the agent your company name, offer, contact URL, logo and images. Add the colours you want and identify the sections to keep or remove. With that brief, it can replace the sample company and adapt the chosen design to your brand.

Be specific about contentMap each approved image and text to a section.Name the prioritiesState what visitors must understand first and what action comes next.

Checked locally on this device; nothing is submitted.

Write your keep / change / remove brief

Your own working plan

AI ChatWorkflow example

Reorder sections in the existing template

You

Move my services before the portfolio, remove the sample pricing section and keep the contact link at the end.

AI · example response

I will reorder the existing HTML sections and update the menu anchors. I will check that links and mobile spacing still work.

You

Show the new page order first. Keep the project images and descriptions unchanged.

Steps to take

Name the sections
Tell the agent what to move, remove or add.
Update the page
Edit the existing structure and navigation anchors.
Review the order
Read the full page on desktop and phone.

Result to aim for: your business in the design you chose.

Illustrative workflow. No live AI connection.

03 / Content hierarchy

Should I change the order as well as the colours?

Yes. Ask the agent to move, remove or add a section in the existing HTML. For example: put your services before the portfolio, remove a pricing section you do not need and connect the contact button to your real booking page.

Reorder the content

Ask AI to move services, projects or testimonials into the order your visitors need.

Connect the button

Give the agent the actual contact, booking or payment URL you use.

04 / Visual changes

How do I change the look without losing readability?

Request deliberate changes to colour, type and imagery, then inspect their effect on actual content. Check contrast, long headings, image crops and available font resources.

AI editing exampleFormwell

You

From the prepared Alder version, use a soft lilac background and deep purple text. Keep the layout and content.

AI · example response

The prepared preview changes the background and text colours while retaining the layout. Compare the Colours and Content tabs, then check readability with your own copy.

index.html · RECREATE.md

Formwell · prepared HTML preview

Open full preview ↗

Prepared conversation and project versions. No live AI connection.

See the source files and technical details

A small change you can inspect

02-primefolio/index.html · L53

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 id="hero-title" class="hero-heading"><span>Clear thinking.</span><span>Fresh <span class="muted" style="display:inline">digital form.</span></span></h1>

First prepared edit
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Considered <span class="muted" style="display:inline">digital design.</span></span></h1>

Follow-up prepared edit
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Design <span class="muted" style="display:inline">with purpose.</span></span></h1>

Original project · Primefolio

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

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 in context

What do I check after adapting the design?

Compare the saved changes with your brief and inspect the full page. A pleasing screenshot is not enough to check links, interactions or mobile reading order.

01
Check real content

Review names, claims, image rights and the next-action destination.
02
Check the changed design

Test desktop and mobile, keyboard controls, crops and resource loading.
03
Keep the reviewed version

Save the source and correct any observed issue before publishing.

06 / Choose the structure

Which starting design makes the adaptation easier to plan?

Choose a layout that already has the sections your business needs. A studio portfolio, consulting page, class presentation and product story ask for different kinds of content.

Primefolio

An editorial digital-design portfolio; its source and guide support this same-project brand example.

See price and files ↗

Inspect the files

Current download inspected on 2 October 2026. Confirm the selected files on the product page.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Some resources may load from external URLs. Review the selected project before publishing.

Forma Studio

Show studio work, services and approach with your approved content. Enquiry and newsletter demos need live destinations.

See price and files ↗

Inspect the files

Current download inspected on 2 October 2026. Confirm the selected files on the product page.

index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp

Some resources may load from external URLs. Review the selected project before publishing.

Orbit

Explain a consulting service and approach. Its presentation does not deliver consulting automation.

See price and files ↗

Inspect the files

Current download inspected on 2 October 2026. Confirm the selected files on the product page.

index.html
RECREATE.md
assets/bridge.webp
assets/connect.webp
assets/folio.webp
assets/lens.webp
assets/loop.webp
assets/relay.webp

Some resources may load from external URLs. Review the selected project before publishing.

Veyra

Present a voice-product story, examples and workflows. It does not include a voice-to-text application.

See price and files ↗

Inspect the files

Current download inspected on 2 October 2026. Confirm the selected files on the product page.

index.html
RECREATE.md

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

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 / After adaptation

What does this adaptation leave separate?

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.

Prepare an AI website brief Publish the approved version Check licence and client handoff

Formwell / Website files + design instructions