Glossary

Why it matters. A page can look finished and still be unusable. On the bakery’s order page a screen reader announced every quantity button as just “button”, so a blind customer couldn’t tell which loaf they were adding. Nobody finds that by looking.

Example. QA used the bakery’s order and menu pages with a keyboard, a screen reader, a phone and 200% zoom, and had an AI that didn’t build them review them too. Ten things turned up. A tool found one of them; six took a person using the page.

Watch out. A clean automated scan doesn’t make a page accessible, and neither does your own screen reader pass: record that as your own check. User testing means people from the site’s audience using it. For accessibility, that means disabled people.

Related: WCAG, Keyboard access, Screen reader, Contrast ratio, Responsive design, Automated and human checks

Learn it: Test a page with keyboard and screen reader, Fix accessibility at the source, Build color roles and check contrast

On the site: Test: One page, inspected

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), four principles: perceivable, operable, understandable, robust; Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. It gives you a researched starting point instead of a mood word. Every rule says whether a source states it, it was seen in the work, or it’s Aesthetary’s own reading, so you know which rules make the look what it is and which you can change with a reason.

Example. The bookbinder’s first direction leans on Quiet Luxury. The literal move for luxury is a thin serif, but the Quiet Luxury record lists thin serifs as unreliable: they can occur, and they define nothing. So the direction sets everything in one plain sans, in two weights.

Watch out. With a capital A it’s the catalog entry; with a small a it’s the everyday word for a look. An Aesthetic isn’t a template: it says what makes the look itself, not what your pages say. Only the ones marked Ready to Build come with structured rules and an agent guide your coding agent can read.

Related: Visual language, Element, Design grammar, Agent guide, Visual direction, Claim

Learn it: Read an Aesthetary record, Read a visual language area by area

On the site: Learn: Vocabulary, Design: Where the looks come from

Source: Aesthetary skill: Read an Aesthetary record; Aesthetary skill: Choose a typeface and build a type scale

Why it matters. An agent that starts from a one-line request fills every gap with the average website: a stock headline, three feature cards, a testimonial nobody gave. Adjectives like “modern” don’t survive the handoff. File paths do.

Example. Kiln Lane’s brief opens with paths, not summaries: @content/manuscript.md every word, approved, @design/tokens.json type, color, spacing, then Nothing outside these files is a decision. The studio has no reviews yet, so its do-not list includes invent reviews, prices, dates or awards.

Watch out. It isn’t the standing instructions file, which holds the rules for every session, or an Aesthetic’s agent guide, which describes a visual language and can be one of the files the brief points to. Keep the do-not list short and put the lines that would hurt the client first: Anthropic warns that an overlong instructions file gets its rules ignored.

Related: Coding agent, Standing instructions file, Agent guide, Plan mode, Design specification, Website brief

Learn it: Brief an AI agent before it writes code, Write an art-direction brief that survives the build, Turn the direction into a specification and tokens

On the site: Build: The agent’s brief, and reading its plan, Design: Why AI needs decisions, not adjectives

Source: Aesthetary skill: Brief an AI agent before it writes code; Aesthetary skill: Write an art-direction brief that survives the build; Best practices for Claude Code (Anthropic · Claude Code), “Bloated CLAUDE.md files cause Claude to ignore your actual instructions”

Why it matters. An agent told “make it Swiss” builds the average of everything it has seen called Swiss. The guide separates what’s established from Aesthetary’s interpretation and from what nobody has established, so the agent can treat the three differently.

Example. prompt/swiss-style.md starts by telling you to paste it into your agent before asking for any design or build in this visual language. In it, flush left and ragged right is seen in the work, the column count for screens is Aesthetary’s reading, and the contrast line is a floor for any site.

Watch out. Your standing instructions file is about your project; an agent guide is about a visual language, and a build often uses both. Neither replaces your own design specification: your project’s decisions belong in your brief and your tokens.

Related: Aesthetic, Markdown, Agent brief, Standing instructions file, Coding agent, Design specification

Learn it: Read an Aesthetary record, Brief an AI agent before it writes code, Turn the direction into a specification and tokens

Source: Aesthetary skill: Read an Aesthetary record; Aesthetary skill: Brief an AI agent before it writes code

Why it matters. It explains most of what goes wrong. A model knows nothing about your business that isn’t in the conversation or the files it’s shown, so it writes the most typical version of whatever is missing, and writes it fluently.

Example. For a review a client will see, Get an honest AI review runs the same prompt past a model from a different company as well, because two model families come with two sets of habits. Where both flag the same thing, pay attention. Where only one does, check it yourself.

Watch out. The same model can sit behind very different tools: in a chat window it hands you text, and inside a coding agent it can change your files. “Model” has an unrelated meaning on this site too: a content model is the list of parts each kind of page holds.

Related: Artificial intelligence (AI), Coding agent, Session, Prompt, Made-up fact, Content model

Learn it: Decide first, then ask the AI, Get an honest AI review, Find your category's default

Source: Aesthetary skill: Get an honest AI review; Aesthetary skill: Find your category's default; Aesthetary skill: Decide first, then ask the AI

Why it matters. Each one is small, but together they make a page look like every other generated site, and they sit exactly where the brief needed a real decision. A stat bar can also carry a made-up fact, so ask where the number came from.

Example. The bookbinder’s first draft had a centered “Timeless craftsmanship” hero with two buttons, three icon cards (Handmade · Bespoke · Sustainable) and “500+ books bound”. The fixes: one sewn spine at full width with one action; the cards cut, because the photographs already prove it; the number removed until the bindery confirms one.

Watch out. Nothing on the list is banned. A centered headline can be exactly right if it traces back to the brief and you can say why. Aesthetary’s costume test, from the Quiet Luxury record, checks from the other side: make the palette and the serif ordinary and halve the whitespace. If the page no longer reads as luxury, it was relying on the costume.

Related: Art direction, Category default, Made-up fact, Visual direction, Website brief

Learn it: Spot AI-design tells, Write an art-direction brief that survives the build

On the site: Design: Common design mistakes

Source: Aesthetary skill: Spot AI-design tells

Why it matters. Without it a screen reader falls back on whatever it can find, often the file name. Every picture that carried information turns into noise.

Example. On the bakery’s home page the hero photo was read out by its file name, which fails WCAG 1.1.1. The fix went into the content model: alt text became a required slot, so nobody can fill in a page without writing one.

Watch out. A purely decorative image gets an empty one, alt="", so screen readers skip it. And an image that’s also a link needs words for where the link goes, not a description of the picture.

Related: Screen reader, Accessibility, WCAG, HTML, Content model, Slot

Learn it: Fix accessibility at the source, Test a page with keyboard and screen reader

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), success criterion 1.1.1 Non-text Content; Web Accessibility Tutorials (W3C WAI), Images tutorial: decorative and functional images; Aesthetary skill: Fix accessibility at the source

Why it matters. Most art direction dies quietly in the build: by page five the agent has made a pleasant, generic site in the right colors. A brief precise enough that drifting breaks one of its sentences is what keeps page five on the idea.

Example. The bookbinder’s brief has six parts. The concept: “You can see how every book is made.” The decisive move: one construction photo, full width, before any text. The motif: the stitch, a dashed line joining a caption to the detail it names, once per section. Then references written as principles, a not-doing list (NOT a headline laid over a photo), and the page outline, the order every page is built in.

Watch out. “Timeless craftsmanship” isn’t a concept, because any page passes it, and a brief with three decisive moves has none. Tell the agent in its standing instructions to stop and ask before breaking a line of the brief: an agent allowed to edit the brief can make it agree with whatever it built.

Related: Visual direction, Design specification, AI-design tell, Standing instructions file, Coding agent, Positioning

Learn it: Write an art-direction brief that survives the build, Develop three different directions, then choose, Review the work against its brief

On the site: Design: From direction to design specification

Source: Aesthetary skill: Write an art-direction brief that survives the build

Why it matters. It writes fluently whether or not it knows the answer. Aesthetary’s method follows from that: you decide first, keep decisions and facts in files, and check what comes back before it reaches a page.

Example. Given the bakery’s brief, it drafts homepage copy in seconds. It can’t know the founding year if nobody wrote it down, can’t remember yesterday’s session, and can’t tell you which of its sentences are guesses.

Watch out. The word covers far more than this. Spam filters, route planners and chess programs all get called AI. When a stage page says AI, it means the kind that writes, and usually a coding agent working on the project’s files.

Related: AI model, Coding agent, Made-up fact, Decide first, Prompt

Learn it: Decide first, then ask the AI, Never invent a fact

On the site: Prepare: decide before you ask the AI

Source: Aesthetary skill: Decide first, then ask the AI; Aesthetary skill: Never invent a fact

Why it matters. A site written for everyone answers nobody’s first question, because different people arrive with different first questions. Naming who it’s mainly for decides what the first screen says.

Example. Ines’s framing workshop is mainly for someone with something to frame: they arrive with a poster or a photo and no idea what framing costs, need a rough price before making the trip, and are done once they’ve sent a photo and a size. Someone a friend sent is also served, further down.

Watch out. It comes from evidence (interviews, reviews, what people search for), not from the owner’s picture of an ideal client. Ask where the last three clients came from, not who the ideal one is.

Related: Customer language, Primary action, Positioning, Visitor journey, Search intent, Website brief

Learn it: Design the visitor's path to an honest next step, Write a one-page website brief, Mine customer language from reviews

On the site: Plan: Who is it for?

Source: Aesthetary skill: Write a one-page website brief; Aesthetary skill: Design the visitor's path to an honest next step

Why it matters. A tool only reports what it was built to detect. On the bakery’s pages it caught the faint captions and nothing else: the other nine findings took a person using the page, or judging what the AI reviewer said.

Example. The Test stage lists 21 checks: 8 a machine can run, 7 that need a person using the page, and 6 that only judgment can make. WAVE, one of the eight, flags missing labels and contrast failures, and still can’t tell you whether the page is accessible.

Watch out. A passing automated test is evidence, not approval. Record a human check under the name of whoever ran it, with the tools and versions they used, and never write it up as user testing.

Related: Quality assurance (QA), Lighthouse, QA record, Pre-send gate, Independent AI review, Accessibility

Learn it: Run a pre-send gate, Test a page with keyboard and screen reader, Fix accessibility at the source

On the site: Test: Check a site

Source: Aesthetary rule: A passing automated test is evidence, not approval; WAVE (WebAIM), as the Test stage’s Check a site list describes it; Aesthetary skill: Test a page with keyboard and screen reader; Aesthetary skill: Run a pre-send gate

Why it matters. Visitors get the finished files, not the ones you edited, so that’s where checks run. A page nothing links to yet is still reachable by its address, and only a search of the finished files finds what’s left on it.

Example. The bakery’s pre-send gate searched the finished files with grep -rn 'CONFIRM' dist/ and got one line back: dist/about.html:41 Registered as [CONFIRM: the company’s registered name]. The sentence came out until the client confirmed the name, and the whole gate ran again.

Watch out. The word does three jobs. Build is also the stage where the site gets made, and “run the build” means doing the step. A review build is one particular result, put at a web address for the owner to check.

Related: Stage, Deploy, Review build, Pre-send gate, Component, Repository

Learn it: Assemble the site without losing the content, Run a pre-send gate

On the site: Test: Before it’s sent

Source: Aesthetary skill: Run a pre-send gate; Aesthetary skill: Assemble the site without losing the content

Why it matters. If you don’t find it on purpose, you design it by accident, because an AI draft lands there whenever the brief doesn’t say otherwise. Once it’s written down in a few lines, you’ll spot it everywhere, including in your own first draft.

Example. Five fictional accountancy firms, each homepage captured at the same width: four headlines lean on “trusted”, three palettes are navy, two heroes are handshakes. Written down, the default is trusted, expert, navy, handshake and “we take the stress out of your finances”. Firm E, with “Numbers, sorted.” over a photo of its owner, is the one you’d remember.

Watch out. Not every shared habit is a cliché. An emergency plumber’s number at the top, prices where visitors look for them and a clear booking button are conventions, and breaking them makes a site harder to use. Ask what a visitor would lose if the thing disappeared. If the answer is nothing, it’s cliché, and moving away from it still needs a reason from your evidence.

Related: Positioning, AI-design tell, Site audit, Customer language, Visual direction

Learn it: Find your category's default, Spot AI-design tells, Develop three different directions, then choose

On the site: Research: What already exists?

Source: Aesthetary skill: Find your category's default

Why it matters. Launch day is the most carefully a site will ever be checked. Then a page gets edited, a photo goes up at full size, and nobody runs the checks again. A routine without a name on it stops the month you move on to the next client.

Example. Kiln Lane’s, four months after launch: on every deploy, a Lighthouse CI speed budget, a search for placeholders and a link check; on the first Monday of the month, the studio manager reads Search Console and the Core Web Vitals report; when prices change, the claims list again. The budget failed once, on a 3,800px photo uploaded to /classes. That was the routine working.

Watch out. A small site’s Core Web Vitals report usually shows no field data at all, because Chrome only reports pages with enough visitors and doesn’t publish the threshold. Record “no field data” and lean on the deploy budget and a test on a real phone.

Related: Launch, Handover, Deploy, Lighthouse, Core Web Vitals (LCP, INP, CLS), Lab data and field data

Learn it: Set a post-launch check routine

On the site: Improve: what it keeps

Source: Aesthetary skill: Set a post-launch check routine; Lighthouse CI (GoogleChrome on GitHub); Chrome UX Report methodology (Chrome for Developers), Popularity threshold not disclosed.

Why it matters. A website makes promises to strangers in the business’s name. Each claim gets a source and a status before it goes live, and the ones without a source become visible placeholders or come out.

Example. A butcher’s draft says “Award-winning sausages”. No source turns up, so the line becomes [CONFIRM: award name, year, who gave it]. “Trading in the town since 2004” stays, because the company register says so.

Watch out. Pictures are claims too: a photo captioned “our workshop” says the workshop is theirs. On Aesthetic pages the same word means something narrower, a rule in a research record, labeled by its kind (Documented, Our reading and so on).

Related: Claims list, Claim status, Source, Placeholder, Made-up fact, Proof

Learn it: Map every claim to its source, Never invent a fact, Keep content and evidence true over time

On the site: Research: What does the evidence actually say?

