Designing a website with AI now mostly means this: an AI agent writes the HTML and CSS, and you see the result in the browser straight away. The old detour, where someone draws the site in Figma and someone else rebuilds it in code, disappears. That saves time, but only if it is clear what should be built. Without that clarity the AI reliably delivers what it has seen most often, which is a page that looks like a thousand others.
This article walks through the process we use at Heidrich Digital and Kiekkist, step by step. It works with any AI agent that can write code.
Why Figma is often a detour for small sites
Figma is a drawing tool for interfaces, and in large teams it is hard to replace. Many people work on one design system at the same time, developers pick up measurements and colours, clients approve designs. A business website with eight to twelve pages is a different situation. A Figma file is a picture of the website, not the website. How a heading wraps at 390 pixels, how a menu behaves with a keyboard, how fast the page loads: you only find out in the browser.
When an AI agent designs directly in code, the browser becomes the canvas. Every draft is a real page you can open on your phone. Figma itself offers AI features that generate websites from a description, which tells you where things are heading. The line between design and build is getting thin.
Till Heidrich’s view: I clicked through hundreds, if not thousands, of website designs and WordPress themes until I couldn’t see the wood for the trees. Then I built my own tool that collects references, shows drafts as real pages and checks them. Kiekkist grew out of that tool.
Step 1: A brief that leaves nothing to guess
Most weak AI websites fail at the first sentence, not at the tool. “Build a modern website for an electrician” leaves everything open, and the AI fills the gaps with the average. A useful brief answers four questions first.
- Who visits the page? Homeowners in the area who want an EV charger, say, or industrial buyers who need a test report.
- What should they do? Call, send a form, book a slot, download a PDF. One action per page is the rule, two are the exception.
- What actually exists? Services, prices or price ranges, service area, opening hours, a named contact, your own photos.
- What makes the business different? A master craftsman’s certificate, an emergency service, a specialism, a family name going back three generations. Whatever goes here becomes a headline later.
Write the copy before the design, at least in rough form. An AI that gets real copy builds pages that fit that copy. An AI that gets placeholders builds pages for placeholders.
Step 2: Real references instead of adjectives
Words like “modern”, “clean” or “premium” mean something different to everyone. References are more precise. Collect two to five websites you like and write down what exactly you like about each: the size of the headings, the calm white space, how photos are cropped, the navigation.
Two rules help. References can come from other industries, and often that is better, because otherwise every plumber’s site looks like every other plumber’s site. And a reference is a direction, not something to trace. Layout, copy, images and colours stay your own. What you borrow is the level of quality and the feel.
Step 3: Three directions as real pages
This is where working without Figma pays off most. Instead of one draft, have the agent build three clearly different directions, each as a real home page with the real copy from step 1. Clearly different means other typefaces, another colour world and a different first screen. Three versions of the same layout in different colours won’t help anyone decide.
Look at each direction at two widths, on a large screen and on a phone. A draft that convinces on a desktop and turns into a wall of text on a phone shows up immediately. If you work for clients, send them the three directions as links. A person makes the decision, not the AI.
Step 4: Write the decisions down
Once a direction is chosen, it goes into a file that the AI agent reads before every further page. It lists typefaces, colours with their contrast values, spacing, corner radii, how buttons and forms look, and a few sentences on the tone of the copy. These fixed values are called design tokens.
Without that file every new page drifts a little. The contact page suddenly gets different spacing, the services page a new shade of grey. With it, twelve pages stay one system. Kiekkist designs ship this as a DESIGN.md and a token file, so an AI agent doesn’t have to guess when it adapts them.
Step 5: Check it before you fall in love with it
AI agents write code that works and still has faults. A case study from January 2025 looked at a page generated without accessibility instructions. Contrast ratios were as low as 1:1 to 2.2:1, the page had no main heading and no main landmark, and some controls could not be reached with a keyboard. Faults that automated tools could detect were fixed quickly, the others not completely. It is a preprint about a single page, so treat it as a pointer rather than proof.
The web wasn’t in great shape before AI either. The annual WebAIM Million survey found automatically detectable errors on 95.9 percent of the one million most visited home pages in early 2026, with 56.1 errors per page on average.
So every page gets checked twice:
- automatically, with a checker against WCAG 2.2 AA, plus load time and whether the page pulls in anything from third parties
- by hand, with the keyboard, 200 percent zoom, a screen reader spot check and a look at every page on a phone
How to do that without a paid tool is covered in Check your website’s accessibility yourself. Our checker is open source; the rules are on the open source page.
Step 6: Think about handover and running the site
A finished page is only the start. Who keeps the copy up to date? Where does the site live, who holds the keys to the domain, who installs updates? A static site that an agent produced as HTML or Astro is easy to run, but those questions still need answers. The guide Bought a theme, what now? goes through them in order.
When Figma is still the better choice
Skipping Figma isn’t a principle. Sometimes the drawing route is faster and safer.
| Situation | Better choice |
|---|---|
| Small business website, one person decides | build in code with an AI agent |
| Landing page or short funnel | build in code |
| Large design system across many products | Figma |
| Several designers working at the same time | Figma |
| Contract requires sign-off on a drawn design | Figma, or sign-off on a live link agreed in advance |
| App with many states and screens | Figma for the flows, then code |
If your clients are used to approving designs as pictures, explain the process first. A link to a real page is easier for most clients to judge than a drawing, as long as they know they are looking at a draft.
The shortest route: start from a checked design
Steps 2 to 5 take the most time. If you want to shorten them, start from a finished, checked design and adapt it with your AI agent: copy, photos, colours, sections. The gallery has designs for many industries, each with every page, a check report and a token file, and some of them are free. How it works explains the adapting step.
The typical signs of an AI website that skipped these steps are listed in How to spot an AI-made website, and the reasons behind them in Why AI-made websites all look the same.