19 min read
TL;DR
- An AI website design workflow covers four jobs, from defining the site’s purpose and writing design rules to reviewing the output and testing it in a browser.
- DESIGN.md holds the rules, Taste Skill and Impeccable guide and review the design, Playwright CLI tests the visitor journey, and img2threejs adds optional 3D.
- Start with documented direction, design review and browser verification.
- In a small authored demonstration, two test pages both showed a confirmation after a valid form submission, and only one of them sent the enquiry.
- The resources are published openly, but running them still costs money, starting with the AI coding agent.
AI coding agents such as Claude Code, made by Anthropic, and Codex, from OpenAI, can generate a website from a short prompt. The five open resources below help with the work around that generation. They record what the business needs, establish design rules, guide and review the output, and test what happens when someone uses it. Using an invented renovation company, we follow how those jobs fit together, where the tools overlap and when an optional 3D feature might be useful.
| Resource | What it is | Job in the workflow | Capability it supplies |
|---|---|---|---|
| DESIGN.md | A file format from Google Labs that combines structured design values with written rationale | Write down the design rules | Documented direction |
| Taste Skill | A portable agent skill with reference images and browser checks that pushes interfaces away from generic output | Guide how the agent designs | Design guidance and review |
| Impeccable | A skill with more than twenty commands for designing, reviewing and refining interfaces | Review and polish | Design guidance and review |
| Playwright CLI | A command line browser automation tool built for coding agents | Test the visitor journey | Browser verification |
| img2threejs | A skill that rebuilds an object from a reference image as Three.js code | Optional 3D | Optional visual feature |
Write a design brief the agent can follow
An agent working from a vague brief has to supply the missing decisions itself. It may choose a familiar layout, give several buttons equal weight or put the team photograph ahead of the work a customer came to see. The business usually has better grounds for those choices, provided someone writes them down. Answer these five questions in a sentence or two.
| Decision | The question to answer | Example |
|---|---|---|
| Audience | Who arrives, on what device, and what are they comparing you against? | Homeowners in the Gdańsk area planning a bathroom renovation, mostly on a phone, comparing three firms |
| Primary action | What single thing should a visitor do? | Send an enquiry that includes room size and a rough budget |
| Content priorities | What do they need to see, in what order? | Finished project photos first, price ranges second, the working process third, the team last |
| Brand direction | How should the site feel, and what should it never feel like? | Calm, practical and trustworthy, never luxury or showroom |
| Constraints | What is fixed regardless of design taste? | Polish first with English second, real project photos only, fast loading on mobile data, a privacy notice beside the form |
A request to “get in touch” leaves much undecided. An enquiry containing room size and a rough budget gives the agent a more specific action to design around, while requirements such as Polish first and real project photographs narrow its choices before anyone chooses a colour. Record those decisions in this template and keep it with the project.
Audience [who arrives, on what device, and what they compare you against]
Primary action [the one thing a visitor should do]
Content priorities [1, 2, 3, 4 in order of importance]
Brand direction [three words it should feel like, one it must never feel like]
Constraints [languages, content rules, performance limits, legal notices]Turn the brief into design rules with DESIGN.md
Once the brief is recorded, its decisions need to carry through to the page. A design rules file translates them into the colour of a button and the space around a photograph. DESIGN.md, published by Google Labs, Google’s experimental unit, combines two ways of recording those rules.
Structured values specify colours, typography, spacing and corner radii that software can read; prose explains why they were chosen and where they belong. The specification is in alpha, so the format may change.
The prose gives the values their purpose. A hex code identifies a green, while a sentence explains why the enquiry button should be the only green object on the page. The following file uses illustrative values for the invented renovation company. Check its field names against the specification before adapting it.
---
name: Renovation Studio
colors:
primary: "#1F2A2E"
neutral: "#F7F5F0"
tertiary: "#2F6F5E"
typography:
body:
fontFamily: Source Sans 3
fontSize: 18px
fontWeight: 400
lineHeight: 1.6
heading:
fontFamily: Source Sans 3
fontSize: 36px
fontWeight: 700
rounded:
sm: 4px
spacing:
md: 16px
section: 80px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.neutral}"
rounded: "{rounded.sm}"
padding: 12px
---The written rationale belongs below the values. The enquiry button gets the tertiary colour because sending an enquiry is the site’s primary action. Body text begins at 18px, subject to review on real devices, while photographs receive generous spacing because the brief puts finished projects first. Each choice gives the agent a reason it can carry into the next page. A rule that cannot be traced to the brief has little claim to stay.
A separate community library called DESIGNmd distributes files in the format, including interpretations of well known company styles. Those examples show how others organise their rules; they remain community interpretations. Our article Seconds to a landing page, and the design rules that kept it honest follows a published example of design rules steering AI landing pages.
Guide and review the design
With the rules recorded, the agent still has to make design decisions. Taste Skill supplies instructions that an agent can load before it builds an interface. It is a portable agent skill, intended to steer familiar-looking output toward clearer hierarchy, deliberate typography and more considered spacing. The project includes reference images and browser checks, although its documentation cautions that good design is not guaranteed. The model and the direction it receives still affect the result.
Those instructions carry preferences of their own. A skill that favours confident colour and distinctive type may work poorly for a renovation company whose brief asks for calm, practical and plain. We would give the brief authority over the DESIGN.md file, and the file authority over the skill, accepting a suggestion when it serves a decision the business has made.
That order of authority also gives a reviewer something to judge the draft against. Impeccable, created by Paul Bakaus for Claude Code and Codex, gives an agent instructions for designing, reviewing and refining interfaces. Its documentation describes more than twenty commands, including critique, audit and polish, which cover work such as typography and layout. For a business with a first draft, the critique is a useful place to begin.
The tools overlap because Taste Skill also includes browser checks and Impeccable also guides design. Describing one as the generator and the other as the reviewer is our shorthand for where a project might start.
A polish pass generally keeps the direction it inherits. If the hierarchy is wrong, it can produce a more refined wrong page, so the first review should return to the decisions in the brief.
- Is the enquiry button the most obvious element on a phone screen?
- Does the order of sections follow the content priorities, which are photos, prices, process and team?
- Do repeated components, such as project cards, look and behave the same each time?
- Does any copy claim something the business cannot back up, such as named testimonials, delivery times or prices, and are any placeholders left?
“Make the homepage better” asks the agent to choose its own standard. A more useful request would be “Critique the homepage against the brief, list where the primary action competes with other elements, and change nothing yet.” After reviewing the findings, the customer can request a narrower change, such as /impeccable polish on the enquiry form layout.
Verify the visitor journey with Playwright CLI
Once the design has been reviewed, the next step is to check how it behaves. Playwright CLI lets a coding agent operate a browser. It can open a page, click a button, fill in a form and inspect the requests that follow, alongside screenshots, lists of page elements and console messages. That makes it useful for checking behaviour a still image cannot establish. The tool requires Node.js 20 or newer, the JavaScript runtime, and normally runs the browser without a visible window.
Begin by checking the narrow layout, form validation and enquiry delivery.
- Narrow layout. Use the documented resize command to set a width and height. Open the menu, follow a link and confirm the page changes and the menu closes. This checks layout at that width. Touch input, the phone’s browser interface and real device performance still need a real phone.
- Form validation. Submit the enquiry form empty, then with an invalid email, and check that each field shows its own error.
- Delivery. Submit valid test data. Check that the confirmation appears, the network request succeeds, the console shows no errors and the enquiry reaches the test inbox or database with its fields intact. A confirmation and a successful response cannot establish delivery. A mocked request leaves delivery untested; say so in the write up.
A successful run establishes that the checked journeys worked in that browser at that width. It leaves the rest of the website, and the experience on other devices, to further review.
To see what those checks would catch, Claude wrote two single file homepages for the invented renovation company, and we ran the same scripted checks on both. Page A followed a short request for a Polish bathroom renovation homepage with a contact form, without a destination for enquiries. Page B followed the brief and design rules above, together with an instruction to post enquiries to a named address.
Because the instructions differed, this was an authored demonstration rather than a controlled experiment. The companion files contain the instructions, recorded afterwards, and a local server recorded the enquiries it received.
| Check | Page A | Page B |
|---|---|---|
| Horizontal overflow at 390 and 320 pixels wide | None | None |
| Menu opens, and closes after a link is followed | Passed | Passed |
| Main action fully visible in the first screen at 390 by 844 | Yes | Yes |
| Empty form submitted | Submission blocked by native browser validation | Four inline messages, one beside each field |
| Invalid email submitted | Submission blocked by native browser validation | A specific message beside the field |
| Confirmation shown after valid submission | Yes | Yes |
| Enquiry request sent | No request | POST, status 200 |
| Enquiry received by the test destination | Nothing arrived | Arrived with all four fields intact |
| Console errors or warnings | None | None |
| Tab stops with no focus outline or shadow (border colour changes not scored) | 3 of 8 (the three form fields) | 0 of 11 |
| Contrast of the main button’s text | 2.21 to 1 | 5.42 to 1 |
On Page A, a visitor could fill in the fields, submit valid data and receive a friendly confirmation, although no request left the form. The console reported no error. The screenshot looked like a successful submission, but the request list showed no call to the enquiry address and nothing reached the test destination.
The same run found several smaller problems. Page A removed the form fields’ default focus outline without adding an outline or shadow, although it changed the border colour on focus, which we left unscored. Its main button text had a contrast ratio of 2.21 to 1, below the 4.5 to 1 required at level AA for normal text; its hero text measured 4.48 to 1 against the lighter end of a gradient.
The page also supplied two named testimonials and a promise to finish on time and on budget. A real business would need evidence before publishing them.
These are observations about two pages and the checks applied to them. They do not establish how the prompts or tools perform more generally.
Accessibility checks worth running either way
The focus and contrast findings give the accessibility review a starting point. Some checks fit browser automation, including keyboard order and form errors. Others, such as reviewing contrast and overall usability, still need someone to examine the page. The contrast target used here comes from WCAG 2.2, the Web Content Accessibility Guidelines published by the W3C, the body that sets web standards.
- Visible keyboard focus. Tab through the page and confirm every interactive element is reachable in a sensible order and shows where focus is.
- Labelled fields. Every form field has a visible label that stays visible while someone types.
- Understandable errors. Each error sits next to its field and says what is wrong and how to fix it.
- Readable contrast. Text stands out from its background, and WCAG 2.2 level AA asks for at least 4.5 to 1 for normal text.
- Zoom behaviour. At 200 percent zoom, everything stays in view and every function still works.
- Consent banner. On a first visit, a consent banner leaves the enquiry form uncovered on a small screen.
The European Accessibility Act, an EU directive covering accessibility for products and services, has applied since 28 June 2025. Its scope includes ecommerce services, defined as remote services supplied at a consumer’s request with a view to concluding a consumer contract.
Microenterprises providing services are exempt, meaning fewer than 10 staff and turnover or a balance sheet of no more than EUR 2 million. Under the European Commission’s SME definition, a business in a larger group may have to count the group’s figures. Neither a staff count nor the presence of an enquiry form settles the position of our invented firm, and national laws differ.
Decide whether 3D is worth adding with img2threejs
img2threejs moves beyond the core workflow into an optional visual feature. Starting with a reference image, it writes a procedural model in Three.js, a JavaScript library for 3D graphics. The agent builds in stages, rendering each version and comparing it with the image, rather than extracting a mesh or using photogrammetry. As the project acknowledges, the reference cannot reveal an object’s hidden sides, so the model may be approximate, stylised or low polygon.
For the renovation company, a photograph is almost certainly the better choice. Customers want to see a finished bathroom in its room, and a 3D model adds loading weight on a phone. A business selling a configurable object has a stronger reason to offer rotation if the shape helps explain the purchase. Even then, an approximation needs to be labelled as an illustration or checked against the actual item.
For the renovation site, that leaves the simpler workflow of a brief and recorded design rules, one tool for design guidance, and browser checks of the visitor journey. Taste Skill can help shape what an agent generates, while Impeccable can help critique a draft. Their overlap gives most projects a reason to choose one first, and img2threejs can wait until there is a specific use for 3D.
None of this establishes that an offer is competitive or that the copy will persuade a customer. A website can pass every check here and receive no enquiries, and production security needs its own review. The resources are young, with commands and formats likely to change; our GitHub repositories for business teams hub follows setup steps, running costs and dated source checks.
Their immediate value is more modest and more concrete. A business can write down what it wants, inspect what the agent made and follow an enquiry beyond the reassuring message on the screen.
Frequently asked questions
What is an AI website design workflow?
It is the set of steps that closes the distance between a page that looks finished and a site that works. This guide covers four jobs, which are defining what the site is for, writing down the design rules, reviewing the output and testing it in a browser.
Do I need all five resources?
Three capabilities are enough to start, and they are documented direction, design review and browser verification. The five resources cover different jobs, so add the rest only when a project needs them.
What is DESIGN.md, and does it replace a brief?
DESIGN.md is a file format from Google Labs that pairs structured design values with written rationale. It records the rules, while the brief records what the site is for, so write the brief first and derive the file from it. The specification is in alpha, so expect it to change.
Should I use Taste Skill or Impeccable?
Choose Taste Skill if you want to shape what the agent generates, and Impeccable if you have a draft to critique. The two overlap, so one is enough to start. When their suggestions clash with your brand, the brief wins, then the DESIGN.md file, then the skill.
Does a screenshot prove my contact form works?
A screenshot only shows what rendered. In our demonstration, a page displayed a convincing confirmation message and sent no request, and a screenshot of that state looks like success, so check the request and the test destination.
Can Playwright CLI test my site on a real phone?
Playwright CLI can resize the browser to a phone width, and that checks layout at that width. Touch input, a phone’s browser interface and real device performance sit outside it, so keep a test on a real phone as a final step.
Does the European Accessibility Act apply to my site?
It can, and the answer depends on what you sell and how large the business is. The Act has applied since 28 June 2025 and covers ecommerce services. Microenterprises providing services are exempt, which means fewer than 10 staff and turnover or a balance sheet of no more than EUR 2 million, and a firm in a larger group may need to count the group’s figures. National laws differ, so check your own position before relying on this answer.
When is img2threejs worth adding?
Add it when 3D has a clear job, such as showing a configurable object whose shape matters to the purchase. A good photograph does the job for most service businesses, and an approximate model can mislead, so label it as an illustration or check it against the real item.
Are they free to use?
Public access does not establish the cost of using a resource. Each project’s licence governs how you may use it, so read it. The AI coding agent’s cost depends on your plan, and hosting your site or using any optional image or other services adds to the total.
Do they work with my AI coding agent?
Each project names its own supported agents and they differ, so check the repository of the one you plan to use. DESIGN.md is a file format, so any agent that reads text files can use it.
How we tested
On 28 October 2026 we ran Playwright CLI 0.1.22 with headless Chromium against two single file homepages for the invented company, written directly by Claude. A local server recorded every enquiry, and one script ran the same checks on both pages. We measured overflow at 390 and 320 pixels wide, menu behaviour, whether the first button fits the first screen, validation, the confirmation message, the enquiry request and whether it reached the server, console messages, focus outlines and shadows, and text contrast from the pages’ own colours.
The run left out real devices, other browsers, screen readers, speed and any test of whether either design persuades anyone. Playwright CLI is the only resource we ran. We reviewed DESIGN.md, Taste Skill, Impeccable and img2threejs through their public documentation and repositories, and none of those four was run for this guide.
Sources
- DESIGN.md specification from Google Labs
- DESIGNmd library of community design files
- Taste Skill repository
- Impeccable repository
- Playwright CLI repository
- Playwright documentation for page.setViewportSize
- img2threejs repository
- European Accessibility Act, Directive 2019/882
- European Commission SME definition
- WCAG 2.2
- Understanding WCAG 2.2 Contrast (Minimum)
Appendix, run the checks yourself
The CLI’s own skill file lists these commands.
playwright-cli open http://localhost:3000
playwright-cli resize 390 844
playwright-cli screenshot
playwright-cli snapshot
playwright-cli fill <ref> "Anna Test"
playwright-cli click <ref>
playwright-cli requests
playwright-cli consoleServe your page over HTTP, because the CLI refuses to open pages straight from disk. Use the element references printed by snapshot in place of <ref>. The requests command lists each call the page made with its status, and console summarises errors and warnings.
The resize command runs the Playwright call page.setViewportSize, which changes the viewport and nothing else. The run-code command accepts a script that uses the full Playwright page API, which is how we ran the checks above.
The downloadable evidence pack includes the instructions each page was written from (recorded afterwards), both pages, the local server, the check script, the raw results, server records, screenshots, checksums and reproduction steps.
Find more tools in our GitHub repository guides, with comparison tools in the IC Lab. Spotted a mistake? Write to us through the contact page. Our editorial guidelines explain how we handle corrections.