Foundations
What is agentic design?
Agentic design gives an AI agent a page goal, the files it may change, a stopping point, and a rendered result to inspect.
By John McKeown · Updated 2026-09-21
On this page
Agentic design in plain English
Agentic design is a way of building or improving a website in which an AI agent can examine the available evidence, choose the next useful action, use tools to make a change, and inspect the result. The evidence may include your brief, current pages, design rules, source files, screenshots, analytics, or a reference website. The tools may include a code editor, browser, terminal, image generator, or deployment preview. The agent is doing more than returning a picture or a block of code. It is working through a design task with a goal, limits, and a way to check its own output.
How it differs from one-shot website generation
A one-shot generator turns one prompt into one proposed page. That can be useful for an early direction, but it treats the first output as the main event. An agentic workflow treats the first output as evidence. The agent can open the rendered page, compare it with the brief, find a weak section, revise the code, and check again. It can also preserve approved content while changing layout, or stop when a required asset is missing. The difference is control over the work, not the presence of a chat box or an agent label.
- A generator answers: what page can this prompt produce?
- An agentic workflow answers: what does this website need next, what am I allowed to change, and how will I know the change worked?
A small example
Suppose a new accounting firm has a working home page, but visitors cannot tell whether it serves contractors or large companies. A useful agent first reads the page and the firm's brief. It checks the available services and proof, then proposes a clearer page order. It may rewrite the heading, move the contractor services closer to the top, add a proof section using facts already supplied, and keep the existing enquiry form. It then opens the page at desktop and phone widths. If the new heading wraps badly or the form disappears below a long section, the agent revises the layout. Each change answers a known problem in the brief.
The working loop
Most agentic design work follows a short loop. Tell the agent who the page is for and what the page must help that person do. Name the files and tools it may use, the part of the page it may change, and the point where a person must approve the work. Open the rendered page and perform the visitor action that changed. If the price wraps badly at 390 × 844 px or the call button opens the wrong page, repair that failure and check the same action again. A founder can use this loop on one pricing section. A larger team can add written design rules, automated code checks, preview deployments, and human approval before publication.
- Start with the business facts, reader, page goal, current website, approved copy, assets, and design rules.
- Choose one change and state why it should solve the named problem.
- Name the files and tools the agent may use, the stopping point, and who approves a wider change.
- Open the rendered page and perform the visitor action that changed.
- If the check exposes a defect, correct its cause and repeat the same check.
What the agent needs from you
An agent cannot recover business truth from visual taste alone. Give it the audience, offer, desired action, useful proof, and constraints that affect the page. Mark copy or components that are already approved. Supply original images when they carry trust, such as the founder, team, product, or completed work. Name the evidence you want to see before accepting a change. A direction such as 'make it premium' leaves the agent to guess. A direction such as 'make the bookkeeping plan easy to compare on a phone without changing the prices' gives it a decision and a test.
Where agentic design can fail
The method does not make an agent a designer, researcher, or business owner. It can produce polished work that answers the wrong problem when the brief is vague. It can copy the visible shape of a reference while missing why that shape works. It may claim success after reading code without opening the page. It may also make broad changes when one section needed repair. Set boundaries around content, files, brand rules, spending, accounts, and publication. Require a human decision when the work changes a legal claim, price, customer promise, or live website.
How to start on a real website
Choose one page with a clear job and one visible problem. Give the agent the current page, a short business brief, any fixed content, and the exact part it may change. Ask for a rendered desktop and phone review after the edit. Check the result against the reader's task, not against the agent's explanation. Once that loop works, add reusable design rules and broader page work. This keeps the first experiment small enough to judge and gives you a repeatable way to improve the rest of the site.