Three paths. Each one ends in a file you can fill in or compare with the page you built.
First useful AI-built page
A founder who has a rough offer and no page yet.
Before you start: You can name the business, the offer, and one action you want a visitor to take. You do not need a design system.
You will finish with: A one-page brief another person can check, then hand to an agent without asking it to invent the business.
File to keep: A filled reference-to-brief worksheet for one page, even if the reference section says there is no screenshot yet.
- What is agentic design?See how an agent reads the brief, changes one named part, and checks the rendered page.
- Give a page a job, a reader, and an orderWrite the three lines an agent needs before it chooses sections.
- How to brief an AI website agentSeparate facts you can publish from ideas that are still proposals.
- Reference-to-brief worksheetFill the page-job rows. Leave the screenshot rows blank if you have no reference.
A reusable design system across pages
A founder or design engineer adding a second page to a site that already has one acceptable page.
Before you start: One page exists in code, with real fonts and colors, and you can open that code.
You will finish with: A second page that reuses the same type, spacing, color, and shell, with the differences written down.
File to keep: A design.md for a fictional or real project, plus the CSS custom properties it names, saved next to the site.
- What belongs in design.mdSee which decisions belong in the file and which belong in CSS.
- What each project-instruction file should doPut visual decisions, project rules, and review procedures in different files.
- Keep related pages consistentDiagnose drift by comparing tokens, shell, and the rendered pages.
- Clean design.md templateCopy the template and replace every Harbor Ledger fact with your own.
Reference-led design and evaluation
Someone who has a screenshot they admire and needs a page that still fits their business.
Before you start: You have permission to study the reference. You know your own offer, proof, and primary action.
You will finish with: A brief that keeps useful layout decisions without copying the source business, a page built from components you can fill, and a written review of one real defect.
File to keep: A completed visual and mobile QA worksheet that names one issue, the correction, and what you rechecked.
- Turn a screenshot into a design briefKeep useful section order, spacing, image balance, and emphasis. Leave the source company's identity, words, and proof behind.
- Keep the page structure when you swap a componentSwap a block only when your content can do the job that block was doing.
- Review a generated pageCheck layout, keyboard behavior, and a phone width before you call the page ready.
- Visual and mobile QA worksheetUse the worked Harbor Ledger issue as the pattern, then record your own page.
