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.
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.
Checked locally on this device; nothing is submitted.
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.
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.
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.
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.
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.
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.
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 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.
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 →