Source: Aesthetary skill: Map every claim to its source; Aesthetary rule: Never invent a fact; claims carry their kind; no placeholder reaches a reachable page

Why it matters. The status decides what happens next. Verified goes on the page; Client says is often fine for things only the owner knows; Conflicting stays off until it’s resolved; No source never ships as a sentence. Put the status next to the claim in the copy file, so whoever edits next can see it.

Example. Two rows for a fictional butcher’s. “Family-run since 1998” is Conflicting: the company register says the business formed in 2004, and the owner’s email says her mother began selling at markets in 1998, so the fix is wording both sources support. “Award-winning sausages” is No source, so it becomes [CONFIRM: award name, year, who gave it].

Watch out. Conflicting doesn’t mean you pick the version you like. That’s still a guess, just one with a link next to it. After launch, Improve shows the same four statuses in lower case beside the date each claim was last checked, because a verified claim goes stale when its source changes. Aesthetic records label their own claims differently, by kind (Documented, Our reading).

Related: Claim, Claims list, Source, Placeholder, Source inventory

Learn it: Map every claim to its source, Keep content and evidence true over time

On the site: Research: What does the evidence actually say?

Source: Aesthetary skill: Map every claim to its source; Aesthetary skill: Keep content and evidence true over time

Why it matters. It turns “is that true?” into a lookup. The standing instructions can tell the coding agent to take facts only from this file, QA checks the pages against it, and when a price changes it tells you every claim that repeats it.

Example. Kiln Lane’s list after launch carries lines like 'Classes from £28' verified prices.pdf v3 and 'Taught by Ana Ruiz' client says owner email. The bakery’s CLAUDE.md points at its list in one line: Facts: only from claims.md. Unknown = [CONFIRM: …].

Watch out. Two paths name the same file. Research saves it as research/claims.md, and some skills keep claims.md at the top of the project; pick one and point everything at it. It isn’t finished at launch, either: when a source changes, every claim that cites it is marked stale and checked again.

Related: Claim, Claim status, Source, Source inventory, Standing instructions file, Coding agent

Learn it: Map every claim to its source, Keep content and evidence true over time, Never invent a fact

On the site: Research: What does the evidence actually say?, Improve: Keeping claims true after launch

Source: Aesthetary skill: Map every claim to its source; Aesthetary skill: Never invent a fact; Aesthetary skill: Keep content and evidence true over time

Why it matters. It can do a morning’s work in minutes, and it can delete a page nobody mentioned just as fast. The habits in Prepare (a save point first, a plan before multi-file changes, decisions in files) exist because it acts instead of suggesting.

Example. Asked to add an Order Ahead page to the bakery site, the agent read the project, proposed five steps and, once they were approved, created src/pages/order.astro and added “Order” to the nav in Header.astro itself. One of the five steps deleted the /wholesale page, which nobody had asked for.

Watch out. The skills use Claude Code, from Anthropic, and Codex, from OpenAI. Check the mode before you start: from version 2.1.283, Claude Code starts in auto mode, where a second model approves most actions instead of you. Codex sets its limits with sandbox modes and approval policies, which you change with /permissions.

Related: AI model, Plan mode, Standing instructions file, Session, Repository, Commit

Learn it: Steer a coding agent with plan mode and Esc, Brief an AI agent before it writes code, Keep your project in files the AI can read

On the site: Prepare: The bakery’s project folder, and what you need to start

Source: Choose a permission mode (Anthropic · Claude Code), auto mode is the starting mode from v2.1.283; a classifier reviews actions; Agent approvals & security (OpenAI · Codex), sandbox modes, approval policies, /permissions; Aesthetary skill: Steer a coding agent with plan mode and Esc

Why it matters. One color doing two jobs means a visitor can’t tell a button from a decoration. Naming colors by job also gives you a better answer when a brand color fails contrast: you move it to a job it can do.

Example. The bookbinder’s logo file has oxblood and gold. Oxblood becomes --action, at 8.1:1 on the paper ground. Gold measures 2.0:1 as text on paper, so it changes job: it sits behind dark text on buttons and the order panel, and it’s a text color only in the dark footer. The client keeps the gold; it just does different work.

Watch out. Take colors from a source: the logo file, the site’s own CSS, the printed brand guide. A color picked from a photo of the shop wall doesn’t count, because the lighting and the camera changed it.

Related: Contrast ratio, Design token, Accessibility, Design specification, Design system

Learn it: Build color roles and check contrast, Take brand colors from evidence

On the site: Design: From direction to design specification

Source: Aesthetary skill: Build color roles and check contrast; Aesthetary skill: Take brand colors from evidence

Why it matters. Make one before a coding agent touches anything. If its change goes wrong, the project goes back to exactly this point, with nothing to untangle by hand.

Example. The bakery’s history shows 5f02d7e CHECKPOINT before order page, then the agent’s work, then e72d0b1 Revert "Footer links: agent build", which undid one bad change and kept the order page. The revert is a new entry of its own, so the footer work is still in the history to look at.

Watch out. Only what you’ve added goes in. A new or changed file isn’t included until you add it (git add), and new files listed in .gitignore are skipped on purpose. A commit also stays on your computer until you push it somewhere such as GitHub (git push), so on its own it isn’t a backup.

Related: Git, Repository, Terminal, Coding agent, Session

Learn it: Use Git as a checkpoint before an AI agent changes your build

On the site: Prepare: Save points and the AI log

Source: Git reference documentation (Git (git-scm.com)), git-commit, gitignore and git-push; Reverting a commit in GitHub Desktop (GitHub), a revert is itself a commit; the original stays in history; Aesthetary skill: Use Git as a checkpoint before an AI agent changes your build

Why it matters. Built once, a fix lands everywhere the piece appears. Built from what a coding agent imagines instead of from the content, you get parts nobody asked for: a stats band with numbers nobody gave you, or a logo wall with no logos.

Example. Fell and Tarn, a walking-holiday company, needs three: WalkCard from the Walk page type’s slots, WalkList for the listing, and FilterBar for filtering by region and difficulty. No carousel, stats band or testimonial block, because no slot asks for one.

Watch out. A variant needs a content reason you can name. Fell and Tarn’s text-led card exists because some walks have no photo. A dark card “for variety” has no reason behind it, so it goes.

Related: Component states, Slot, Content model, Page type, Design system, Fix at the source

Learn it: Build components from content slots, with every state, Fix accessibility at the source

On the site: Build: Every state, and forms that fail honestly

Source: Aesthetary skill: Build components from content slots, with every state

Why it matters. A piece you’ve only seen with perfect content isn’t finished. Real content is uneven, connections drop, and an error with nothing but an apology on it is a dead end for the visitor.

Example. Fell and Tarn’s walk list, written down before the agent built it. Empty: “No walks match.” and a Clear filters button. Loading: fixed-height rows, so nothing jumps when the data lands. Error: “Dates unavailable right now.” and the office phone number. Long: the name wraps to two lines; distance and days never wrap.

Watch out. Dummy text hides the long state, because it’s always the same length. Test with the client’s longest real value at your narrowest width, blank each optional slot in turn, then slow the connection and switch it off.

Related: Component, Slot, Content model, Width sweep, Focus indicator, Keyboard access

Learn it: Build components from content slots, with every state, Design forms for when things go wrong

On the site: Build: Every state, and forms that fail honestly

Source: Aesthetary skill: Build components from content slots, with every state

Why it matters. Without it, a coding agent fills each page with what pages like it usually contain, and fills the gaps with whatever sounds plausible. With it, the agent knows every part, its source, and when to leave a part empty and say so.

Example. The bike workshop’s page type for a bike for sale, from the Structure stage: price 1 stock list; never 'price on request', photos 1+ our own photos of this bike, fit help 0-1 link to book a fitting. Filling it in for one real bike showed the stock list had no frame sizes, so that went back to the client as a fact the business needs to start keeping.

Watch out. Name each part for what it carries (“A customer’s words”), never for the component that might show it (“Testimonial carousel”). A component name decides the design before anyone knows what’s on the page, and it usually decides the average.

Related: Page type, Slot, Site plan, Copy, Component, Coding agent

Learn it: Build a content model from page types and slots, Build components from content slots, with every state, Write specific, true copy for each slot

On the site: Structure: what it leaves in the folder

Source: Aesthetary skill: Build a content model from page types and slots

Why it matters. Low-contrast text is hard or impossible to read for many people with low vision, and for anyone on a phone in bright sun.

Example. WCAG 2.2 at level AA asks for 4.5:1 for normal text, and 3:1 for large text (18 point, or 14 point bold) and for the edges of controls, focus indicators and icons. The bookbinder’s gold on its paper measures 2.0:1, so gold stops carrying text and becomes the field behind dark button labels, at 7.7:1.

Watch out. Passing the number doesn’t make a pair comfortable to read. Some tools also show APCA, a newer method that isn’t part of WCAG 2.2, so check which one yours reports before you quote a figure.

Related: WCAG, Color role, Design token, Accessibility, Fix at the source

Learn it: Build color roles and check contrast, Fix accessibility at the source

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), success criteria 1.4.3 and 1.4.11; Understanding Contrast (Minimum) (W3C WAI), large scale: at least 18 point, or 14 point bold; APCA contrast algorithm (Myndex Research), not part of WCAG 2.x; Aesthetary skill: Build color roles and check contrast

Why it matters. It’s the number most changes are meant to move, so it’s also the one most often pushed by tricks: a false “only two left”, a countdown that never ends. Honest work moves it by answering the visitor’s questions in order, with proof where they hesitate.

Example. Kiln Lane’s class page gets about 2,000 visits a month, and 2% start a booking (the skill’s invented numbers). The studio counts booking_sent only when the server confirms it, so a form that failed doesn’t count as a booking.

Watch out. The IA Library’s “Conversion point” is the part of a page where the action happens, such as the form or Dates and booking. And a small site rarely has the traffic to prove a change moved the rate: at Kiln Lane’s numbers an A/B test would take over three months.

Related: Primary action, Metric, Measurement plan, Web analytics, Dark pattern, Goal (and wish)

Learn it: Change one thing and know whether it worked, Design the visitor's path to an honest next step, Decide what to measure before launch

Source: Aesthetary skill: Change one thing and know whether it worked; Aesthetary skill: Decide what to measure before launch; Aesthetary skill: Design the visitor's path to an honest next step

Why it matters. Analytics tags and outside widgets are where it usually comes from, often without whoever built the site noticing. A banner that asks and then loads every script anyway is one of the things an audit of an existing site flags.

Example. Kiln Lane uses Vercel Web Analytics, and its measurement plan records what Vercel says about it: no third-party cookies, a visitor identified by a hash made from the request, the session discarded after 24 hours. The plan links Vercel’s own privacy page and leaves the banner question to someone qualified.

Watch out. Whether a site needs a consent banner is a legal question, and Aesthetary doesn’t answer it. Ask someone qualified, and ask again when a new tool goes in, because one added script can change the answer.

Related: Personal data, Web analytics, Measurement plan, Site audit

Learn it: Decide what to measure before launch, Audit an existing site

On the site: Improve: What to track, and how to read Search Console

Source: ePrivacy Directive 2002/58/EC Art. 5(3) as amended by 2009/136/EC (cookies and device storage) (European Union), Art. 5(3) as amended by 2009/136/EC; Aesthetary skill: Decide what to measure before launch; Aesthetary skill: Audit an existing site

Why it matters. A coding agent treats the words as decided only if they’re in a file it reads. Leave them out and it writes its own, and you get the sentence every business in the category could put on its site.

