Guides ChatGPT published jul 10, 2026
In this guide, you'll learn how to turn a website idea into a working prototype using the new ChatGPT Work and Codex app (which uses the new GPT-5.6 models).
We built an Astro.js directory prototype for roguelike and roguelite games on Nintendo Switch. It has a homepage, filters, detail pages, structured game data, and images that the coding agent can use to populate the site.
The same setup works for tools, products, books, services, local businesses, or any collection with consistent fields.
When the site is ready, check whether the new Sites feature is available in the app. Tell Codex:
Publish this finished website using the Sites skill. Deploy it and return the public URL.If Sites is available, OpenAI will deploy and host the site for you. That is the natural next step for this workflow: plan the site, gather the content, build the prototype, then publish it from the same app.
Download the ChatGPT desktop app (https://chatgpt.com/download/) and make sure it is updated. If the app shows an Update button, click it, let the app reopen, and choose Get started if prompted.
You'll know the update is ready when the top left says ChatGPT Work. Click ChatGPT Work or Codex to toggle modes.
ChatGPT Work is the longer-running task mode for research, files, and sub-agents. Codex is the coding mode for setting up the project and building the site.
For more context, read OpenAI's ChatGPT Work announcement (https://openai.com/chatgpt-work/).
Pro tip: If ChatGPT Work is not in the top left, update the desktop app before starting. The labels and available models can vary by account.
Create a new project folder on your computer, then open it as a project in the ChatGPT desktop app. Start a new task in that folder, click ChatGPT Work, and describe the directory you want to build.
We used a directory of roguelike and roguelite games for Nintendo Switch. The category is not the important part. Pick a clear theme with a few fields that every entry should share.
Use the Astro.js framework (https://astro.build/) for the first version. We recommend it for content-driven sites because each item can live in a simple Markdown file with front matter. Astro turns that folder into fast, SEO-friendly pages without requiring a separate database, and its straightforward structure gives an AI coding agent less to untangle.
Use a prompt like this:
I want to build a website directory for [DIRECTORY_TOPIC].
Plan the site using the Astro.js framework. Define:
- the target audience
- the theme and subject matter
- the fields each directory item should have
- the first version of the site
- an acceptance checklist
Then write a one-page PRD and save it in this project folder.The PRD is the handoff between planning and building. It should explain what the site is, who it is for, what each entry contains, and what needs to work in version one.
Pro tip: Keep the first version static and content-driven. We can add ratings, comments, or other interactive features after the directory itself works.
When the PRD is saved, keep ChatGPT Work on the research task. Ask it to task sub-agents with researching the directory items and gathering the data and images for each entry.
Use sub-agents to research the items in this directory.
For each item, gather:
- name
- website
- release date or launch date
- price or pricing signal
- short description
- cover, logo, or other useful image
Save each item in a consistent folder structure with a Markdown file and front matter. Mark anything you cannot verify instead of guessing.While Work is running, open a new thread, click the dropdown, and switch to Codex. Point the Codex thread at the PRD and research folder.
Read the PRD and the research folder.
Set up this Astro.js coding project and begin building the directory site. Use sub-agents to build the pages and components where helpful. Create a searchable homepage, filters, detail pages, and the content structure described in the PRD.
Open the preview when the first version is ready and summarize what you built.This is the useful split: Work gathers the raw material while Codex turns the PRD into a codebase and a visible website.
Pro tip: Keep Git enabled while Codex works. Small commits are save spots we can return to when a change breaks the site, and connecting GitHub gives us a cloud copy and a clean handoff for another agent.
When Codex finishes the first pass, open the preview and check the actual site. Click into a detail page, test the filters, and look for missing CSS or layout problems. In our recording, the Astro build produced 58 pages, but the first pass still needed a visual check and a CSS correction.
If the project needs a local build check, run:
npm install
npm run build
npm run devWe used GPT-5.6 Terra at medium effort and standard speed. Luna is smaller when we want to save tokens, and Sol is the biggest model for the hardest reasoning. Read the GPT-5.6 announcement (https://openai.com/index/gpt-5-6/) for the model breakdown, and use the model picker available on the recording account.
Keep going
Members get all guides, courses, live sessions, and $1,000+ in partner perks.