OpenAI shipped three releases this month that stack into a complete website design workflow. Codex handles research and structure, GPT-5.5 writes the copy, and ChatGPT Images 2.0 produces the visuals. Here is how to use all three to design a website for a construction company from scratch.
What You'll Need
Step 1: Brief Codex on the Business
Open Codex inside ChatGPT and start by telling it who the website is for and what it needs to do. Be specific about the business, the audience, and the action you want visitors to take.
Try this:
You are designing a website for MetaLabs Construction, a London-based residential and commercial builder. The audience is property developers, architects, and homeowners commissioning premium builds. The site should communicate craftsmanship, reliability, and design awareness. The primary action we want visitors to take is to request a project consultation. Suggest an eight-section structure for the homepage with a one-line purpose for each section.Codex will return a structured outline. Review it, then ask it to refine anything that does not fit your business.
Step 2: Generate the Copy With GPT-5.5
Once the structure is locked, ask Codex (powered by GPT-5.5) to draft the copy for each section. Keep the tone instruction short and specific.
Try using this base prompt:
Using the eight-section structure above, write the website copy. Tone: confident, understated, no jargon. UK British spelling. Short sentences. Each section should have a headline, a one-line subhead, and a body paragraph of no more than 40 words. Include three project case study summaries (residential, commercial, and heritage), each 50 words.
Customisation: change "confident, understated" to "warm and approachable" if your firm sits in a different market. Specify a word count cap to stop the copy ballooning.
Step 3: Write One Master Image Prompt
This is the prompt that tells ChatGPT Images 2.0 to generate the visuals for the entire site in a single go. The trick is to describe the design philosophy, not each individual image. The model handles the variation.
Based on the website copy above, generate images for a website for MetaLabs Construction. The design should include eight sections, with one image per section, for a total of eight distinct images. The website is for a premium London construction firm focused on residential, commercial, and heritage builds. I want the visuals to feel grounded, tactile, and considered, with text integrated thoughtfully into the design where it appears. Make it feel intentional, like an Awwwards SOTD-level construction site in concept and execution. Keep it in light mode with warm, earthy tones (sand, stone, charcoal, warm white). Stay somewhat consistent across the site while still making each section feel distinct. Generate 8 different images total. Do not combine them into one image. Each image should represent one section of the website.
Customisation: this exact prompt works for almost any niche. Swap "MetaLabs Construction" and the description of the business. Swap "warm, earthy tones" for the palette that fits your brand.
Step 4: Refine Individual Sections
The first batch will be 80% there. Now go back through the eight images and refine the ones that miss. Ask for specific changes by section number.
Try these ideas for inspiration:
Section 3 (services overview) feels too busy. Redo it with a single hero photograph of a finished interior, more negative space, and the section heading set in a small caption block in the bottom-left corner.
Section 6 (case study) needs more contrast. Use a darker background, a wider image of the project, and pull the project name into a large display headline.Customisation: keep refinements specific. "Make it better" gives mixed results. "More negative space, smaller caption, single image" gives precise output.
Step 5: Generate Variations and Pick Favourites
ChatGPT Images 2.0 will generate up to eight versions per prompt. Use this to compare directions, not to refine a single image.
Try this:
Generate four variations of section 1 (hero). Keep the layout consistent. Vary the photograph: one residential exterior, one commercial interior, one heritage detail close-up, one wide cityscape with a project marked in the foreground.
Pick one and move on. Resist the urge to chase a perfect image; the goal here is direction, not final assets.
Step 6: Hand the Pack to a Designer or Build It Yourself
You now have eight pieces of copy and eight section images. From here, you have 3 choices.
Option A: Hand it to a designer. Export the images and copy into a single document. A designer can use this as a complete creative brief, which usually saves a week of back-and-forth.
Option B: Build it yourself. Drop the images and copy into a no-code tool like Framer, Webflow, or Wordpress. Or copy into Figma to make more fine tuning edits. Each will pick up the design direction from the visuals you provide.
Option C: Ask GPT 5.5. You use Codex and ask GPT 5.5 for copy the image into actual code. From there you can ask to make edits or comment directly in the inbuilt browser.
Real-World Applications
Construction and Architecture Firms
Generate project case study pages, service pages, and pitch deck visuals from a single brief. Update them as projects complete without going back to a designer.
Creative Agencies
Use the workflow to produce site concepts for client pitches. Three concepts in an afternoon, instead of one in a week.
Small Businesses
Build a complete homepage design without hiring a designer or paying for stock photography. Export to a no-code builder and ship it.
Property Developers
Spin up marketing pages for new developments quickly. Refresh the imagery as the project moves from CGI to finished build.
Next Steps
Try the workflow on your own business. Brief Codex on what you do, generate copy with GPT-5.5, then run the master image prompt with your company name and palette swapped in. You will have a full design pack in under an hour.
Start with this prompt:
You are designing a website for [your company]. We are a [type of business] based in [location], serving [audience]. The primary action we want visitors to take is [action]. Suggest an eight-section homepage structure with a one-line purpose for each section.