Yes. ChatGPT can turn a client brief into a sitemap, rough wireframes, page copy and working HTML or component code. A web designer still has to decide the site's purpose, verify the client's claims, shape the visual identity, test responsive and accessible behaviour, connect real forms, and hand over maintainable files. Treat its output as a prototype until those checks pass.
The fastest demo is often the least representative test. A landing page with placeholder images and a button that goes nowhere can look complete in a preview. The client's actual site has awkward headings, changing service details, legal text, slow images, a small phone screen and a person who needs to use the form without a mouse.
What one brief can produce, and what it cannot decide
Give ChatGPT the client's goals, audience, services, proof, desired action, brand constraints and existing content. It can organise those facts into a proposed page tree, suggest section order, draft microcopy and produce a code sample. OpenAI's help documentation says supported code blocks can show HTML or React previews, depending on plan, device and settings. That makes a conversation useful for quick visual iteration, but a preview is a discussion artefact rather than evidence of a finished site.
A designer must first ask what the client is trying to change. “Make the website modern” is not enough. A veterinary practice might need new appointment enquiries, clear emergency instructions and separate information for existing clients. The designer should establish which actions matter, what staff can answer, what content is approved and which service pages deserve prominence. The model cannot infer those priorities from a list of colours.
Ask for a page-purpose table before any code. For each proposed page, write its intended visitor, one primary question, evidence the client can supply and the next action. An illustrative optician site might have an eye-examination page whose visitor needs booking availability and preparation details. If AI instead invents “same-day appointments” because that sounds appealing, reject the claim. For the broader choice between tools and designers, see the AI website planning tutorial.
The Complete Excel Course with AI Integration
From formulas and pivot tables to Power Query, DAX, VBA and AI with Copilot, ChatGPT and Claude — hands-on from the first lesson.
By Sagnik Bhattacharya and Virginia Thorn, Primetime Emmy Award winner
Buy nowStart with a content inventory, not a pretty screen
Collect the client's approved service list, hours, contact routes, FAQs, policies, imagery rights, testimonials with permission, accessibility needs and existing analytics or enquiry patterns. Mark each item approved, needs confirmation or unavailable. This gives the model a bounded source and tells the designer which gaps require a conversation rather than a guess. If the client has a live site, record its current URLs so important pages do not disappear during redesign.
For example, a music school says it teaches adults and children, offers individual lessons and has three tutors. An AI draft may turn that into “certified teachers for every instrument” and “flexible evening slots”. Neither follows from the brief. The designer should replace those claims with verified tutor details and an enquiry route for availability. The page can still be persuasive: explain lesson format, who answers enquiries and what happens after a trial request.
Use this copy instruction as a starting point, then inspect every line against the inventory:
Write a page outline from the approved facts below.
For each section show: visitor question, answer, proof needed, call to action.
Do not invent credentials, availability, prices or testimonials.
Mark missing facts as [client to confirm].
Write button labels that describe the actual destination.
Keep the main action clear on a small screen.An illustrative response might propose “Meet our award-winning tutors” with proof marked “[client to confirm]”. That is useful because it exposes a gap. It is not permission to publish the award claim. An agency can make this review visible in the working document: accepted copy in one column, unresolved claims in another, client sign-off recorded beside each. This also prevents a later content edit from reintroducing a discarded line.
Build wireframes around tasks a visitor can finish
A wireframe is a rough arrangement of content and actions, not a final visual treatment. Ask ChatGPT for a text wireframe: header, main heading, brief explanation, proof, details, form or contact route, and footer. Then test whether someone unfamiliar with the business can find a service, understand its scope and take the next step. The designer decides hierarchy, spacing, typography and how content behaves when the phone width narrows.
Suppose the first wireframe for a care agency puts a large quote carousel before the “request a call” action and hides service coverage in an accordion. A designer should bring the service summary and contact route into plain view, and check whether the quote can be used at all. The change is based on visitor needs, not aesthetic preference. A carousel also adds interaction and testing overhead; do not keep it simply because the AI proposed it.
Do a five-task paper test before building. Ask a colleague to locate fees, find the relevant service, identify how to contact the business, understand what happens after submitting the form, and use the page only with a keyboard. Note where they hesitate. If three of five tasks are unclear, revise the structure before asking for polished code. The numbers here are an illustrative internal threshold, not a web design standard.
A six-page client site, counted honestly
Consider an illustrative small web agency asked to redesign a six-page website for an optician. The agreed scope includes home, examinations, frames, team, FAQs and contact, plus one booking enquiry form. The agency estimates 42 internal hours: 6 for discovery and source review, 8 for information architecture and copy, 12 for design and build, 10 for testing and corrections, and 6 for launch and handover. At an illustrative internal planning rate of $65 an hour, that is $2,730 of team time before software, hosting or ongoing support. These are a planning example, not a market price.
ChatGPT helps draft the sitemap, question-led section outlines and initial HTML for two repeated content patterns. In the agency's trial log, those parts take 6 hours instead of the 10 hours originally allowed. But testing reveals 3 hours of extra work: the generated mobile menu cannot be operated reliably by keyboard, the form lacks clear error messages, and two page titles duplicate each other. The net internal time reduction is one hour, not four. This is why judging only the time to first preview exaggerates the value.
After the first round, the designer changes the prompt and component library. The next page inherits a tested navigation pattern rather than generating a fresh one. The agency records a 2-hour copy review because the model repeatedly claimed an unverified “free examination”. The client approves the actual examination wording. The final estimate stays 42 hours until the agency sees a completed handover; there is no reason to promise a discount based on early drafting speed.
The same log should note the site's acceptance evidence: six approved page outlines, six responsive page checks, one end-to-end form test, keyboard navigation, all real links checked, and a handover pack. The agency may still find ChatGPT valuable as a quick collaborator. Its value is strongest when the team reuses approved components and measured review steps. For more on checking a site before transfer, see the website accessibility handover tutorial.
Responsive failures that a desktop preview hides
Ask the model for code that adapts to narrow screens, then actually resize and use it. Text must wrap without clipping, navigation must remain reachable, touch targets must be usable, tables must not force the whole page sideways, and the primary action must remain visible in a sensible order. Do not accept a screenshot of a simulated phone as the only evidence. Test the rendered page on real content at several widths and with zoom.
An illustrative failure: a three-card service grid looks balanced at 1,200 pixels wide. At 320 pixels, the generated CSS preserves three columns, so the booking button is cut off. The fix is to allow the grid to stack and let buttons grow with their labels. Another failure is a mobile menu icon that changes visually but never updates the menu's accessible state. A developer needs to correct the interaction and retest with keyboard and assistive technology.
Long client words are especially revealing. A page with short placeholder text may pass a visual check, while a real service name, a translated phrase or a 60-character button label breaks the layout. Put the longest approved titles and form errors into the prototype early. If the design only works with copy shortened for the mock-up, the design is not ready.
Accessibility needs a person at the keyboard
W3C's Web Accessibility Initiative describes principles such as perceivable content and operable controls, including adequate contrast and keyboard access. ChatGPT can suggest semantic HTML and write a first accessibility checklist, but it cannot certify the result from its own generated code. The designer should test focus order, visible focus, meaningful headings, link wording, text alternatives, form labels, error recovery, colour contrast and content at zoom. If the client has a formal accessibility target, compare the finished site with the applicable standard and get qualified review where needed.
For a concrete example, an AI-written contact form contains a visible “Email” label but no programmatic association with the input. A sighted reviewer may think it is complete. A screen-reader user may hear only “edit text”. The developer should link the label and control, give the error message a clear association, and test the submitted and failed states. The AI accessibility audit tutorial examines why automated suggestions cannot replace manual checking.
Another example is a gallery of frames for the optician. The model writes alternative text as “image of glasses” for every photo. That fails to convey useful distinctions if the image is part of choosing a product. The designer should ask what each image communicates and write concise descriptions based on verified details. Decorative images can be handled differently. The decision belongs to the page's purpose, not the model's instinct to fill every attribute with generic words.
Code quality is a handover issue
Generated code may work today and still be costly to maintain. Review its structure, dependencies, content storage, comments, naming, error states and security assumptions. A client should be able to update hours, services and team details without hunting through duplicated markup. If the site uses a content management system, the agency must build the editable fields and permissions promised in the contract. Pasting a static generated page into a preview does not provide an editing workflow.
A small illustrative fault: the same phone number appears in six page files. A client changes it on five and leaves an old number in the footer of the sixth. A shared component or structured content field would have prevented that divergence. Another fault is a booking form that says “Thanks, we will call” when its submission fails silently. The designer must test the actual endpoint, notifications, spam handling and fallback contact route, not just the visual form state.
Keep a record of third-party assets and licences. ChatGPT may suggest icons, fonts or stock images without confirming usage rights. Ask the client to provide approved assets or source them through the agency's normal process, then document where they came from. Do not treat a model-generated citation or asset credit as verified. The agency also needs a plan for backups, updates and account ownership after launch.
Protect existing search paths and measure the new journey
A redesign can fail even when its new pages look better. Before launch, list the old URLs, identify which still receive enquiries or links, and decide the destination for each. If a service page is renamed, arrange a permanent redirect where the hosting setup supports it and verify that the old address reaches the intended new page. ChatGPT can draft a mapping table from two supplied URL lists, but a person must confirm equivalence. Sending every retired address to the home page is rarely a useful answer for the visitor who followed a service-specific link.
Take an illustrative music-school site with an existing page for adult piano lessons. The new sitemap has a generic “Lessons” page, and the model suggests dropping the old page. A designer checks the actual enquiries: adults ask about lesson length and how beginner sessions work. The revised site keeps a dedicated page or a clearly matching destination with those answers. The designer then checks the page title and main heading, because a generated title such as “Learn With Us” does not tell a searcher which lesson the page offers.
Measure the action that the client asked the site to support. For an enquiry site, that might mean a successful form submission and a phone-link click, with a manual check that staff received the message. Decide what information to collect and retain before adding tracking. Do not ask ChatGPT to paste an analytics script everywhere simply because a template includes one. The agency should explain the measurement choice, the client's consent requirements and the limits of the count. A click is not necessarily a qualified enquiry.
One useful pre-launch rehearsal is to start from an old URL, navigate to the relevant new service, complete the form with test data, inspect the confirmation, and ask staff whether the message had the fields they need. Record the route and outcome. Repeat on a small screen with keyboard navigation. This single journey catches several classes of defect together: routing, page clarity, form behaviour and notification delivery. It is more informative than counting how many pages the model generated.
After launch, compare the first few real enquiries with the brief. If visitors ask the same question that the site was supposed to answer, the copy or hierarchy may be unclear. If staff receive empty or duplicate messages, revisit the form. Treat the first round of findings as design feedback and document changes for the client; do not claim success from a screenshot or a single traffic number.
What to put in the client's approval pack
Give the client a short decision pack at each milestone. After discovery: page-purpose table and unresolved content questions. After wireframes: page order, primary actions and mobile sketches. Before build approval: sample copy, visual direction and a list of features that require real integrations. Before launch: test results, known issues and the client's final sign-off. A design conversation is easier when the client can approve decisions one at a time instead of reacting to a large AI-generated page.
An illustrative handover entry for the optician might say: “Booking form tested with a valid submission and an empty required field; notification reached the nominated inbox; fallback phone link tested on a small screen; client owns the hosting account; service copy approved on the recorded date.” That is more useful than “AI-built website complete”. Include source files or repository access, credentials transferred through a secure channel, editable-content instructions, renewal responsibilities and a named contact for defects.
For the care agency example, the approval pack might also include a list of phrases withheld because the client could not substantiate them. For the music school, it may include tutor biography permissions. These are ordinary editorial decisions. ChatGPT can help track them, but the designer must know which version was approved and ensure the deployed site matches it.
When the honest answer is to use less ChatGPT
Use ChatGPT heavily when the job is exploring page structure, rewriting approved facts in a clearer voice or generating a small component that a developer can test. Use it lightly when the client has a highly distinctive visual identity, a complex service journey or unusual content governance. Do not let a generic template define the business merely because it emerges quickly. A designer earns their fee by resolving the hard choices in the brief and proving the site works for real visitors.
After launch, compare the site with the intended action: do visitors complete the enquiry, does staff receive enough detail to respond, and can the client update the content without calling the agency for every small change? Check logs and real user feedback rather than assuming the build is successful because the preview looked impressive. ChatGPT can design parts of a website for a client; the designer delivers the tested, owned and maintainable result.
Questions before an agency hands over AI-assisted design
Can I give a client a ChatGPT preview as the finished site?
A preview is useful for discussing direction, but it does not by itself prove that the site works on the client's hosting, at different screen widths, with a keyboard, or with the real content and forms. Test the deployed version and give the client the source files, access details and maintenance instructions agreed in the brief.
Should the client know that ChatGPT helped?
Check the contract and the agency's disclosure policy. Be clear about which parts were AI-assisted, who reviewed them, and what the client owns at handover. The useful assurance is the testing and accountability behind the result, not a vague claim that AI produced the design.
Does generated code remove the need for a developer?
It may speed up a small component or prototype. A developer still needs to inspect semantic markup, dependencies, performance, form handling, security, hosting and future edits. The amount of work depends on the site, so estimate from tested pages and integrations rather than the speed of the first generated mock-up.
Further reads
- AI Website Builder or Web Designer: What Each Really Costs — Compare a DIY builder with professional design costs.
- Website Maintenance Plan: Packages a Web Agency Can Add With AI — Define what happens to the site after launch.
- How to Write an AI Disclosure Statement for Your Website — Explain AI assistance to clients in plain language.
- Web Design Proposal Template: Draft Scope, Fees and Timeline With AI — A filled-in web design proposal: scope, phases, payment schedule, assumptions and revision limits, drafted with AI and checked by you.
- Website Development by AI: What Agencies Can Ship and What Needs Review — A review checklist for AI-built client sites: what an agency can ship quickly and where a human check is mandatory.
- AI Tools and AI Development: The Complete 2026 Guide — the AI hub, including every tutorial in the AI-for-business series.
Sources: OpenAI documentation, Working with writing blocks and code blocks in ChatGPT (help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt); W3C Web Accessibility Initiative, Accessibility Principles and WCAG 2 at a Glance (w3.org/WAI/). Accessed 4 November 2026.