Example. The bike workshop’s homepage slot “what we fix” is one line, sourced from its repair log. “Passionate about bikes, we offer fast, friendly, affordable repairs for all” became We fix road, commuter and cargo bikes, electric ones included. [CONFIRM: e-bike brands the workshop won't take].

Watch out. If a competitor could paste a sentence onto their own site unchanged, it isn’t finished. Some skills keep every approved word in one file they call the manuscript (content/manuscript.md); the stage pages keep the same words in the content/ folder. Either way the agent uses them as written.

Related: Slot, Content model, Customer language, Claim, Placeholder, Made-up fact

Learn it: Write specific, true copy for each slot, Assemble the site without losing the content, Brief an AI agent before it writes code

Source: Aesthetary skill: Write specific, true copy for each slot; Aesthetary skill: Brief an AI agent before it writes code

Why it matters. Each one names a different way a page lets someone down: a blank screen, a button that seems dead, a link that moves just as you tap it. Knowing which one is failing tells you where to look.

Example. web.dev’s “good” lines are LCP 2.5 seconds or less, INP 200 milliseconds or less and CLS 0.1 or less. Spoke and Sons guessed its hero photo would set the LCP; the lab run showed the headline waiting on a web font instead.

Watch out. They’re Google’s metrics, not a standards body’s, and web.dev says changes come on an annual cadence, so check the thresholds before you quote them. The thresholds describe real visitors; a lab score is a different number.

Related: Lab data and field data, Lighthouse, Web performance, Google Search Console, Check routine

Learn it: Predict, measure and fix performance, Set a post-launch check routine

On the site: Test: Speed

Source: Core Web Vitals (LCP, INP, CLS) (Google (Web Vitals initiative)); Web Vitals (web.dev (Google)), thresholds, 75th percentile by device, annual cadence; Aesthetary skill: Predict, measure and fix performance

Why it matters. A page that isn’t in the index can’t appear in results, and one that is can keep appearing long after you’d rather it didn’t. Google finds most new pages through links, so a draft someone linked to can be found too.

Example. Harbour Lane Physiotherapy’s old site, on a domain the clinic no longer used, was still indexed and still listed a physiotherapist who had left. Nothing linked to it, so a crawl of the new site never reached it. A search for the clinic’s phone number did.

Watch out. Blocking a page in robots.txt stops the crawl, which also stops Google seeing a noindex on that page, so the address can still turn up in results. When Research has a coding agent “crawl” a client’s site, it’s the same mechanism, run for you instead of a search engine.

Related: noindex, robots.txt, XML sitemap, Google Search Console, Search engine optimization (SEO)

Learn it: Put the review build online, Read Search Console without fooling yourself, Harvest a client's whole web presence with AI

Source: Google Search Central guidance (SEO Starter Guide, AI features) (Google), Google primarily finds pages through links from pages it already crawled; noindex robots meta tag and X-Robots-Tag header (Search engines (documented by Google Search Central)), a page blocked by robots.txt never shows the crawler its noindex; Aesthetary skill: Harvest a client's whole web presence with AI

Why it matters. It’s where a design either holds or drifts. An AI writing it page by page will invent a new gap or a new gray each time unless its values come from one named set.

Example. QA found the bakery’s captions at about 3.4:1 against white. One line in tokens.css changed --text-muted from #8C8C8C to #6B6B6B, about 5.3:1, and every caption on the site changed with it.

Watch out. After a build, ask the agent to list any color or size in the CSS that isn’t in your tokens file. Every one it finds is a decision nobody made.

Related: HTML, Design token, Spacing scale, Responsive design, Color role

Learn it: Turn the direction into a specification and tokens, Plan responsive structure as rules, Fix accessibility at the source

Source: Aesthetary skill: Fix accessibility at the source; Aesthetary skill: Brief an AI agent before it writes code; Aesthetary skill: Turn the direction into a specification and tokens

Why it matters. A business describes itself in its trade’s vocabulary, and its customers search and decide in theirs. Ask an AI tool to summarize two hundred reviews and you get “parents value the patient approach”, which nobody says. The exact phrases are what make a headline people recognize.

Example. A fictional swimming school called its lessons “aquatic confidence programs”. Its reviews said 'didn't rush him' seven times and 'finally put her face in' four times, and no parent ever said “program”. The customer-language list keeps those two phrases to reuse and puts “program” on the avoid list.

Watch out. Borrowing how customers put things is fine. Putting a review on the page with a name beside it is a claim, and it needs a source and, where it’s needed, permission. The counts guide your choices and are never a statistic to publish. The list lives at research/words.md; some skills save it as research/language/glossary.md, which isn’t this glossary.

Related: Audience, Positioning, Copy, Claim, Category default, Source

Learn it: Mine customer language from reviews, Position with proof, Write specific, true copy for each slot

On the site: Research: Who are we trying to reach?, Research: What can we learn from it?

Source: Aesthetary skill: Mine customer language from reviews

Why it matters. It uses the same moments honest persuasion uses, with false content, and spends the trust the site exists to earn. The US Federal Trade Commission’s 2022 staff report on dark patterns describes all three of those examples.

Example. A fictional removals firm can’t price a move from a form, so “Get an instant quote” would be a lie with a button on it. The honest step is the one the brothers can deliver, and the button says so: “Book a free video survey”. They show real availability or none, a deadline only when there is one, and what’s included up front.

Watch out. The FTC report is staff guidance, not law, and Aesthetary doesn’t give legal advice. The test that works on any page: does what happens after the click match what the page said? A “free video survey” button that opens a long form asking for a whole inventory fails it.

Related: Primary action, Proof, Conversion, Claim

Learn it: Design the visitor's path to an honest next step

On the site: Plan: What should visitors do next?

Source: Bringing Dark Patterns to Light (FTC staff report) (US Federal Trade Commission), Definition from the Background section; Appendix A lists False Low Stock Message, Baseless Countdown Timer and Drip Pricing.; Aesthetary skill: Design the visitor's path to an honest next step

Why it matters. Once you’ve read a fluent AI answer, you end up editing its draft inside its framing. With your answer written first, every disagreement becomes a question you can check, and the committed file shows a client you decided before the AI did.

Example. The bakery’s note says to lead the homepage with the morning queue photo, because the reviews mostly mention bread. The AI said to lead with cakes, for their “higher margin”. Nobody had given it any margins, so the note stood, with the reason written under it.

Watch out. It isn’t refusing to change your mind. When the AI turns out to be right, change it on the record, with what convinced you. The skill’s transcript calls the note a “position”, which has nothing to do with positioning in Plan.

Related: Artificial intelligence (AI), Decision log, Independent AI review, Commit, Positioning

Learn it: Decide first, then ask the AI, Get an honest AI review

On the site: Prepare: Your turn

Source: Aesthetary skill: Decide first, then ask the AI

Why it matters. A coding agent starts every session with no memory, and people forget too. Without the record, a decision gets quietly reversed by someone who never knew it was made, and nobody next year can tell which change worked.

Example. Kiln Lane’s entry for 4 November 2026: next class date and price moved near the top of the beginners’ page; evidence, recordings of people scrolling to the footer; four weeks before 2.1%, four after 2.6% (invented numbers); a newsletter went out in week 6, so the reading is “up, unproven”. Decision: keep it, and read again in February.

Watch out. It has two homes on this site. During the build, the bakery keeps a decisions/ folder with one dated file per decision, and its CLAUDE.md says “Never reverse one silently”. After launch, Kiln Lane keeps the log as a section of handover.md. Either works if it’s the one place everyone looks. “No clear effect” is a result too: write it down.

Related: Handover, Metric, Standing instructions file, Decide first, Measurement plan, Commit

Learn it: Keep your project in files the AI can read, Change one thing and know whether it worked, Decide first, then ask the AI

Source: Aesthetary skill: Change one thing and know whether it worked; Aesthetary skill: Keep your project in files the AI can read

Why it matters. Every deploy can break something that worked yesterday. Checks that run on every deploy by themselves catch it before a visitor does; checks someone has to remember get skipped.

Example. On every deploy, Kiln Lane’s speed budget, placeholder search and link check run by themselves. One deploy failed the budget: a 3,800 px photo uploaded to the classes page. The fix went into the export step, and the re-run passed.

Watch out. Deploying isn’t launching. Most deploys put up a review build for checking; launch is the one that puts it in front of the public at the real domain. And if search traffic drops straight after a deploy, look at the deploy first: a stray noindex, a broken page, a moved address.

Related: Build, Hosting, Production, Review build, Launch, Check routine

Learn it: Put the review build online, Set a post-launch check routine

Source: Aesthetary skill: Set a post-launch check routine; Aesthetary skill: Read Search Console without fooling yourself

Why it matters. It lets a coding agent build in a look without mistaking Aesthetary’s choices for the look’s own rules. A translated value can be replaced with a reason; break a recorded rule and you’re building something else.

Example. In the design grammar for Engineering Drawing, a single orange accent that marks what matters is a rule the record holds. The orange measures 3.3:1 on white, so Aesthetary’s translation letters it in a darker orange (5.3:1) and keeps the bright one for lines and fills. Photographs are left out: the record neither admits nor rules them out, so the bookbinder’s brief says using one is a decision.

Watch out. It sits beside the research record, never inside it, so a value Aesthetary chose can’t pass as a rule of the look. A value left out isn’t permission to fill the gap with whatever sounds right: decide it from your brief, and write down that you did. The Swiss Style kit on the Developers page includes its design grammar.

Related: Aesthetic, Color role, Design token, Agent guide, Design specification, Visual language

Learn it: Read an Aesthetary record, Turn the direction into a specification and tokens

On the site: Design: One website. Three visual directions.

Source: Aesthetary skill: Read an Aesthetary record; Aesthetary skill: Read a visual language area by area

Why it matters. A brief describes the look, but it doesn’t stop an agent writing one hex value on the home page and a slightly different one on the next. Values the build can’t approximate, and checks that catch it when it tries, are what survive to page five.

Example. The bookbinder’s button: fill --action, white label at 9.3:1, hover underlines the label, focus is a 2px ring in --text, loading keeps the label and shows a spinner after 400ms, and there’s one per page, at the end. When the agent puts a second button in the hero, the rule says no.

Watch out. “Premium but approachable” can’t be checked, so it isn’t a decision yet. An Aesthetary agent guide doesn’t replace this either: it describes a visual language, and your project’s own decisions belong in your own file.

Related: Visual direction, Design token, Component states, Responsive design, Art direction, Agent guide

Learn it: Turn the direction into a specification and tokens, Plan responsive structure as rules, Build components from content slots, with every state

On the site: Design: From direction to design specification

Source: Aesthetary skill: Turn the direction into a specification and tokens

Why it matters. Without one, every page is a fresh guess and the differences pile up. Two buttons that do the same kind of job but differ in color or corners make a visitor wonder whether the difference means something.

Example. The bookbinder’s draft had three buttons for one kind of job, “Ask about a repair”, “Order a binding” and “Contact us”, each styled differently. The fix was one rule for the action button, with every state written down, and every instance built from it. The page kept one: “Ask about a repair”.

Watch out. A component library you install gives you built parts. It doesn’t decide your colors, your type sizes or when a button may appear; those still come from your direction. “Style guide” can also mean a guide to writing, so say which one you mean.

Related: Design token, Component, Component states, Design specification, Type scale, Spacing scale

Learn it: Turn the direction into a specification and tokens, Build components from content slots, with every state

On the site: Design: Common design mistakes

Source: Aesthetary skill: Turn the direction into a specification and tokens

Why it matters. Change the value in the file and every place that uses the name changes with it. A script can also check that nothing in the build uses a value that isn’t in the file.

Example. The bakery’s menu captions failed contrast on white: --text-muted: #8C8C8C, about 3.4:1. One line changed it to #6B6B6B, about 5.3:1, and every caption, footnote and date on the site moved with it.

Watch out. Name it by its job, not its look: --red stops making sense the day the brand turns green, and --action still does. These aren’t the “tokens” an AI model counts when it reads text.

Related: Design system, Design specification, Color role, Spacing scale, Type scale, CSS

Learn it: Turn the direction into a specification and tokens, Fix accessibility at the source

On the site: Design: From direction to design specification

Source: Aesthetary skill: Turn the direction into a specification and tokens; Aesthetary skill: Fix accessibility at the source

Why it matters. Customers, search engines and old links all find the business by it, and an old one keeps answering long after everyone has forgotten it. Whatever sits there speaks for the business.

Example. Researching a fictional physiotherapy clinic, Harbour Lane, turned up an old site on a previous domain, still in search results and listing a physio who had left. Nothing linked to it, and it was still telling patients something untrue.

Watch out. A review build lives at the host’s address, not the client’s. Aesthetary’s rule is that it never borrows the client’s domain: no link-preview image hosted there, so the draft can’t present itself as their live site wherever the link is pasted.

Related: URL, Hosting, Review build, Open Graph, Deploy

Learn it: Harvest a client's whole web presence with AI, Put the review build online

Source: Aesthetary skill: Harvest a client's whole web presence with AI; Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets)

Why it matters. It lets you borrow exactly one thing and know what comes with it. Each one records what has to stay put for it to be itself and what you’re free to change, so you don’t copy the surface and miss the rule underneath.

Example. Modular grid is one: columns crossed by horizontal lines, so content takes up whole cells. What stays put is that position and interval carry the rank, not making something bigger or coloring it. How many cells there are is yours to decide. Swiss Style uses it.

Watch out. An Element isn’t one of the areas every Aesthetic is described under (layout, typography, color and the rest). It’s a specific part within an area, as the modular grid sits within layout. In web code the word means something else again: one tag in the HTML, such as a heading or a button.

Related: Aesthetic, Visual language, Layout, HTML, Design grammar

On the site: Learn: Vocabulary, Design: Where the looks come from

Source: Aesthetary skill: Read a visual language area by area

Why it matters. It’s where a visitor decides whether they’re in the right place. A good website brief checks for it directly: does the first screen make the site’s one job obvious?

Example. In the IA Library’s pattern for a local venue, a phone’s first screen holds three things: open now, the action and the address. The audit of a fictional clinic found the opposite: a hero saying “Excellence in care”, no service named on the first screen, and a 4.1 MB hero image that left it blank for seconds on a phone.

Watch out. A hero is the big opening section, often a photo with a headline. The first screen is whatever fits in the window, which may be part of the hero or more than it. There’s no single fold, so check it across every width from 320 up.

Related: Primary action, Page job, Visual hierarchy, Responsive design, Width sweep, Section

Learn it: Audit an existing site, Decide what the site is for, and how much to build, Wireframe for hierarchy before style, Write a one-page website brief

Source: Aesthetary skill: Audit an existing site; Aesthetary skill: Write a one-page website brief; Aesthetary rule: Responsive is a rule: sweep every width, fix the rule

Why it matters. A patch fixes one instance and leaves the decision behind it in place, so the next page brings the problem back. Mended where it started, it’s gone from every page, including the ones nobody has built yet.

Example. The bakery’s menu captions were gray on white at about 3.4:1. Darkening them by hand would have fixed one page. Instead --text-muted went from #8C8C8C to #6B6B6B, about 5.3:1, and every caption, footnote and date on the site moved with it.

Watch out. Sometimes the source is a decision you can’t change, like a client’s brand green that fails as text. Then the fix goes into the color roles: the green keeps the jobs it passes, and a darker color takes the small text.

Related: Design token, Component, Content model, Color role, QA record

Learn it: Fix accessibility at the source

On the site: Test: Sorted by harm, fixed at the source

Source: Aesthetary skill: Fix accessibility at the source

Why it matters. Someone using a keyboard has no pointer. Take the outline away and they’re lost by the fourth press of Tab.

Example. On the bakery’s order page, Tab reached the order button and nothing showed: the shared button component had outline: none. That fails WCAG 2.4.7. The focus style went into the component, so no button can ship without it.

Watch out. Visible isn’t the whole test. Under WCAG 2.4.11 the site’s own content mustn’t hide the focused item completely, and the bakery’s sticky cookie banner covered its Allergens link.

Related: Keyboard access, WCAG, Component, Component states, Accessibility

Learn it: Test a page with keyboard and screen reader, Fix accessibility at the source

On the site: Test: One page, inspected

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), success criteria 2.4.7 and 2.4.11, both level AA; Aesthetary skill: Test a page with keyboard and screen reader; Aesthetary skill: Fix accessibility at the source

Why it matters. A coding agent can change forty files in a few minutes. With a history you can see exactly which ones changed and take back the whole change in one step. Without one, you’re rebuilding yesterday from memory.

Example. Before an agent starts on the bakery’s order page: git status to check nothing is unsaved, then a commit named CHECKPOINT before order page. The agent works and commits its change as one commit. You review it, then keep it or revert it.

Watch out. Git isn’t GitHub. Git runs on your computer and keeps the history there. GitHub is a website that keeps a copy of a project and its history online, and it only has what you’ve sent it with git push.

Related: Commit, Repository, Terminal, Coding agent

Learn it: Use Git as a checkpoint before an AI agent changes your build

