The AI Web Design Workflow
The end-to-end process, where AI helps and where it doesn't, tool categories, and the one-page client brief.
AI can build web pages fast, but you still decide who the site is for and whether the result is good. Follow the same steps every time: brief, structure, style, build, words, test, launch. Keep your skills where AI is weakest: strategy, taste and checking.
- Brief
- A short document that says what the site must do and for whom.
- Primary action
- The one thing a visitor should do, like call or book.
- AI site builder
- A tool that turns a text prompt into a working web page.
AI is fast at building. You keep strategy, taste and checking.
AI has changed what one person can build in a day. A designer-developer with good judgment can now make a polished, responsive site in hours that once took a team weeks. But the tools make pages, not decisions. Someone still has to decide who the site is for, what it should make them do, what it should look like, and whether the result is good. This path teaches the workflow that makes sites you can hand to a client. It also teaches the judgment that makes AI output worth paying for.
The whole workflow, start to finish
- 1. Brief: the purpose, audience, offer, success measure and limits. A person leads. AI helps with interviewing and organizing.
- 2. Structure: a sitemap and page outlines. What sections, in what order, each with what job? AI drafts. You decide.
- 3. Direction: brand personality, color, type and spacing rules. You set the direction. AI explores variations.
- 4. Build: make and refine the page sections in code or a visual builder. AI does most of the typing.
- 5. Content: real copy, real photos and real proof. The client supplies the facts. AI helps shape the words.
- 6. Quality: responsive, fast, accessible and correct. This is mostly you, because AI output needs honest checking.
- 7. Ship: hosting, domain, forms and analytics. Follow a checklist.
- 8. Maintain: updates, fixes and improvements. This is a source of regular income.
Where AI helps most, and where it does not
AI is excellent at the steps that need a lot of generating. It turns a clear brief into a layout, writes routine code, makes variations, drafts copy and fixes small bugs. It is weak where taste, context and responsibility matter. It does not know what this client's customers really care about. It does not notice that the spacing feels off. It misses accessibility failures. And it cannot decide that the hero should say less. Your value sits exactly where AI is weakest. That is good news. It means the skill premium has moved to judgment.
The tools, by category
Particular products change every few months. So learn the categories, and test tools again from time to time on your own sample project.
- General AI assistants: think through strategy, write briefs and copy, explain code and review designs from screenshots.
- AI site and app builders: tools that turn a prompt into a page. They make working front-ends, often with React and Tailwind, and host previews. They are the fastest way from nothing to something you can see.
- AI code editors and coding agents: they work inside a real codebase that you own. Best for control, custom features and long-term upkeep.
- Design tools with AI features: layout ideas, making assets, prototypes and hand-off to developers.
- Image and 3D generators: hero images, illustrations, textures and mockups. See the AI Visual and 3D Creator path.
- Quality tools: Lighthouse, accessibility checkers and browser developer tools. AI does not replace them.
A no-code builder, or real code?
- Choose a builder or visual tool when the site is simple, the client wants to edit it, and speed matters more than being unique.
- Choose code, with an AI editor, when you need custom behavior, control of speed, connections to other systems, or you will look after it for years. Code you own can move. A builder's lock-in is a business risk for you and your client.
- Many professionals prototype in a builder, then rebuild or export into a repository they control.
The project brief template
# Project brief - {{client_name}}
1. What does the business do, and for whom? (one paragraph)
2. What is the ONE action a visitor should take? (call / book / buy / sign up)
3. Who are the top 2 audiences and what do they worry about before acting?
4. What proof exists? (reviews, case studies, numbers, certifications, logos)
5. 3 sites you like and WHY (describe qualities, not "make it look like X")
6. Brand: logo? colors? fonts? tone in 3 words?
7. Pages/sections needed; content that already exists; content that must be written
8. Must-haves: integrations, languages, booking/payments, CMS or self-editing
9. Constraints: budget, deadline, accessibility/legal requirements, existing domain/hosting
10. How will we know it worked? (leads/month, bookings, search rankings, etc.)- ✓AI speeds up making things. Your value is the brief, the taste, the checking and the responsibility.
- ✓Follow one workflow every time: brief, structure, direction, build, content, quality, ship, maintain.
- ✓Learn the tool categories instead of memorizing products. Prefer code you own for serious client work.
- ✓A one-page brief with a single main action prevents most rework later.
Brief a fictional client
- Invent a small business, such as a bakery, a physiotherapist or a consultant. Or use a real, friendly one.
- Fill in the brief template completely. For missing facts, write what you would ask the client.
- Ask an AI assistant to act as a skeptical creative director and point out the three weakest answers in your brief.
- Revise the brief and keep it. You will use it through the rest of the path.
Q1Where is a person's contribution to an AI-built site most valuable?show answer
The strategy and brief, the taste and direction, honest quality checking, and responsibility to the client. These are the areas where AI is weakest.
Q2Why prefer code you own to a locked-in builder for long-term client sites?show answer
You keep control and can move. You can host anywhere, change anything and avoid the risk of being tied to one platform, for you and for your client.
Q3Why should a brief name ONE main action?show answer
It points the structure, the words and the design at a single goal, and it makes success easy to measure.