A reviewable local-project workflow

How do you build a website with OpenAI Codex? Create your own website by describing the changes Codex should make to the template.

Start from a website template, save a checkpoint and give Codex one task at a time. Review the source changes and browser result before keeping each version.

Prepare my starting version Plan my first Codex task

Morrow

Primefolio

Clearstead

Sample designs · replace the fictional content with your own.

01 / Codex setup

Which Codex does this guide mean?

OpenAI Codex CLI working in a local project directory. Check current sign-in and permissions in OpenAI’s documentation. Desktop, IDE and cloud surfaces need their own project-access setup.

Use the full folderExtract the source project and start from its directory, with companion files intact.Arrange Codex accessAI account and usage are not included in the template.

Checked locally on this device; nothing is submitted.

OpenAI Codex CLI ↗

AI ChatWorkflow example

OpenAI Codex · Keep and restore a website version

You

Before editing, save this approved website version. Set up a Git checkpoint if available and keep my original ZIP unchanged.

AI · example response

I will confirm where the saved version is before applying the next change.

You

I prefer the previous layout. Restore it, but keep the new contact email.

AI · example response

I will compare the versions, restore the previous layout and check that the contact email remains the one you requested.

Steps to take

Save before editing
Keep the original ZIP and an approved folder or Git version.
Name what to restore
Tell the AI which version and which elements should return.
Check the restored page
Open it and verify content, layout and contact links.

Result to aim for: a deliberate return to the version you prefer.

Illustrative workflow. No live AI connection.

02 / Save a baseline

What do I save before Codex edits?

Keep the original ZIP and ask Codex to save the starting folder or create a Git checkpoint before editing. After accepting a change, save that version too. You can then ask it to restore a known version instead of trying to recreate the old design from memory.

01
Record the starting state

Save the source and note the original page appearance.
02
Keep approved outputs

Save each reviewed version with a short description of its change.

See the source files and technical details

The actual project files

07-morrow · 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/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

What the original instructions specify

07-morrow/RECREATE.md · L5

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

Build an English movement-studio demonstration as `index.html` plus `assets/favicon.svg` and six local PNG copies listed in section 9. Put all CSS and vanilla JavaScript in the HTML; use no framework, bundler, build step, external JavaScript or library. Reproduce the structure, copy, proportions, palette, image placement and behavior specified here. Keep native browser scrolling and native HTML dialogs.

03 / One clear task

How do I keep the adaptation specific?

Supply your company copy and name the parts to preserve: section order, images or colours. Ask Codex to edit the current HTML and list the changes. For example, replace the sample company name and services without redesigning the page.

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.

index.html · RECREATE.md

Formwell · prepared HTML preview

Open full preview ↗

Prepared conversation and project versions. No live AI connection.

AI ChatWorkflow example

OpenAI Codex · 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 / Inspect the output

How do I know what Codex actually changed?

Compare saved files with the previous version and open the page. Check requested text, image paths, links and unexpected edits; a success message does not replace this review.

Browser checksTest mobile and desktop layout, navigation, dialogs and keyboard focus.Resource checksInspect missing local files and surviving remote fonts or images.

Checked locally on this device; nothing is submitted.

See the source files and technical details

A small change you can inspect

07-morrow/index.html · L84

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">Make room<br>for <em>yourself.</em></h1>

First prepared edit
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Follow-up prepared edit
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Original project · Morrow

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

OpenAI Codex · 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.

05 / Next correction

How do I continue after the first result?

Request the next change from the accepted version. Describe the visible issue and expected result, then inspect the new diff and recheck the affected part.

01
Keep the scope clear

For example, shorten a supplied heading while retaining the section layout.
02
Recheck before keeping

Review the correction at the screen size where the problem occurred.

See the source files and technical details

A saved version you can return to

07-morrow · LP19-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.

f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538
f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538

A saved version you can return to

07-morrow · LP19-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.

f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538
f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538

Save a Codex review and recovery plan

Your own working plan

06 / Choose the project

Which design fits the website I need?

Choose by real sections and content requirements. A class presentation, work portfolio and software story need different inputs and different live services.

Morrow

Present classes, the studio and first-visit information. Live booking needs a separate destination.

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/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

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

Primefolio

Show selected studio work and project stories using your own approved images and facts.

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.

Clearstead

Explain a cash-flow workspace concept. Dashboard and form demonstrations are not an operating finance app.

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/sunflower-meadow-vertical.png
assets/sunflower-meadow-wide.png

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

Velora

Present a developer-tool workflow. Code-review views illustrate the concept rather than provide a live review service.

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

OpenAI Codex · 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 / Beyond the session

What leaves this Codex task unfinished?

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 website designs for Codex Plan the public website launch Check live function requirements

Try the actual Formwell files

Formwell / Website files + design instructions

Try one real template before choosing.

Download the original Formwell project. Give its files and RECREATE.md to a suitable AI tool, try a small change and inspect the result.

The free sample is Formwell. Its original design and guide are in English. Product prices stay unchanged.

Download Formwell ZIP Download RECREATE.md ↗

Choose a template. Make it your website with OpenAI Codex.

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.

Choose my starting template