Source: Git reference documentation (Git (git-scm.com)), git-scm.com home page and git-push; Aesthetary skill: Use Git as a checkpoint before an AI agent changes your build

Why it matters. A website is a deliverable, not the point. With no checkable change written down, the site gets built from feature requests, and nobody can say afterwards whether it worked.

Example. Ines asked for a modern look, her Instagram feed on the homepage and a gallery of every frame. Her goals were underneath: more commissions start online with a photo and a size, visitors know the price range first, and fewer people call to ask if she’s open.

Watch out. Count the change the goal named, not whatever is easy to count: traffic can climb while the phone keeps ringing with the same questions. And not every goal is a sale. For a city council it might be residents finding their collection day without phoning.

Related: Website brief, Requirement, Primary action, Metric, Measurement plan

Learn it: Write a one-page website brief, Turn wishes into requirements

On the site: Plan: What should the website accomplish?

Source: Aesthetary skill: Write a one-page website brief

Why it matters. It’s the one place Google says, in its own numbers, how a site turns up in search. It’s also easy to misread, and then go and change a page that was fine.

Example. Kiln Lane reads its beginner class page once a month. “beginner pottery class near me” matches the page’s job. “handmade mugs to buy” doesn’t, so someone checks the page doesn’t read as a shop. “kids clay workshop” is a gap, and a question for the owner, not a reason to add a page.

Watch out. Small numbers swing. Average position is your topmost result averaged across impressions, so on a page with a dozen impressions a month it moves every week on a handful of searches. An average position from twelve impressions is a rumor.

Related: Crawling and indexing, Search intent, Title and meta description, XML sitemap, Check routine, Metric

Learn it: Read Search Console without fooling yourself, Set a post-launch check routine

On the site: Improve: What to track, and how to read Search Console

Source: Google Search Console (Google), what the service does; ownership verification; Search Console Help: Performance report (Google Search Console Help), clicks, impressions, CTR, average position; Aesthetary skill: Read Search Console without fooling yourself

Why it matters. A site nobody owns drifts. A year after launch the opening hours have changed, a teacher has left, and the page still says “new this spring”. QA’s rubric asks for someone named to maintain the site, who knows they’ve agreed to it.

Example. Kiln Lane’s handover.md holds what the studio measures, its check routine and its decision log, and names the studio manager as owner, agreed in writing at handover. The tools that go with it: Search Console, a link checker and the field speed data.

Watch out. The Design stage’s “AI handoff” is something else: the agent brief you give a coding agent before it builds. This one happens after launch, between people.

Related: Check routine, Measurement plan, Decision log, Launch, Agent brief, Repository

Learn it: Set a post-launch check routine, Decide what to measure before launch

On the site: Improve: what it keeps

Source: Aesthetary skill: Set a post-launch check routine

Why it matters. It sets limits you live with after launch: who can edit, on whose plans, and what gets added to your pages without you asking. Choose it by who edits the site, not by which company you’ve heard of.

Example. The village bakery’s owner changes the bread list every Friday from her phone, so her site sits on Framer: one company’s editor and hosting, and she edits on the live page. The architect who updates her portfolio twice a year through her designer gets a coded site instead, and every edit is a small job for the designer.

Watch out. Hosting and a domain name are separate things, often bought from different companies: the domain sends visitors to wherever the site is hosted. And don’t assume your provider keeps drafts out of search. Vercel adds a noindex header to preview deployments, but not to the current production address.

Related: Domain name, Deploy, Production, Stack, Review build

Learn it: Choose a stack by who edits after launch, Put the review build online

Source: Aesthetary skill: Choose a stack by who edits after launch; Are preview deployments indexed by search engines? (Vercel), Vercel’s default noindex on preview deployments

Why it matters. A screen reader announces what the code says something is, not what it looks like. A box styled to look like a button, with nothing saying it’s a button, means nothing to someone who can’t see it.

Example. In the bakery’s QA pass, VoiceOver announced the quantity “+” and “−” buttons only as “button”, and the homepage photo by its file name. Both fixes were in the HTML: each button got a name, like “Remove one Country loaf”, and the photo got alt text.

Watch out. “Semantic HTML” means using the element that matches the job: a real <button> for a button, a heading element for a heading. The HTML Living Standard says which element is for what, and the Nu HTML Checker tests a page against it.

Related: CSS, Screen reader, Alt text, Accessibility, Keyboard access

Learn it: Test a page with keyboard and screen reader, Fix accessibility at the source, Design forms for when things go wrong

Source: HTML Living Standard (incl. semantic elements, srcset/sizes/picture, lang) (WHATWG); Nu HTML Checker (W3C); Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. Images are where small sites get into trouble quietly: the client sends a folder, the old site has a gallery, and three months later nobody knows which is which. An image is also a claim, so a picture presented as the business has to be the business.

Example. A fictional coffee roastery’s images: the owner’s photos of the roaster (permission in an email), three photos from the old site with no known photographer (on the client’s question list), a customer’s Instagram photo of their order (ask the customer, or leave it out), and two generated textures for backgrounds, never used as evidence.

Watch out. “The client sent it” tells you where an image came from, not who owns it. A photo found through a search is out unless you can trace it to a license, and every Creative Commons license requires credit to the creator. Aesthetary doesn’t give legal advice: when money or a dispute is involved, the client should ask a lawyer.

Related: License, Source inventory, Claim, Source

Learn it: Check image rights and use AI imagery honestly

On the site: Research: What does the evidence actually say?

Source: Aesthetary skill: Check image rights and use AI imagery honestly; Aesthetary rule: Generated imagery is never used as evidence; Creative Commons licenses 4.0 (Creative Commons), All six Creative Commons licenses include BY: credit must be given to the creator.

Why it matters. The session that built a page remembers every reason for every choice, so it will usually tell you the page is good. Anthropic’s guidance for Claude Code gives the reason for a fresh one: it “won’t be biased toward code it just wrote.”

Example. The bakery’s reviewer found the caption contrast too low (correct) and the menu hard to find (right feeling, wrong cause: the link said Bread, and people look for Menu). It asked for testimonials (no: none were verified). It missed the order link buried on a phone, which the human critique had caught.

Watch out. A reviewer asked to find problems will usually report some, even when the work is sound. Limit it to what breaks the brief or the truth, and sort every finding yourself: correct, wrong cause, not a problem, taste, or missed.

Related: Session, Decide first, Quality assurance (QA), QA record, Website brief, Coding agent

Learn it: Get an honest AI review, Review the work against its brief

On the site: Test: One page, inspected

Source: Best practices: the writer/reviewer pattern (Anthropic · Claude Code), writer/reviewer pattern; a reviewer prompted to find gaps usually reports some; Aesthetary skill: Get an honest AI review

Why it matters. Every later stage reads it. Design learns what each page is for, Build gets the addresses and what each section must hold, and a coding agent handed a vague page writes the average page.

Example. For a made-up family plumbing and heating firm in Leeds, the plan has four pages, Call now on every one with the hours it’s answered, and a home page whose order changes on a phone so Main action, Where we work and Proof come first. The About and people page waits on an open question: do clients care which engineer comes?

Watch out. This stage is called Structure; some skills and resources still say IA. It’s one stage. It plans the structure and leaves the look to Design: the Leeds plan says the call button must be on every screen, and how it looks “is Design’s”.

Related: Site plan, Content model, Navigation, Wireframe, Visitor journey, Stage

Learn it: Build a sitemap where every page has one job, Build a content model from page types and slots, Wireframe for hierarchy before style

On the site: Structure: the stage page

Source: Aesthetary skill: Build a sitemap where every page has one job

Why it matters. Many people with motor disabilities rely on a keyboard, and blind visitors move through a page by keyboard with a screen reader. A control that only works with a click doesn’t exist for them.

Example. The bakery’s keyboard pass, check A11Y-02: Tab and Shift-Tab through all four page types, then Enter, Space, arrows and Escape on each kind of control. A skip link was there on every page and nothing trapped focus. The order button showed no focus at all.

Watch out. On a Mac, Tab skips links until you turn on keyboard navigation in System Settings and Safari’s “Press Tab to highlight each item on a webpage”. Set that up first, or you’ll record your own computer’s defaults as the site’s failures.

Related: Focus indicator, Screen reader, Accessibility, WCAG, Reading order

Learn it: Test a page with keyboard and screen reader

On the site: Test: One page, inspected

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), success criteria 2.1.1, 2.1.2 and 2.4.3; Easy Checks: a first review of web accessibility (W3C WAI), keyboard and visible-focus checks; Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. They answer different questions. The lab works before launch and points to causes; the field is what Google’s thresholds describe. Read a lab score as what visitors feel, or wait for field data a new site won’t have, and you fix the wrong thing.

Example. Kiln Lane’s routine runs Lighthouse on every deploy and reads the Core Web Vitals report once a month. Four months after launch the monthly line still says no field data, and on a small site that’s the normal result.

Watch out. Field data only exists for pages that are public, indexable and visited enough, and Google doesn’t publish the threshold. Chrome on iPhone sends nothing. A noindexed review build never has any, so test it in the lab.

Related: Core Web Vitals (LCP, INP, CLS), Lighthouse, Web performance, Google Search Console, noindex, Check routine

Learn it: Predict, measure and fix performance, Set a post-launch check routine

On the site: Improve: Kiln Lane’s year on one page, and the check routine behind it, Test: Speed

Source: Chrome UX Report methodology (Chrome for Developers), who is counted and which pages qualify; the 28-day window is on its Tools page; Lighthouse (Google Chrome); Aesthetary skill: Set a post-launch check routine

Why it matters. Some things belong before it, or the first months of numbers are useless: the questions the numbers must answer, a filter that takes your own visits out, a date on every claim. Launch week is never a normal week either, so never use it as the “before” when you compare later.

Example. Kiln Lane’s launch week: write down what the owner needs to know (“Do class-page visitors start a booking?”), track only booking_started and booking_sent, check nothing personal is sent, take the studio’s own visits out, date every claim, and set the speed budget every later version has to pass.

Watch out. Launch is a milestone. Every deploy after it puts a new version live, so the checks carry on, each on a trigger in the check routine.

Related: Review build, Production, Deploy, Pre-send gate, Check routine, Handover

Learn it: Decide what to measure before launch, Set a post-launch check routine, Run a pre-send gate

On the site: Improve: Kiln Lane’s year on one page, and the check routine behind it

Source: Aesthetary skill: Decide what to measure before launch; Aesthetary skill: Change one thing and know whether it worked

Why it matters. Placement decides what a visitor sees first and what they skip. A grid written down as a rule also keeps the hundredth page lined up with the first.

Example. The bookbinder’s three directions share the same words and the same pages. A puts one object on each screen, off-center. B files cards of one size in alphabetical order, ranked by position, not importance. C draws a frame like a technical sheet, with a wider filing margin on the left.

Watch out. Aesthetary describes every Aesthetic under an area called Layout, which covers composition and spacing; the Design stage’s rows call the same thing “Composition”. In a modular grid a module is one cell of the grid, which has nothing to do with the IA Library’s modules, the sections of a page.

Related: Visual hierarchy, Spacing scale, Responsive design, Wireframe, Section, Element

Learn it: Wireframe for hierarchy before style, Plan section rhythm across a page, Plan responsive structure as rules, Read a visual language area by area

On the site: Design: One website. Three visual directions.

Source: Aesthetary skill: Develop three different directions, then choose; Aesthetary skill: Read a visual language area by area

Why it matters. Free to download isn’t free to use. Keep the terms with the thing they cover, because they’re your only answer when someone asks, months later, why the site uses it.

Example. Creative Commons publishes six licenses, and every one requires credit to the creator. The other letters add conditions: SA means adaptations are shared on the same terms, NC allows only noncommercial use, ND allows no adaptations. For a paid stock photo, keep the license or the receipt next to the image, because its terms are your permission.

Watch out. Check an NC license before a business site relies on it, since the license allows only noncommercial use. Aesthetary points you to the people who publish licenses and doesn’t give legal advice; when money or a dispute is involved, the client should ask a lawyer.

Related: Image rights, Source inventory, Source, Typeface and font

Learn it: Check image rights and use AI imagery honestly

Source: Creative Commons licenses 4.0 (Creative Commons), Six license types; BY, SA, NC and ND as defined on the About CC Licenses page.; About CC Licenses (Creative Commons); Aesthetary skill: Check image rights and use AI imagery honestly

Why it matters. It works before anyone has visited, so before launch it’s the speed evidence you have. Read it for causes, not as a grade.

Example. Kiln Lane’s routine runs Lighthouse CI on every deploy: three runs per page, the median taken, and the build fails if LCP goes over 2,500 ms or CLS over 0.1. It failed once, on a 3,800 px photo uploaded to the classes page, and the fix went into the export step.

Watch out. A score of 100 doesn’t mean real visitors get a fast site, or that the page is accessible. Scores move from run to run with the network and the machine, and the accessibility audits only see what a machine can detect.

Related: Core Web Vitals (LCP, INP, CLS), Lab data and field data, Automated and human checks, Web performance, Check routine, Search engine optimization (SEO)

Learn it: Predict, measure and fix performance, Set a post-launch check routine

Source: Lighthouse (Google Chrome), audit categories and where it runs; score variability on its Performance scoring page; Lighthouse CI (GoogleChrome on GitHub); Aesthetary skill: Set a post-launch check routine

Why it matters. On a live page it’s a false claim made in the business’s name, and it reads exactly like a true one. Reading the draft won’t catch it. Checking every claim against its source will.

Example. Asked for a bakery homepage, the AI wrote “Family-run since 1998”. Nobody had said so. The draft now reads Family-run since [CONFIRM: founding year] until the owner answers.

Watch out. “Hallucination” makes it sound like a rare glitch. Plan for it as the ordinary result of a missing fact: give the model the facts in a file, and have it mark every gap instead of filling it. The placeholder only lasts until launch, because none may reach a page anyone can open.

Related: Placeholder, Claim, Claims list, Source, AI model

Learn it: Never invent a fact, Decide first, then ask the AI, Map every claim to its source

On the site: Prepare: A fact with no source, and what goes on the page instead

Source: Aesthetary rule: Never invent a fact; claims carry their kind; no placeholder reaches a reachable page; Aesthetary skill: Never invent a fact; Aesthetary skill: Decide first, then ask the AI

