AI coding agents for web design

Where it runs and what it can touch

An agent is started against a project folder, on your machine or in a cloud workspace the tool provides. Inside that folder it can read any file, write new ones and run commands: install packages, start a dev server, run a build. The code is ordinary files that you see, keep and move wherever you like. Nothing has to be exported, because it never lived anywhere else.

Whether an agent can also open a browser and look at the page it made depends on the tool and how you set it up. Where it can, ask it to. Where it cannot, ask for a build with no errors and do the looking yourself.

What that means for design

Three things follow. The agent can place your real images, because they are files in the folder and you can name them. It can keep one design system across pages, because you can ask for a tokens file first and tell it that every component reads from that file. And it can be told to check its own work at phone width before it reports back.

The cost is that you are running a project. You need a terminal or the agent's own app, a folder, and enough patience to read a plan before saying yes. If all you want is to see one idea on screen, that is more than the job needs, and a chat app is quicker.

How to brief an agent

Write a project brief, not a description of a page. Say what is in the folder, what the stack is, and the order of work: tokens, then shared parts, then pages, then the check. An agent given steps tends to finish one before starting the next, which is how the header on page three ends up matching the header on page one.

Tell it what to do when something is missing. "List it and stop" is better than letting it fill a gap with invented copy. The brief below is written this way.

What a brief for a coding agent should contain

• What is in the folder: where the copy and images are and how they are named.
• The stack, and what must not be added to it.
• A tokens step first: colours, type, spacing and timing in one file before any component.
• The order of work, as numbered steps.
• What to do when content is missing: stop and list it.
• A check step: run it, open it at two widths, report what was fixed and what could not be checked.

A prompt to start from

You are working in a project folder. Build a three-page site for [studio name], a [what it does] in [city]. Pages: Home, Work, Contact.

Before writing code, read ./content. copy.md holds every headline and paragraph. ./content/images holds [number] photographs, named in the order they appear. Use these files. If something is missing, list it and stop; do not invent copy and do not use placeholder images.

Stack: Vite + React + TypeScript, plain CSS. No UI library, no CSS framework.

Step 1, tokens. Create src/styles/tokens.css first: ground #f3efe6, ink #15140f, accent [#hex]; [typeface] for headlines at 96px desktop / 44px phone; [typeface] for body at 17px; spacing steps of 8, 16, 32, 64 and 128px; radius 4px; one duration, 0.5s; one easing, cubic-bezier(0.2, 0.7, 0.2, 1). Every component reads from this file. No raw values in components.

Step 2, shared parts: header, footer, button, image frame.

Step 3, pages. Home: the headline, one paragraph, then the first three projects as full-width 16:9 images with a title and year under each. Work: every project in a two-column grid with a 32px gap. Contact: [email], [address] and a form with name, email and message that posts to [endpoint].

Motion: images fade in over 0.5s as they enter the viewport, once. Nothing else moves. With prefers-reduced-motion they are simply there.

Phones, below 720px: one column, 16px margins, and the header collapses to the studio name and a menu button 44px tall.

Step 4, check. Run the dev server and the build. Open every page at 390px and 1440px. Fix horizontal overflow, missing images and text contrast below 4.5:1. Then tell me what you changed and what you could not check.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to choose an AI tool for web designFour questions that pick a kind of AI tool for a web design job: who owns the code, where your content is, who maintains the site and whether hosting is included.
• Using a design library with any AI toolThe four ways a template from a design library reaches an AI tool: the prompt, the project, the Figma file and an MCP server. Which route suits which kind of tool.

• Editors with an agent
• Chat apps
• App builders
• Landing pages
• Redesigning a site
• Figma to code