One test brief for any AI tool

Why a fixed brief

Most side-by-side comparisons give each tool a short request and judge the screenshots. That compares defaults. A tool whose default happens to suit the reviewer wins, and the result tells you little about what the tool does with a real brief.

A fixed brief removes taste from the test. The page is specified; the only question is whether it was built as specified. That is the question you will care about on a real job, when the design is yours and the tool's part is to carry it out.

How to run it

1. Copy the brief once into a text file. Paste from that file every time, so no run gets a slightly different wording.
2. Fill the image line the same way everywhere. If one tool in your set cannot read files, use the "none" option in every run. Otherwise put the same photograph in the same path for each.
3. Start each tool clean: a new conversation, an empty folder or a new project, with no earlier instructions in play.
4. Send the brief and nothing else. No follow-ups in the first round. Save the result and a screenshot at 390px and at 1440px.
5. Allow one follow-up, the same sentence for every tool: "List where the page differs from the brief and fix those points." Save the result again.
6. Score all results in one sitting with the list below.

What to look at in the results

• Words. Is every sentence from the brief there, and is anything there that the brief did not contain? Added taglines and extra sections count against a result.
• Type. Are the two named typefaces loaded? Is the headline 88px on desktop and 42px on a phone? Measure it in the browser's inspector.
• Colour. Do the ground, text and accent match the hex values, and does the accent appear on the button only?
• Spacing. Margins of 48px and 20px, 120px between blocks. One measurement of each is enough.
• Phone width. At 390px: one column, no sideways scroll, the table still a table, the header button still visible.
• Motion. One fade on load, one hover change, and nothing else. Turn on reduced motion in the system settings and reload.
• The report. Did the tool say what it added, changed or could not check, and was that true?
• What you can take away. A folder, a file or a hosted project, and how many steps it took to get it onto your own disk.

What this test does not tell you

It measures obedience on one small page. It says nothing about a forty-page site, a tricky 3D scene or how a tool behaves in the third hour of a session. It also goes out of date: tools change, so a result from last season describes last season.

Run it again with a brief of your own once you have the method. Swap in your real content and your real design values and the test becomes a rehearsal for the job.

The test brief

Build one page. Follow this brief exactly. Where it is silent, choose the plainest option and list what you chose at the end.

Output: if you can create a project, use Vite + React + TypeScript with plain CSS. If you can only answer in a conversation, give one self-contained HTML file. Either way: no UI library, no icon set, no images you were not given.

The page is for Fennel & Rye, a bakery. All of its text is below. Add none.
- Header: "Fennel & Rye" on the left; "Order for Saturday" on the right, as a button.
- Headline: "Bread at seven. Gone by ten."
- Paragraph: "We bake forty loaves a day in one oven. Order by Thursday noon and yours is set aside."
- Table, three rows: Country loaf, 900 g, 7.50. Seeded rye, 750 g, 8.00. Fennel bun, 90 g, 2.20.
- Footer: "Open Wednesday to Saturday, 7 to 13." and "14 Canal Row".

Image: [./test/loaf.jpg, 1600 × 2000 / none: leave a 4:5 frame in #d9d2c3 labelled "loaf.jpg"]. On desktop it sits to the right of the headline.

Look: ground #f6f1e7, text #1c1a16, accent #b4451f on the button only. Headline in Fraunces, 88px desktop / 42px phone, line height 0.95. Everything else in Inter at 17px; table figures right-aligned in tabular numerals. Page margins 48px desktop / 20px phone. 120px between blocks. Rules 1px #cfc7b6. Button 48px tall, radius 2px.

Motion: the headline fades in over 0.6s on load. The button ground darkens over 0.15s on hover. Nothing else. With prefers-reduced-motion, no animation.

Phones, below 700px: one column, the image under the paragraph, the table stays a table, the header button stays visible.

Finish by running or previewing the page at 390px and 1440px. Report any text you added, any value you changed and anything 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.
• Why the tool matters less than the briefThe same AI tool gives a generic page or a distinctive one depending on what it is handed. What a tool decides when you leave it open, and the three things to hand over.
• 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.

• Coding agents
• Chat apps
• App builders