Why it matters. Every file Aesthetary asks you to keep (brief.md, claims.md, CLAUDE.md) is Markdown. People and AI tools can both read it, and Git can show exactly which line changed.

Example. Kiln Lane’s handover.md has a section that starts ## Check routine. The two # marks make that line a heading; everything under it is ordinary text.

Watch out. A .md file isn’t a broken Word document. Open it in any text editor. If you see # and - marks, the file is working as intended.

Related: Standing instructions file, Repository, Agent guide, Git

Learn it: Keep your project in files the AI can read

Source: CommonMark specification (CommonMark), spec 0.31.2: ATX headings with #, bullet markers - + *, strong emphasis with **; Aesthetary skill: Set a post-launch check routine

Why it matters. Paste the analytics tag in on launch day and six months later there’s a dashboard nobody has asked a single question of. Every number you collect costs setup time, asks visitors for data and adds noise around the numbers that matter.

Example. Kiln Lane’s: the action from brief.md is booking a beginner class. Q1 Do class-page visitors start a booking? Q2 Which pages send people to the booking form? Events: booking_started and booking_sent. Read by the studio manager on the first Monday of each month.

Watch out. Look at what the thank-you page puts in its address. An email address in a query string, or a name in an event, sends personal data to the analytics tool, so rewrite or drop it before it’s sent. Kiln Lane keeps the plan as a section of handover.md; the stage list files it as maintain/measure.md.

Related: Web analytics, Metric, Conversion, Personal data, Handover, Goal (and wish)

Learn it: Decide what to measure before launch

On the site: Improve: what it keeps

Source: Aesthetary skill: Decide what to measure before launch

Why it matters. Choose it before a change goes live. Look at ten numbers afterwards and one of them will have gone up, which proves nothing.

Example. Kiln Lane’s hypothesis names one primary measure before the change ships, Metric booking_started per class-page visit, read over four full weeks before and four after.

Watch out. Some numbers mean less than they sound. In Search Console an ordinary result counts as an impression even if nobody scrolled down to it, and position is the site’s topmost spot averaged across searches, so on a site with a dozen impressions a month it swings every week.

Related: Measurement plan, Conversion, Web analytics, Google Search Console, Core Web Vitals (LCP, INP, CLS), Lab data and field data

Learn it: Change one thing and know whether it worked, Decide what to measure before launch, Read Search Console without fooling yourself

Source: Aesthetary skill: Change one thing and know whether it worked; Search Console Help: Performance report (Google Search Console Help), How impressions and average position are counted.

Why it matters. A label nobody recognizes is a door nobody opens. “Services” and “Solutions” fit any company, so they tell a visitor nothing about this one, and every extra menu item is one more word to read before they can choose.

Example. The bike workshop’s menu went from Services · About us · Solutions · Resources to Repairs & prices · Who fixes your bike · Bikes for sale · Find us, the words its customers use in reviews. To test a label, show it on its own and ask what someone expects to find behind it.

Watch out. On a phone, folding everything into a menu button saves space and costs the one thing the visitor came to do, so the main action stays on screen. Every link also has to work from the keyboard alone.

Related: Site plan, Customer language, Page job, Keyboard access, Visitor journey, Primary action

Learn it: Build a sitemap where every page has one job, Test a page with keyboard and screen reader

On the site: Structure: common mistakes, each with its fix

Source: Aesthetary skill: Build a sitemap where every page has one job

Why it matters. A draft is public the moment it has a web address. noindex keeps a review build or an unfinished client site out of search, where it can otherwise turn up above the client’s real site.

Example. In the page: <meta name="robots" content="noindex, nofollow">. In the reply: X-Robots-Tag: noindex. Before sending a review link, check what the address actually sends: curl -sI https://harrow-review.example.com | grep -i x-robots-tag. If nothing comes back, the link doesn’t go out.

Watch out. Don’t also block the page in robots.txt: Google never fetches a blocked page, so it never sees the noindex and can still list the address. It isn’t privacy either, since anyone with the link can open the page. Google accepts either place; Aesthetary’s rule for review builds is both, because the header also covers PDFs and images. Take both off at launch.

Related: Crawling and indexing, robots.txt, Review build, Production, Pre-send gate

Learn it: Put the review build online, Run a pre-send gate

On the site: Build: Keeping the review build out of search, Test: Before it’s sent

Source: noindex robots meta tag and X-Robots-Tag header (Search engines (documented by Google Search Central)); Block search indexing with noindex (Google Search Central), meta tag and header have the same effect; header covers PDFs, video and images; robots.txt blocking hides noindex; Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets)

Why it matters. The card is often the first thing anyone sees of a site. On a review build it can also mislead: tags pointing at the client’s real domain, with their logo as the image, make the draft present itself as their live site wherever the link travels.

Example. Harrow Studio’s review build has no og:image or og:url pointing at the studio’s real domain. It carries either no image at all, or one hosted on the review build itself.

Watch out. These are separate from the title and meta description that search engines use. Fixing one set doesn’t fix the other, so check both before the link goes out.

Related: Title and meta description, Review build, Pre-send gate, HTML, URL

Learn it: Put the review build online, Run a pre-send gate

Source: Open Graph protocol (Originated at Facebook; Open Web Foundation Agreement 0.9), four required properties: og:title, og:type, og:image, og:url; Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets); Aesthetary skill: Put the review build online

Why it matters. If you can’t say a page’s job in one sentence, it isn’t a page yet. Side by side, the sentences show which pages to merge, which to split and which lead nowhere. Give a coding agent a page called About and it writes the average About page; give it the sentence and it has something to aim at.

Example. The bike workshop’s About page started as “tell people about us”, with no visitor in it. People on that page are deciding whether to hand a bike that cost more than their laptop to strangers, so it became /workshop 'Who fixes your bike' helps you decide we can be trusted with it.

Watch out. “One job” comes in two sizes. The site’s one job is its purpose for the business (Kiln Lane’s is getting people to book a beginner class); a page job belongs to one page, and the primary action is what the visitor actually does. Two pages with the same job are one page with two addresses.

Related: Site plan, Primary action, Goal (and wish), Navigation, Visitor journey

Learn it: Build a sitemap where every page has one job, Review the work against its brief, Read Search Console without fooling yourself

On the site: Structure: six questions it answers

Source: Aesthetary skill: Build a sitemap where every page has one job

Why it matters. Scope a site in these, not in page counts. Each one is designed and built once, so the real questions are which ones exist and how many instances you’re writing content for. That’s what the work costs.

Example. A made-up ceramics studio’s site has five: Home, Class, Class list, Studio, Contact. The class page is designed once, and every course the owner runs is another instance of it, with the same slots filled differently. Every Aesthetic page on this site works the same way: one kind of page, the same parts in the same order, whatever the look.

Watch out. Don’t call it a template. A page pattern is something else again: a worked-out starting point from the IA Library, which you check against your own brief before you use it.

Related: Content model, Slot, Pattern, Section, Aesthetic, Site plan

Learn it: Build a content model from page types and slots, Decide what the site is for, and how much to build

Source: Aesthetary skill: Build a content model from page types and slots; Aesthetary skill: Decide what the site is for, and how much to build

Why it matters. It saves you starting from a blank page or from the category’s copied default. Each one carries its reasons, so you can see which parts apply to your business and drop the ones that don’t.

Example. The Trades site pattern starts from “I fix, install, clean or move things at the customer’s place.” The Leeds plumber’s plan began there, then dropped the All services page, because two services don’t need a list, and the Prices page, because the call-out fee sits beside the call button. The Prices page pattern’s job: let someone answer “can I afford this?” before they contact anyone.

Watch out. A pattern is reasoning to check against your own brief, and most are marked “Reasoned, not built”. Neither kind is a template to publish.

Related: Information architecture (IA), Site plan, Page type, Section, Category default, Website brief

Learn it: Build a content model from page types and slots, Build a sitemap where every page has one job

On the site: The IA Library: start from what you’re building, The IA Library: page patterns

Source: Aesthetary skill: Build a content model from page types and slots

Why it matters. It leaks without anyone meaning it to. Google Analytics forbids sending anything Google could recognize as personally identifiable, and its policy says page addresses and titles are where that leaks most often.

Example. Kiln Lane’s measurement plan has a line called “Never sent”: names, emails, phone numbers, order ids in paths. A thank-you page that puts the visitor’s email in its address would break it, so the event is rewritten to plain /thanks before it’s sent.

Watch out. What a site may collect, and what its privacy notice says, are legal questions for someone qualified. Aesthetary links to the GDPR’s text and doesn’t give legal advice.

Related: Cookies and consent, Web analytics, Measurement plan, URL

Learn it: Decide what to measure before launch

On the site: Improve: What to track, and how to read Search Console

Source: General Data Protection Regulation (EU) 2016/679 (European Union), Article 4(1), definition of personal data; Aesthetary skill: Decide what to measure before launch

Why it matters. The alternative is a believable guess, and a guess left on a live page is a false claim about a real business that nobody spots. A bracket left on a live page is merely embarrassing, so every one also goes on the client checklist and gets filled or cut before launch.

Example. The bakery’s draft reads Family-run since [CONFIRM: founding year] until the owner answers. Before sending, a search for [CONFIRM across the built site finds nothing, and a broader search for anything in square brackets finds a placeholder nobody marked, where the company’s registered name should be on legal.html, so that page is held back.

Watch out. No placeholder reaches a page anyone can open, including pages nothing links to yet. Reviews can’t be placeholdered: leave the section out until real ones arrive. On Aesthetary, square brackets only ever mean a placeholder; Aesthetary’s own readings on Aesthetic pages carry a dotted underline instead.

Related: Made-up fact, Claim, Claim status, Pre-send gate, Review build, Requirement

Learn it: Never invent a fact, Map every claim to its source, Run a pre-send gate

On the site: Prepare: A fact with no source, and what goes on the page instead, Research: What does the evidence actually say?

Source: Aesthetary rule: Never invent a fact; claims carry their kind; no placeholder reaches a reachable page; Aesthetary skill: Never invent a fact

Why it matters. A plan is a list of decisions, and reading it takes a minute. Catch a step nobody asked for here and the fix is one sentence. Catch it after the build and it might be a page gone.

Example. The bakery’s plan for an Order Ahead page had five steps. Step 3 replaced the contact form and step 4 removed the /wholesale page, and nobody had asked for either. Choose “No, keep planning” and add: leave the contact form alone, and don’t remove any page.

Watch out. It stops edits, not mistakes. The agent still reads files and runs commands to explore, and approving the plan switches it to the mode you pick, so it starts editing straight away. In Codex, the read-only sandbox (switch to it with /permissions) does the same job when you want to plan without changing files.

Related: Coding agent, Agent brief, Session, Commit, Prompt

Learn it: Steer a coding agent with plan mode and Esc, Brief an AI agent before it writes code

On the site: Prepare: Reading the AI’s plan before you approve it, Build: The agent’s brief, and reading its plan

Source: Choose a permission mode (Anthropic · Claude Code), plan mode reads, runs shell commands to explore and writes a plan without editing source; Shift+Tab, /plan, “No, keep planning”; Agent approvals & security (OpenAI · Codex), read-only sandbox via /permissions to plan without changing files; Best practices for Claude Code (Anthropic · Claude Code), skip the plan if the change fits in one sentence; Aesthetary skill: Steer a coding agent with plan mode and Esc

Why it matters. It decides the headline, which proof sits where, and which claims stay off the page. Without one, a site ends up describing the whole category, and an AI draft fills the gap with adjectives.

Example. “Friendly, expert repairs for all bikes” fits any bike shop: put a rival’s name on it and it’s still true. “Repairs for the old and unusual bikes other shops turn away, with parts nobody stocks” turns false with a chain store’s name on it, and Dee’s reviews and her cabinet of discontinued parts back every word. That’s the one to keep.

Watch out. When the proof runs out, the position gets narrower. It never gets padded with a guess. Two other “positions” on this site mean something else: in Search Console, average position is where a site’s topmost result sat in search results, averaged; on Aesthetic records, an area’s position is what the record says a visual language requires there.

Related: Proof, Category default, Customer language, Audience, Website brief, Google Search Console

Learn it: Position with proof, Find your category's default

On the site: Plan: Why choose this organization?

Source: Aesthetary skill: Position with proof; Search Console Help: Performance report (Google Search Console Help), Average position: “the average position of the topmost result from your site”.

Why it matters. Sending is the one step you can’t take back, and anything a search engine found is already found. A list made up on the day catches that day’s worries, and what goes wrong is usually the thing you weren’t worried about.

Example. The bakery’s first run failed on line one. A search of the built pages turned up dist/about.html:41 Registered as [CONFIRM: the company’s registered name]. The sentence came out until the client confirmed the name, and the whole list ran again from the top.

Watch out. An agent can run every command on it, and should. The sign-off is yours: read what each check returned before you tick it. An agent that reports all clear without showing the output is telling you a story about a pass.

Related: QA record, Review build, Placeholder, Width sweep, noindex, Commit

Learn it: Run a pre-send gate

On the site: Test: Before it’s sent

Source: Aesthetary skill: Run a pre-send gate; Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets); Aesthetary rule: Never invent a fact; claims carry their kind; no placeholder reaches a reachable page

Why it matters. A page can lead with only one action. If nobody chooses, the homepage chooses, usually badly, and three buttons end up side by side with none saying what happens next.

Example. Priya runs a fictional ceramics studio. Her evening classes are most of her income, her pieces mostly sell at craft fairs, and nobody pays for the newsletter. So the primary action is booking a class; buying a piece, joining the newsletter and following on Instagram stay, further down.

Watch out. Three phrases sit close together. The site’s one job is the purpose line in the brief (for Ines’s workshop: get people with something to frame to send a photo and a size, so she can quote before they visit). The primary action is what the visitor does: send the photo and the size. Each page’s own purpose is its page job. IA drawings label this section “Main action”, and its button is often called a call to action.

Related: Page job, Goal (and wish), Website brief, Visitor journey, Conversion, Proof

Learn it: Decide what the site is for, and how much to build, Design the visitor's path to an honest next step

On the site: Plan: What should visitors do next?

Source: Aesthetary skill: Decide what the site is for, and how much to build; Aesthetary skill: Write a one-page website brief

Why it matters. Whatever is in it, visitors and search engines see. So checks run before a version gets there, and QA starts from the review build, not from the version people are already using.

