How to design a website with ChatGPT

01 · Choose the working mode

Decide how ChatGPT should help before you prompt it.

Search results often collapse planning, visual design, code generation, and hosting into one promise. They are separate jobs. Pick the lane that matches the outcome.

02 · Write the brief

Start with decisions, not adjectives.

“Modern, clean, and professional” describes almost every generic template. A useful brief tells ChatGPT who must be persuaded, what they should do, which content is true, and which constraints cannot move.

Act as a senior web designer and content strategist.

Project: [business, product, or idea]
Audience: [who the site is for and what they need]
Primary action: [the one action the site should drive]
Pages or sections: [required information in priority order]
Brand character: [three specific traits]
Visual references: [links, screenshots, or named qualities]
Constraints: [framework, CMS, assets, deadline, accessibility]

Before designing, identify missing decisions and ask no more than five focused questions. Then return:
1. a one-sentence creative direction;
2. the page hierarchy and purpose of each section;
3. a concise visual system (type, colour, spacing, imagery, motion);
4. risks, assumptions, and what a human must verify.

Ask for questions first. It is cheaper to correct an assumption in the brief than in a finished interface.

03 · Shape the page

Turn the visitor's decision into a content hierarchy.

Do not begin with a list of fashionable sections. Begin with the questions a visitor needs answered in order. A landing page often has to establish relevance, explain the mechanism, prove the claim, reduce risk, and make the next step obvious.

Make ChatGPT defend the outline.

Ask it to state the job of every section in one sentence and remove anything that does not help the primary audience decide. Then write the content before polishing the visual surface. Layout cannot rescue a page with no argument.

04 · Direct the visual system

Describe relationships, not just colours.

ChatGPT responds better when visual references come with an explanation. “Use this site” invites imitation. “Use its generous headline scale, framed article body, restrained palette, and sticky utility rail—but keep our brand and content” identifies reusable principles without copying someone else's work.

Give it components with a point of view.

A model is more consistent when it can reuse proven primitives instead of inventing every card, menu, input, and animation from scratch. A curated component source such as Rendyn's catalogue gives a coding agent visual previews, implementation context, and complete source to adapt to the product.

05 · Build in stages

Ask for a coherent first slice, then iterate with evidence.

A one-shot request can produce a complete-looking page while hiding wrong assumptions, brittle code, and broken mobile behavior. Build the smallest representative viewport first. Confirm the direction in a browser. Then complete the remaining sections, states, and breakpoints.

1. 01
   Inspect

   Find the correct route, shared components, tokens, metadata pattern, and established checks.

2. 02
   Implement the slice

   Build the header, hero, primary action, and one representative content treatment.

3. 03
   Review the direction

   Check actual content, hierarchy, spacing, contrast, and behavior in the rendered page.

4. 04
   Complete and verify

   Finish responsive states, interactions, metadata, links, performance, and browser QA.

Build the approved homepage in my existing project.

Use the repository's current framework, shared components, tokens, and file conventions. Do not replace working architecture or add dependencies unless they are essential.

Requirements:
- one clear H1 and semantic heading order;
- responsive layouts at 360px, 768px, and 1440px;
- keyboard-visible focus states and reduced-motion support;
- real supplied content and assets, with useful alt text;
- no placeholder links, invented claims, or decorative interactions;
- preserve performance and validate all inputs at trust boundaries.

First inspect the project and explain the route and files you will change. Then implement, run the established checks, and verify the result in a real browser on desktop and mobile. Report console errors, failed network requests, and anything that still needs human approval.

06 · Review the output

Critique the website like a designer and test it like a developer.

“Looks good” is not a test. Review the page at the level where visitors experience it, and ask ChatGPT to fix the underlying rule rather than patching one screenshot.

07 · Launch deliberately

A ChatGPT-built website still needs human approval.

Generated output is not proof that a claim is true, a photograph is licensed, a tracking setup is lawful, or a business process is ready for public traffic. Treat generation as a capable draft and the launch as your responsibility.