01 / Web Reference Design

A clearer brief for
your next website.

For people planning a website with an AI coding tool. Turn a vague request into an editable brief about the audience, page action and design references, then use the companion instructions to build and check the page.

Create a design brief Explore the tool

Who it is for: People building or improving websites with an AI coding tool.
The job: Explain what a page needs to do and turn useful references into specific design decisions.
Why use it: A guided checklist keeps requirements together instead of scattered chat instructions. Working examples show how those decisions become a page.

FIELDNOTE after: a large architectural image, clear heading and enquiry action. — After · the running responsive example. FIELDNOTE is a fictional studio; the architectural image is an AI-generated concept. The before fixture deliberately contains defects.

“Make it look better” leaves too much unsaid.

A coding agent can produce a page quickly. It still needs to know who will use it, what they came to do and which parts of a visual reference are useful. A gallery alone doesn’t make those decisions.

Web Reference Design brings those questions into the workflow. The brief composer helps describe the task. The downloadable skill gives the agent a reference-led method for building and checking the result.

What I built and checked.

I used AI to build the browser brief composer and connect it to reusable instructions and working examples. I checked required fields, copied and downloaded output, and the examples’ preview-and-edit flows, then revised the pages from the rendered results.

Try one real task.

Create the brief. Describe a page, its audience, the action that matters and what needs to stay.
Use a reference for a reason. Identify the layout, typography or interaction that helps this particular page.
Inspect the result. Review the running page at desktop and mobile widths, and use its important controls.

Start your brief Use the FIELDNOTE example

The example is an interface you can use.

FIELDNOTE includes a working enquiry preview. Try submitting with missing fields, enter a sample enquiry, preview it and return to edit. It creates a local preview; it does not send a message to a real studio.

The project also includes a bicycle workshop example with service comparison and an appointment preview. It uses a different direction because the audience and task are different.

Source, licenses & recorded checks

This project combines a portable design workflow, a reference catalog, runnable examples and a brief composer. It shows how to direct a coding agent from a clear task through implementation, rendered review and revision.

Use the companion instructions in your own AI coding tool. The browser composer organizes the request; implementation happens in the coding tool. External references retain their original licenses. Examples use fictional businesses.

The starting reference collection is credited to Lê Huy Thái. Project provenance records the source material and additions.

Inspect recorded checks ↗ · Sources and provenance ↗

Next / An operations reliability case