Example. At launch the review build’s noindex has to come off. Take the meta tag and the header off the production site, run the two checks again (curl -sI for the header, curl -s for the meta tag) and expect nothing back. A noindex that ships with the real site keeps the client’s new homepage out of search until somebody notices.

Watch out. On Vercel the current production deployment isn’t kept out of search for you, and that includes its .vercel.app address. A review build deployed to production on a fresh project can be found in search unless you add noindex yourself.

Related: Review build, Deploy, Launch, noindex, Hosting

Learn it: Put the review build online, Run a pre-send gate

Source: Are preview deployments indexed by search engines? (Vercel), current production deployment and .vercel.app address are not noindexed; Aesthetary skill: Put the review build online

Why it matters. The model works only from what you wrote and what it can read. Anything you leave out, it guesses, and a vague request gets the most typical answer.

Example. “Use the tone we agreed” means nothing to a session that wasn’t there. “Follow decisions/tone.md” does, and when the decision changes there’s only one copy to update.

Watch out. Two other prompts turn up in the same work. A terminal’s prompt is the line where it waits for your next command. A coding agent’s permission prompt asks you to approve one action: read it for the command and the path before you say yes.

Related: Session, Coding agent, Standing instructions file, Agent brief, Terminal

Learn it: Keep your project in files the AI can read, Steer a coding agent with plan mode and Esc, Mine customer language from reviews

Source: Aesthetary skill: Keep your project in files the AI can read; Aesthetary skill: Steer a coding agent with plan mode and Esc

Why it matters. It only helps where the doubt is. Put it next to the question that makes a visitor hesitate, such as price or safety; a row of logos at the bottom of the page answers neither.

Example. The fictional Leeds plumber’s homepage answers “Can I trust you in my home?” with the Gas Safe registration, linked to the register, and reviews with a count and a date. On a phone they come right after the call button and the areas covered, so a visitor can call, check the area and check the registration without scrolling.

Watch out. Proof comes from the business, never from the draft. An AI draft reaches for “trusted by hundreds of happy customers” because that’s what sites in the category say, and a made-up review is a made-up fact, so a reviews section waits until real ones arrive. When the proof runs out, the claim gets narrower.

Related: Claim, Positioning, Source, Made-up fact, Primary action, Claim status

Learn it: Position with proof, Design the visitor's path to an honest next step

On the site: Plan: Why choose this organization?, Structure: One page, top to bottom

Source: Aesthetary skill: Design the visitor's path to an honest next step; Aesthetary skill: Position with proof

Why it matters. A score says nothing about what was tested. The record lets the owner, a reviewer or you next month see what was checked and what nobody checked, and it’s the evidence the pre-send gate is signed on.

Example. One of the bakery’s lines: A11Y-03 human fail VoiceOver + Safari, run on all four page types, with two failures under it. The quantity buttons are announced only as “button” (WCAG 4.1.2) and the hero photo by its file name (1.1.1). The basis is creator_declared, on commit 4e1c9a2.

Watch out. Write down what wasn’t run, too. The bakery’s record leaves its forms check at not_run until the offline and double-submit tests are done, and it never mentions users, because no user testing took place.

Related: Pre-send gate, Automated and human checks, Fix at the source, Quality assurance (QA), Commit, Page type

Learn it: Test a page with keyboard and screen reader, Get an honest AI review, Run a pre-send gate

On the site: Test: What QA produces

Source: Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. A page can look finished and still fail the person trying to use it. Without this stage the builder grades its own work, and the session that built it, asked whether it worked, grades its own homework.

Example. The bakery’s order page went through a keyboard pass, a screen reader pass, a pass at 200% zoom and a review by an AI that didn’t build it. Ten findings came back. Each was sorted (correct, wrong cause, not a problem, taste, missed), ranked by how badly it got in the way of ordering, and fixed where it started.

Watch out. This stage is called Test; some skills and resources still say QA. A pass is evidence, not approval: no tool or AI reviewer signs it off. A person does, on the version that’s actually served.

Related: QA record, Pre-send gate, Automated and human checks, Independent AI review, Review build, Website brief

Learn it: Review the work against its brief, Get an honest AI review, Test a page with keyboard and screen reader, Run a pre-send gate

On the site: Test: One page, inspected

Source: Aesthetary rule: A passing automated test is evidence, not approval; Aesthetary skill: Review the work against its brief; Aesthetary skill: Get an honest AI review; Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. Left undecided, the order gets rearranged later to make something look balanced. When the screen and the code disagree, someone using a screen reader hears the page in a different order from everyone else, and WCAG asks that a correct reading sequence can be worked out wherever the order affects the meaning.

Example. The bike workshop’s homepage wireframe numbers every line, starting [1] We fix road, commuter and cargo bikes and [2] ( Book a slot ). The responsive rules for its repairs page add KEEP reading order 1-6, in the code as on screen.

Watch out. Visual hierarchy is the other half: how size, weight and position make the eye follow this order. Styling can move things on screen without moving them in the code, which is how the two drift apart.

Related: Visual hierarchy, Wireframe, Screen reader, Responsive design, Keyboard access, WCAG

Learn it: Wireframe for hierarchy before style, Test a page with keyboard and screen reader, Plan responsive structure as rules

On the site: Structure: one page, top to bottom

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), Success criterion 1.3.2 Meaningful Sequence (level A).; Aesthetary skill: Wireframe for hierarchy before style

Why it matters. Large movement, like scaling or panning big objects, can make people with vestibular disorders feel ill. Animation with no reduced version shuts them out of the page.

Example. The chamber orchestra’s season page fades a concert out of the list and slides it 24px left when a filter changes. With reduced motion set, the slide goes and the fade stays, because the fade still shows which concerts left.

Watch out. Reduced doesn’t mean none. Motion that carries meaning gets a quieter version; motion that’s only decoration goes. WCAG asks for this only at level AAA (2.3.3), and Aesthetary asks for it on every build anyway.

Related: Accessibility, WCAG, CSS, Component states

Learn it: Use motion with restraint

On the site: Build: Motion for its own sake, in Common build mistakes

Source: prefers-reduced-motion (MDN (Mozilla)), values, vestibular note, where people switch it on; prefers-reduced-motion (Media Queries Level 5) (W3C CSS WG), W3C Working Draft; Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), 2.3.3 Animation from Interactions, level AAA; Aesthetary skill: Use motion with restraint

Why it matters. A coding agent reads the folder, not your chat, so a decision that isn’t in a file doesn’t exist for it. The folder is also the project’s record: every file the stages name is in it, and Git keeps its history.

Example. The bakery’s folder on day one: CLAUDE.md, brief.md, decisions/, claims.md, log/ai-log.md and site/. One git init inside it, and Git starts keeping the history.

Watch out. A copy on GitHub is a second copy, not the same one. It matches the folder on your computer only after you push, and until then your work exists in one place.

Related: Git, Commit, Standing instructions file, Markdown, Coding agent

Learn it: Use Git as a checkpoint before an AI agent changes your build, Keep your project in files the AI can read

On the site: Prepare: The bakery’s project folder, and what you need to start

Source: Git reference documentation (Git (git-scm.com)), git-init: creates the .git directory; Aesthetary skill: Keep your project in files the AI can read

Why it matters. Without the tags, the launch slips while everyone waits on something nobody needed. The BLOCKS LAUNCH lines also double as the launch checklist: each one is real by launch day, or the site doesn’t go out.

Example. Tomasz, a fictional mobile dog groomer: the areas he covers block the start. Prices by coat type and his insurance wording block launch, sitting in the build as placeholders until he sends them. The online booking calendar is LATER, because he books by text from the van and a calendar he won’t update would show slots that don’t exist.

Watch out. A firm “must” doesn’t make a request block anything. Ask what breaks on launch day without it: if the site can’t do its one job or would say something untrue, it blocks; if someone would only be disappointed, it’s LATER, with the reason and what would change it.

Related: Goal (and wish), Website brief, Placeholder, Launch, Page type, Pre-send gate

Learn it: Turn wishes into requirements

On the site: Plan: What belongs in the first version?

Source: Aesthetary skill: Turn wishes into requirements

Why it matters. Screens come in every width between the ones you mocked up. A page checked at desktop, tablet and phone can still break at 900 pixels, where nobody looked, and someone zoomed in to read on a desktop is using your narrowest layout.

Example. A fictional garden designer’s services grid looked fine at the usual review widths, but at 1,012px its cards were 290px wide and every title wrapped to four lines. The cause was a rule, “three columns at any width above 768”. The fix changed the rule to as many columns as fit at 18rem each, so the count follows the content.

Watch out. Three widths are for screenshots and review; testing is a sweep across the whole range. WCAG’s Reflow criterion asks for content that works at 320 CSS pixels without scrolling sideways, which is what a 1280-pixel desktop window becomes at 400% zoom.

Related: Width sweep, Layout, WCAG, Accessibility, Design specification, Reading order

Learn it: Plan responsive structure as rules, Test responsive behavior across every width

On the site: Test: Every width

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), success criterion 1.4.10 Reflow (AA) and its Understanding page; Aesthetary rule: Responsive is a rule: sweep every width, fix the rule; Aesthetary skill: Test responsive behavior across every width; Learn Responsive Design (web.dev (Google))

Why it matters. A draft is public the moment it has a web address. Anyone with the link can open it, and a search engine that finds the link can list it: one demo built as a pitch ended up above the photographer’s own site in search.

Example. Harrow Studio’s review build goes out as https://harrow-review.example.com only after four things check out: noindex in every page’s meta tag and in the X-Robots-Tag header, no Disallow for its pages in robots.txt, no og:image on the studio’s real domain, and a search of the finished files for [CONFIRM that returns nothing.

Watch out. Vercel calls this a preview deployment and adds a noindex header to it by default, but not to the current production deployment or to a custom domain on a non-production branch, so check the exact address you’ll send. And noindex isn’t privacy: anyone with the link can open it. If the draft must be private, use access protection (Vercel’s is called Deployment Protection).

Related: noindex, Production, Deploy, Pre-send gate, Open Graph, Placeholder

Learn it: Put the review build online, Run a pre-send gate

On the site: Build: Keeping the review build out of search, Test: Before it’s sent

Source: Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets); noindex robots meta tag and X-Robots-Tag header (Search engines (documented by Google Search Central)); Are preview deployments indexed by search engines? (Vercel), preview deployments noindexed by default; production and non-production custom domains not; Deployment Protection; Aesthetary skill: Put the review build online

Why it matters. It keeps well-behaved crawlers away from addresses you don’t want fetched. It keeps nobody else out, and on the wrong page it does the opposite of what people expect.

Example. Harrow Studio’s review build has no Disallow for its pages, on purpose. Every page carries noindex, and a crawler has to be allowed to fetch a page to read that.

Watch out. Blocking a page doesn’t hide it. Google never fetches a blocked page, so it never sees a noindex on it, and the address can still turn up in results if something links to it. The standard itself says its rules don’t control who may access anything.

Related: noindex, Crawling and indexing, XML sitemap, Review build

Learn it: Put the review build online, Harvest a client's whole web presence with AI

Source: Robots Exclusion Protocol (robots.txt), RFC 9309 (IETF), file location; Allow, Disallow, User-agent; not access authorization; noindex robots meta tag and X-Robots-Tag header (Search engines (documented by Google Search Central)), blocked pages never show the crawler their noindex; Aesthetary rule: Review builds stay out of search (noindex in meta and header, no og:image on the client's domain, zero brackets)

Why it matters. It can only say what the code tells it. A button with no name is announced as “button”, an image with no alt text as its file name, and six “Read more” links sound identical.

Example. In the bakery’s pass, VoiceOver in Safari read each quantity button as just “button”. After the fix it says “Remove one Country loaf, button” and “Add one Country loaf, button”.

Watch out. A sighted person who started using one this week isn’t a screen reader user. Record your pass as your own check, naming the screen reader, the browser and their versions. User testing means people from the site’s audience using it; for accessibility, that means disabled people.

Related: Alt text, Keyboard access, Accessibility, QA record, HTML

Learn it: Test a page with keyboard and screen reader

On the site: Test: One page, inspected

Source: Using VoiceOver to evaluate web accessibility (WebAIM); Using NVDA to evaluate web accessibility (WebAIM); Web Accessibility Tutorials (W3C WAI), read aloud or rendered as braille; Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. Searches show what people want before they reach any site. Plan pages without them and you build pages nobody looks for and miss the ones they do; sprinkle keywords on at the end and the pages still don’t match.

Example. Marta teaches European Portuguese in evening classes. “Portuguese evening classes” gets a class page with the place, the night and the price. “How long does it take to learn Portuguese” gets a page on her three levels. “Portuguese tutor online” gets no page at all, because she doesn’t offer it.

Watch out. Nobody can promise a ranking; Google’s own guide says there’s no secret that puts a site first. Be wary of shortcuts too. Generating many pages mainly to rank, with AI or anything else, is what Google’s spam policies call scaled content abuse.

Related: Search intent, Crawling and indexing, Title and meta description, Google Search Console, XML sitemap, Page job

Learn it: Let search intent shape the site, Run a pre-send gate

Source: Google Search Central guidance (SEO Starter Guide, AI features) (Google), SEO Starter Guide: definition; no secrets to rank first; Spam policies for Google web search (Google Search Central), scaled content abuse, including generative AI; Aesthetary skill: Let search intent shape the site

Why it matters. Pages planned around it match what people came for. Pages planned around phrases don’t, however often the phrase appears, and Google’s systems connect a page to related searches even when the exact words aren’t on it.

Example. Marta’s query map. Someone searching “Portuguese evening classes” is ready to choose, so it’s a class page. “How long does it take to learn Portuguese” is someone trying to understand, so it’s a page about her levels. “European versus Brazilian Portuguese” is a decision, and she’s better placed than most to answer it.

Watch out. Read the results page, not only the words. A map of local businesses means people want somewhere near them; articles mean they want to understand first; listings with times and prices mean they’re ready to choose. If an AI answer sits at the top, a page that repeats it adds nothing.

Related: Search engine optimization (SEO), Customer language, Page type, Site plan, Google Search Console, Page job

Learn it: Let search intent shape the site, Read Search Console without fooling yourself

On the site: Plan: Who is it for?

Source: Aesthetary skill: Let search intent shape the site; Google Search Central guidance (SEO Starter Guide, AI features) (Google), language matching connects pages to queries without the exact terms

Why it matters. Planning a page as a short run of jobs keeps every part earning its place. It also tells Design and a coding agent what to keep: Design decides how each one looks, and the order and content stay as planned.

Example. The Leeds plumber’s home page has eight, in reading order: What this is, Main action, Where we work, Proof, Services, What happens next, Who you’ll deal with, What clients say. On a phone, Main action, Where we work and Proof come first, so a visitor can call, check the area and check the registration without scrolling.

Watch out. The IA Library’s data calls these modules. Swiss Style’s “module” is something else, one cell of a grid (see Layout). One band may also be built from several components, so the two words aren’t interchangeable.

Related: Slot, Page type, Reading order, Component, Layout, Content model

Learn it: Build a content model from page types and slots, Plan section rhythm across a page

On the site: Structure: one page, top to bottom

Source: Aesthetary skill: Build a content model from page types and slots

Why it matters. An agreement you only made in chat is gone tomorrow. Anything you’d be annoyed to explain twice belongs in a file the next one reads.

Example. Start fresh when you move to an unrelated task, or when you’ve corrected the agent twice on the same thing and it’s still wrong, because by then the conversation is full of failed attempts. Once a plan is agreed and saved to a file, a fresh session can build from the file with nothing else in its way.

Watch out. Each Claude Code session begins with a fresh context window, and Codex builds its instructions from AGENTS.md each time it starts, so a standing instructions file is how anything carries over. In web development “session” also means a signed-in visit to a site, usually kept by a cookie. That’s a different thing.

Related: Standing instructions file, Coding agent, Prompt, AI model, Independent AI review, Cookies and consent

Learn it: Steer a coding agent with plan mode and Esc, Keep your project in files the AI can read

On the site: Prepare: The file every session reads

Source: How Claude remembers your project (CLAUDE.md) (Anthropic · Claude Code), “Each Claude Code session begins with a fresh context window.”; Best practices for Claude Code (Anthropic · Claude Code), /clear between unrelated tasks; start fresh after two failed corrections; Custom instructions with AGENTS.md (OpenAI · Codex), instruction chain built once per run; Aesthetary skill: Steer a coding agent with plan mode and Esc

Why it matters. Your first reaction to a site is taste, and it skips whatever didn’t jump out at you. Grading by consequence overrules it: a dated font is cosmetic, while a booking button some people can’t read blocks the site’s one job.

Example. The fictional Harbour Lane clinic, graded from 4 (blocks the main job) to 1 (cosmetic): the “Book now” button fails contrast (4), a 4.1 MB hero image leaves the first screen blank on a phone (3), prices exist only inside a PDF (2), the footer serif looks dated (1). The client sees the top three, with evidence; the full list stays in the project.

Watch out. Research’s audit card prints lens codes: COPY is copy, PERF is performance, A11Y is accessibility. Legal awareness means noticing, never advising: a cookie banner that does nothing gets flagged for someone qualified. A coding agent can list every oversized image or untitled page, but it doesn’t know the site’s one job, so the grading stays with you.

Related: Category default, Accessibility, Web performance, Conversion, Search engine optimization (SEO), Contrast ratio

Learn it: Audit an existing site

On the site: Research: Audit the site and its category

Source: Aesthetary skill: Audit an existing site

Why it matters. If you can’t say a page’s job in one sentence, it isn’t a page yet. Design reads this list to learn what each page is for, Build reads it for the addresses, and a coding agent reads it before it writes a word.

Example. For the bike workshop: /repairs 'Repairs & prices' helps you price the fix before you bring the bike and /book 'Book a slot' helps you pick a drop-off day without phoning. Walking a “my gears keep slipping” visitor through it showed the opening hours belonged on or beside the repairs page.

Watch out. On this site “sitemap” means only the XML file for search engines (sitemap.xml, in the format the Sitemaps protocol sets). Some skill videos still say “sitemap” for this planning list and name the file ia/sitemap.md; it’s the same list. Writing it doesn’t create the XML file, and the XML file plans nothing.

Related: XML sitemap, Page job, Navigation, Content model, Information architecture (IA), Visitor journey

Learn it: Build a sitemap where every page has one job

On the site: Structure: what it leaves in the folder

Source: Aesthetary skill: Build a sitemap where every page has one job; Sitemaps XML protocol 0.9 (sitemaps.org (search-engine-supported)), The XML file’s format, for the watch-out only.

Why it matters. Each one teaches the judgment around a task on one small fictional business, and leaves the mechanics to the official documentation. That’s why a stage page links to them instead of explaining every tool.

Example. Never invent a fact sits in Prepare. It follows a fictional bakery’s claims list and the search that finds every unfilled placeholder before launch, and ends on its takeaway: “If you can’t trace it, it doesn’t go on the page.”

Watch out. Claude Code uses the same word for something else: there, a skill is a SKILL.md file in .claude/skills/ that gives the agent knowledge or a workflow it loads when relevant. Aesthetary’s skills are for people.

Related: Stage, Coding agent, Markdown

Source: Aesthetary skill: Never invent a fact; Best practices for Claude Code (Anthropic · Claude Code), Claude Code skills: SKILL.md files in .claude/skills/

Why it matters. The count tells the designer what the page must survive, and “allowed to be empty” means someone has to design the empty state on purpose. Each one is also the brief for one piece of copy, with its length and source already set.

Example. Each bike for sale at the bike workshop carries checked 1 what the workshop checked, and when. Nobody can fill that by writing nicely. Until the workshop records what its mechanic looked at, it stays empty, and that’s a research task for the client.

Watch out. Name it for the content (“A customer’s words”), never for a component (“Testimonial carousel”). It isn’t a box in a layout, and it isn’t a database field yet, though it may become one.

Related: Content model, Page type, Section, Copy, Component states, Placeholder

Learn it: Build a content model from page types and slots, Build components from content slots, with every state, Write specific, true copy for each slot

Source: Aesthetary skill: Build a content model from page types and slots

Why it matters. Without one, a claim can’t be checked, and when the client asks where a line on their own homepage came from, nobody can answer. It also needs its real date, which is often not the date on the file.

Example. The fictional Harbour Lane clinic’s price list is harbourlane.example/files/prices.pdf. The download says today and the server says last March, but the footer says “from January 2023”, and that’s the date that counts. The clinic’s booking profile shows other prices, so this one is trusted low until the owner confirms in writing.

Watch out. “The client sent it” says where something came from, not who made it or whether it’s current. A copy of an original you haven’t seen is weak: a directory that copied the opening hours years ago still goes in the inventory, but its hours stay off the site. In Build and QA, “fix at the source” is a different sense: the place in the code where a problem starts.

Related: Claim, Source inventory, Claim status, Claims list, Made-up fact, Fix at the source

Learn it: Map every claim to its source, Build a source inventory you can trust, Keep content and evidence true over time

On the site: Research: What does the evidence actually say?

Source: Aesthetary skill: Build a source inventory you can trust; Aesthetary skill: Map every claim to its source

Why it matters. A harvest of downloads, screenshots and PDFs feels like research, but you can’t build on a pile: you can’t tell which version of the opening hours is current. The rows are what every claim on the new site points back to.

Example. The fictional Harbour Lane clinic’s row for its price list: ITEM Price list (PDF), made by the client, DATED Jan 2023, from the footer on page 1, RELY Low: booking profile shows other prices. The last field is already a question for the client: confirm current prices in writing.

Watch out. The date is the field that catches people. A coding agent drafting rows will happily take a file’s download date for its content date, so tell it to leave the date blank when the content gives none, then check every date and grade yourself. Images go in too, with who made each one and what permission exists.

Related: Source, Claims list, Claim, Image rights, Site audit

Learn it: Build a source inventory you can trust, Check image rights and use AI imagery honestly

On the site: Research: List what the business already has

Source: Aesthetary skill: Build a source inventory you can trust

Why it matters. If every gap is whatever looked fine on the day, the page has no rhythm: it never rests and never builds. Left to its defaults, a coding agent often gives every section the same padding, so a planned pause turns into one more block.

Example. The bookbinder uses four steps that double: --space-1 0.5rem, --space-2 1rem, --space-3 2rem and --space-4 4rem. Every gap on every page comes from those four, and the photograph gets the most room.

Watch out. When one gap looks wrong, fix the step or the rule that chose it, not that one gap. A one-off value fixes one page and leaves the next one wrong.

Related: Design token, Layout, Type scale, Design system, Visual hierarchy

Learn it: Plan section rhythm across a page, Turn the direction into a specification and tokens

On the site: Design: From direction to design specification

Source: Aesthetary skill: Turn the direction into a specification and tokens; Aesthetary skill: Plan section rhythm across a page

Why it matters. A coding agent makes the first version cheap, so the expensive part is every edit after launch. Choose by who edits, how often and from what device, or you end up as the client’s Friday job.

Example. Three fictional clients. An architect who updates her portfolio twice a year, always through you: static HTML or Astro, built with an agent. A village bakery whose owner changes the bread list every Friday from her phone: Framer, so she can edit on the live page. An events organizer with forty events in a spreadsheet: Astro, one page per event.

Watch out. On a design specification the word means something else. “The class of typeface is required, the exact stack is ours” is about a font stack: the list of fonts a browser tries in order, moving to the next when one isn’t available.

Related: Hosting, Build, Handover, Coding agent, Typeface and font, Deploy

Learn it: Choose a stack by who edits after launch

Source: Aesthetary skill: Choose a stack by who edits after launch; Aesthetary skill: Turn the direction into a specification and tokens

Why it matters. Each one reads what the one before it wrote and adds its own files to the same project folder. By launch, the folder holds the reasons behind every page, so you, a client or the next agent session can see why something is the way it is.

Example. For the bakery, Plan reads research/claims.md from Research and leaves brief.md and requirements.md in the same folder, where Structure picks them up next.

Watch out. You don’t have to go through them in order: each page says what it needs, so you can pick a project up halfway. Two of them have older, technical names you’ll still meet: Structure is information architecture (IA), and Test is quality assurance (QA).

Related: Information architecture (IA), Quality assurance (QA), Repository, Skill, Website brief

On the site: Home: the eight stages, as one loop

Source: Aesthetary skill: Keep your project in files the AI can read

Why it matters. Interview them together and you get a polite version of the louder one’s view. A disagreement nobody wrote down comes out at the first design review, and a brief that hid it falls apart there.

Example. A fictional architecture studio with two partners: one wants the site to show house extensions, the other wants it aimed at small commercial work. Interviewed separately with the same questions, both say their last three jobs were extensions. The record keeps both views as quotes, the agreed fact, the open question and who decides it.

Watch out. Writing a disagreement down isn’t settling it, and settling it may never be your call. Don’t reassure one side (“we’ll definitely show the commercial work”): a promise to one partner is a decision made for both.

Related: Website brief, Goal (and wish), Audience, Requirement

Learn it: Interview stakeholders who disagree, Write a one-page website brief

On the site: Research: What are we trying to accomplish?

Source: Aesthetary skill: Interview stakeholders who disagree

Why it matters. Every session starts with no memory of the last one. An agreement you only made in chat is gone tomorrow; a line in this file is read again every time.

Example. The bakery’s CLAUDE.md is six lines long. Two of them: Facts: only from claims.md. Unknown = [CONFIRM: …] and Never: delete pages, change prices, add reviews.

Watch out. There can be more than one. Both tools also read a personal file that applies to all your projects, and both combine the files from the top of the project down to the folder you’re working in, nearest last. Claude Code reads AGENTS.md only when the project has no CLAUDE.md, unless you change that setting. And it’s instructions, not a lock: you still read the plan before you approve it.

Related: Coding agent, Session, Plan mode, Repository, Agent brief, Markdown

Learn it: Keep your project in files the AI can read, Brief an AI agent before it writes code

On the site: Prepare: The file every session reads

Source: How Claude remembers your project (CLAUDE.md) (Anthropic · Claude Code), user file ~/.claude/CLAUDE.md; files concatenated root down; AGENTS.md read when there’s no CLAUDE.md; “context, not enforced configuration”; Custom instructions with AGENTS.md (OpenAI · Codex), ~/.codex/AGENTS.md; concatenated root down, closer files later; Aesthetary skill: Keep your project in files the AI can read

Why it matters. Most checks in Aesthetary’s skills are one typed line, such as a search of the finished files for CONFIRM. Coding agents work the same way: they run commands and read what comes back, so you need to be able to read it too.

Example. Type git log --oneline in the bakery’s folder and the terminal prints its history, newest first, one save per line: e72d0b1 Revert "Footer links: agent build" at the top, a41c9f0 Position: homepage leads with bread at the bottom.

Watch out. Terminal, shell and command line get used as if they were one thing. Strictly, the terminal is the window, the shell is the program inside it that runs what you type, and the command line is the line where you type. CLI tools are programs made to run there.

Related: Git, Coding agent, Repository, Commit

Learn it: Terminal basics, Use Git as a checkpoint before an AI agent changes your build

On the site: Prepare: The bakery’s project folder, and what you need to start

Source: Command line crash course (MDN (Mozilla)), terminal, shell and command line; CLI tools; Aesthetary skill: Use Git as a checkpoint before an AI agent changes your build

Why it matters. They’re what someone reads before deciding to click. If impressions hold steady while clicks fall, people still see the result and pick something else, and the title and snippet are the first place to look.

Example. The bakery’s pre-send gate has a line for them: unique on all 6 pages. Google’s guide asks for a title that belongs to that page alone and says clearly and briefly what’s on it.

Watch out. A change doesn’t show at once: Google says some changes appear in hours and others take months. And these aren’t the tags a chat app reads for its link card. Those are the Open Graph tags, set separately.

Related: Search engine optimization (SEO), Open Graph, Google Search Console, HTML, Pre-send gate

Learn it: Run a pre-send gate, Read Search Console without fooling yourself

On the site: Test: Before it’s sent

Source: Google Search Central guidance (SEO Starter Guide, AI features) (Google), title links, snippets, meta description; timing of changes; Aesthetary skill: Run a pre-send gate; Aesthetary skill: Read Search Console without fooling yourself

Why it matters. List the sizes on a page an AI tool built and you’ll often find nine or ten. Nobody can say what the difference between 19 and 20 pixels means, because nobody decided, and the reader can’t tell which text matters more.

Example. The bookbinder’s scale has four steps: --type-display 3.5rem, once per page; --type-heading 1.5rem, for section openings; --type-body 1.125rem, for reading; --type-meta 0.875rem, for captions and materials.

Watch out. A scale generated from a ratio gives you more steps than you need: keep only the ones that stand for a rank. And size isn’t the only way to rank something. Position, weight and the space around it rank things too.

Related: Typography, Typeface and font, Visual hierarchy, Design token, Spacing scale

Learn it: Choose a typeface and build a type scale

On the site: Design: From direction to design specification

Source: Aesthetary skill: Choose a typeface and build a type scale

Why it matters. Type carries most of a site’s voice, so the face needs a reason you can say out loud. Every extra weight or style is another file the page has to load.

Example. The bookbinder’s three directions made three choices: Hanken Grotesk, one text face in two weights; Space Mono, a typewriter face, for everything; and IBM Plex Sans for titles with Plex Mono capitals for labels. In the third, the second family has a job the first can’t do: it sets labels the way lettering sits on a drawing.

Watch out. In everyday talk “font” means both, and that’s fine until you count what the page loads. “Luxury, so a thin serif” is the literal choice, not a reason: choose the face for what the site has to do.

Related: Typography, Type scale, Web performance, Visual direction

Learn it: Choose a typeface and build a type scale

On the site: Design: One website. Three visual directions.

Source: Aesthetary skill: Choose a typeface and build a type scale; Aesthetary skill: Develop three different directions, then choose

Why it matters. Most of a website is text. Set badly, with too many sizes, lines that run too long or a display face used for paragraphs, it’s tiring to read before anyone notices the design.

Example. Swiss Style’s record sets text at 45 to 75 characters per line and labels that rule “Not part of the aesthetic”: it’s current reading practice that would apply to any build, so you keep it whichever look you choose.

Watch out. Line length is counted in characters, not pixels. A paragraph that runs the full width of a very wide window is broken, even though nothing overlaps.

Related: Typeface and font, Type scale, Visual hierarchy, Accessibility, Width sweep

Learn it: Choose a typeface and build a type scale

Source: Aesthetary skill: Choose a typeface and build a type scale; Aesthetary skill: Read an Aesthetary record; Aesthetary skill: Test responsive behavior across every width

Why it matters. A draft is public the moment it has one: anyone with the link can open it, and a search engine that finds the link can list it. And anything an address carries, such as an email in a query string, can end up in your analytics.

Example. For Kiln Lane’s booking form, the measurement skill lists an email address in a query string as a leak of personal data, and /thanks with no query string as safe to send.

Watch out. The last part of a path, like boiler-repair in /services/boiler-repair, is often called the slug. Keep it short, readable and stable, because changing it later breaks links that pointed there unless you redirect the old address.

Related: Domain name, Review build, Personal data, Web analytics, Site plan, Hosting

Learn it: Put the review build online, Decide what to measure before launch, Run a pre-send gate, Build a sitemap where every page has one job

On the site: Structure: The pages

Source: Aesthetary skill: Decide what to measure before launch; Aesthetary skill: Put the review build online

Why it matters. A site can look finished and still lose people three questions before the button. You only see that by going through it as a visitor would, on a phone, with the questions they actually have.

Example. Auditing the made-up Harbour Lane clinic’s site, the audit skill pairs this lens with structure and asks: can a visitor find what they came for, and do it? For prices the answer was no. They existed only inside a PDF.

Watch out. People often use the word for the look of the screens. The look is part of it, but most problems sit in the structure and the words: a price nobody can find, a label nobody recognizes, a form that loses what you typed.

Related: Information architecture (IA), Visitor journey, Navigation, Accessibility, Site audit, Conversion

Learn it: Audit an existing site, Design the visitor's path to an honest next step

Source: Aesthetary skill: Audit an existing site

Why it matters. A site plan can look complete and still strand someone; the walk finds the gap. It also shows where people hesitate, which is where proof belongs.

Example. The Leeds plumber’s main journey: at 11pm water is coming through the ceiling. On their phone they read “Boiler repairs and emergency leaks in Leeds”, see Call now with the call-out fee beside it, find Leeds under Where we work, check the Gas Safe number against the register, and call.

Watch out. A journey written from the brief is the path the plan is built for, not a record of real visitors. Walk it with a keyboard and a screen reader too, then walk it backwards: a page no path reaches gets cut, or folded into one that a path does reach.

Related: Site plan, Page job, Primary action, Audience, Proof, Navigation

Learn it: Design the visitor's path to an honest next step, Build a sitemap where every page has one job

On the site: Structure: the main journey

Source: Aesthetary skill: Design the visitor's path to an honest next step; Aesthetary skill: Build a sitemap where every page has one job

Why it matters. Ask an AI tool for three and you’ll often get one layout in three color schemes, which leaves nothing real to choose between. Options that disagree about what matters most let you choose on the brief instead of on taste.

Example. The bookbinder got three. A, the object: one book per screen, inspected, leaning on Quiet Luxury. B, the archive: index cards and catalog numbers, leaning on Archival. C, the bench: the making order with the parts named, leaning on Engineering Drawing. A won, because the brief’s job is to show construction and A puts it on every screen.

Watch out. Swap the colors between two of them. If they now look like the same site, they were one. And don’t blend the winner with the best bits of the losers: keep one principle at most, and keep the losing ones in the project folder with the reason they lost.

Related: Art direction, Design specification, Aesthetic, Category default, Positioning, Website brief

Learn it: Develop three different directions, then choose, Write an art-direction brief that survives the build

On the site: Design: One website. Three visual directions.

Source: Aesthetary skill: Develop three different directions, then choose

Why it matters. If nothing stands out, nothing leads, and the visitor has to work out what matters. If two things fight for first place, the page hasn’t decided.

Example. In the bookbinder’s chosen direction the photograph is seen first, then the headline under it, then one button at the end. On a school’s term-dates page, the thing that wins is the dates.

Watch out. Step back and squint: whatever your eye lands on first is what leads. This is the visual order. Reading order is the order in the code, which a screen reader follows, and the two should match at every width.

Related: Reading order, Type scale, Layout, Wireframe, Primary action, Spacing scale

Learn it: Wireframe for hierarchy before style, Choose a typeface and build a type scale

On the site: Design: Common design mistakes

Source: Aesthetary skill: Wireframe for hierarchy before style; Aesthetary skill: Choose a typeface and build a type scale

Why it matters. Naming the rules is what lets you work in one on purpose instead of imitating a screenshot of it. A mood word gets you the AI’s average of every site that used the word.

Example. Ask someone to describe Swiss Style and you’ll hear grid, Helvetica, red. Of those three, Aesthetary’s record requires only the grid.

Watch out. Some rules belong to a writing system, not to the visual language. “Set it vertically, read right to left” is a rule of Japanese writing that manga follows because manga is Japanese; carry it into an English site and you’ve broken the writing, not captured the look.

Related: Aesthetic, Element, Design grammar, Typography, Art direction

Learn it: Read a visual language area by area, Read an Aesthetary record

On the site: Learn: Vocabulary

Source: Aesthetary skill: Read a visual language area by area; Aesthetary skill: Read an Aesthetary record

Why it matters. It turns “can people use this?” into checks a person can run, record and point to by number. Level AA is the usual target: Aesthetary’s own accessibility page aims for 2.2 at AA and says plainly that it isn’t there yet.

Example. The bakery’s faint captions fail success criterion 1.4.3, which asks for at least 4.5:1 for normal text, and the missing focus outline fails 2.4.7. Each line in the QA record carries its number, so whoever fixes it can find the rule.

Watch out. Passing every criterion isn’t the same as people being able to use the site, and a creator’s own check can’t claim conformance. WCAG 3.0 is a working draft that W3C says to cite only as work in progress, so build to 2.2.

Related: Accessibility, Contrast ratio, Keyboard access, Focus indicator, Alt text, QA record

Learn it: Test a page with keyboard and screen reader, Fix accessibility at the source, Build color roles and check contrast

Source: Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), W3C Recommendation, 12 December 2024; WCAG 3.0 (W3C), Working Draft, 10 September 2026; Aesthetary skill: Test a page with keyboard and screen reader

Why it matters. It’s how you find out whether the site does its job after launch. It’s also an easy place for personal data to leak: Google’s own policy for its tool says page addresses and page titles are where that happens most often.

Example. Kiln Lane counts page views plus two steps toward a booking: booking_started, and booking_sent sent from the server once the booking is confirmed. Before launch it takes its own visits out: on Vercel with a localStorage flag checked in beforeSend, in Google Analytics 4 (GA4) by defining internal traffic and adding a filter, tested before it’s switched on.

Watch out. What you can track depends on the plan; on Vercel’s Hobby plan there are no custom events at all (checked by the skill on 2026-10-06, and plans change). Whether the site needs a consent banner is a legal question for someone qualified, so read what the tool stores on its maker’s own privacy page before you describe it to anyone.

Related: Measurement plan, Metric, Conversion, Personal data, Cookies and consent, Google Search Console

Learn it: Decide what to measure before launch

Source: Aesthetary skill: Decide what to measure before launch; Plausible (Plausible); Umami (Umami)

Why it matters. Google judges it by what most visitors get, including the ones on old phones, not by how the page loads on your laptop. And most slowness is made in a few places, an image file, a font, a late banner, so it can be fixed once where it’s made.

Example. Spoke and Sons wrote its guess down first: the hero photo, a 2.4 MB file 4000 px wide shown at about 400 px, would be slow on a phone. The lab run said otherwise. The headline was waiting on a web font, and a late booking banner pushed the page down.

Watch out. Write the guess down before you run the test. Run the test first and the tool does all the thinking: you get a faster page and no better instinct for the next one.

Related: Core Web Vitals (LCP, INP, CLS), Lab data and field data, Lighthouse, Fix at the source, Check routine

Learn it: Predict, measure and fix performance, Set a post-launch check routine

On the site: Test: Speed

Source: Core Web Vitals (LCP, INP, CLS) (Google (Web Vitals initiative)), judged at the 75th percentile of page loads; Aesthetary skill: Predict, measure and fix performance

Why it matters. Without it, the client describes a feeling, the designer hears a feature list, and nobody writes down what the site is for. Its do-not list also stops an AI draft before it writes “trusted by hundreds of happy customers”.

Example. Ines’s brief.md opens with PURPOSE: get people with something to frame to send a photo and a size, so she can quote before they visit. Under DO-NOT: no testimonials until she supplies real ones, no same-day turnaround claim, no stock photos of frames she didn’t make.

Watch out. “Brief” names other documents too. The agent brief tells a coding agent what to read and what to leave alone before it writes code, and the art-direction brief (direction.md) says how the site should look. Say which one you mean. And if nothing could fail a brief, it isn’t one yet.

Related: Goal (and wish), Requirement, Audience, Positioning, Agent brief, Art direction

Learn it: Write a one-page website brief, Review the work against its brief

On the site: Plan: What you’ll have written

Source: Aesthetary skill: Write a one-page website brief; Aesthetary skill: Review the work against its brief

Why it matters. Layouts break between the widths you checked. And someone zoomed in to read on a laptop is using your narrowest layout: WCAG treats a 1280-pixel window at 400% zoom as 320 pixels wide.

Example. A garden designer’s services grid looked fine at 1440, 768 and 390, then broke at 1,012 px: three columns of 290 px cards, every title wrapped to four lines. The cause was a rule, “three columns at any width above 768”. The fix was a grid that fits as many 18rem columns as there’s room for.

Watch out. A new breakpoint at the broken width only patches it; the next longer service name breaks it again at 1,060. Change the rule, then sweep the whole range again, because a changed rule moves things. And open the site on a real phone before you send.

Related: Responsive design, Layout, QA record, Pre-send gate, Fix at the source

Learn it: Test responsive behavior across every width, Plan responsive structure as rules

On the site: Test: Every width

Source: Aesthetary rule: Responsive is a rule: sweep every width, fix the rule; Web Content Accessibility Guidelines (WCAG) 2.2 (W3C (Accessibility Guidelines WG, WAI)), 1.4.10 Reflow; the 320 and 1280-at-400% note is in Understanding 1.4.10; Aesthetary skill: Test responsive behavior across every width

Why it matters. The moment a page has a typeface and a brand color, people judge the look and stop seeing the order. Ask a coding agent for a homepage and you get a styled one, and the review turns into an argument about a gradient while the prices sit buried at the bottom.

Example. The top of the bike workshop’s homepage, as text in a box: [1] We fix road, commuter and cargo bikes, [2] ( Book a slot ), [3] Service from [ CONFIRM ] · see prices, an unnumbered image box, then the mechanics and the hours. Blur the screen: if your eye lands on the image box before line 1, the box is too big.

Watch out. Use the real copy, never lorem ipsum, because the order depends on what the words say and how long they are. Keep it away from the production site. A rough page that gets promoted becomes the design by accident.

Related: Reading order, Visual hierarchy, Slot, Copy, Page type, Production

Learn it: Wireframe for hierarchy before style

On the site: Structure: one page, top to bottom

Source: Aesthetary skill: Wireframe for hierarchy before style

Why it matters. It tells search engines which pages exist, including ones the menu doesn’t link to. It’s a help, not a requirement: Google says it isn’t needed, and listing a page doesn’t guarantee it gets indexed.

Example. When a coding agent crawls Harbour Lane Physiotherapy’s site, it reads sitemap.xml and robots.txt as well as following the menu, because a sitemap often lists pages the menu doesn’t. At launch, the pre-send gate checks that it lists the real pages.

Watch out. This is the only thing this site calls a sitemap. The planning list of every page and its job is the site plan (ia/site-plan.md); one doesn’t create the other. Older material, including the skill title “Build a sitemap where every page has one job”, still uses the word for the site plan.

Related: Site plan, Crawling and indexing, robots.txt, Google Search Console, URL, Search engine optimization (SEO)

Learn it: Harvest a client's whole web presence with AI, Run a pre-send gate

Source: Sitemaps XML protocol 0.9 (sitemaps.org (search-engine-supported)), urlset, url, loc required; lastmod optional; Google Search Central guidance (SEO Starter Guide, AI features) (Google), a sitemap isn’t required; Aesthetary skill: Harvest a client's whole web presence with AI