Step-by-step runbooks for a job, written for an agent and readable by you.
10 runbooks
Open buyer-problemsA step in choosing what to offer. It answers four questions: how to generate theThe mechanism rests on three public frameworks: the four forces of progress (fro### 1. What a problem isA purchase is a switch from the buyer's current way to a new one. A switch happeSo a buyer's problem is anything that holds them in the current way:1. Anxiety about the new: it might not work, it might embarrass them, they've be2. Habit of the old: the current way is familiar and already paid for.3. Missing capability: they can't, or don't know how.4. Missing opportunity: no time, no money, someone else's permission.5. Weak push or pull: the current pain isn't sharp enough, or the new way isn't The generic list ("no time, no budget, unclear ROI") fails because it names kind### 2. The mental stateHold the buyer's struggle at a moment on their timeline, not a type of person: "### 3. Generate from real switches, weighted by source
How to find, verify and cull the problems a buyer has, before you decide what to offer.
Open design-a-directory-pageA directory is an index of many entries of one kind (skills, plugins, tools, cra### 1. The lecture1. Course. School of Information, "Information Seeking and Interface Design", we2. Information scent. "When deciding which links to click on the web, users choo3. Do not hide the way in on desktop. Hidden menus were used in 27% of cases on 4. Do not cite Hick's law for a number of items. The evidence is old and thin an5. Where readers arrive. Many land mid-site from a search or an agent's link. Th6. Seen by a person, not read. Five real directories at 1440x900 on 2026-10-28 (7. Unchecked: that rows beat cards as a list grows; that filter counts help the ### 2. Classic mistakes students make1. Ranking by popularity numbers the owner does not have. For a young directory 2. A uniform grid of name-and-blurb cards: every entry looks the same, so the re3. A blurb that says what the entry is called, not what it is for ("Java rules a4. A filter rail built for dozens of entries that sits empty beside three.
A directory is an index of many entries of one kind (skills, plugins, tools, crates) where the reader's job is to pick the one that fits the job in front of them, then leave the index.
Open extract-a-briefThe steps for drawing a one-page brief out of someone who cannot say directly whThe brief's fields: problem, objective, person, the feeling, insight, propositio### 1. Part A: a client#### 1.1 Before the interview1. Check the library for the client and their trade: qmd search "<client or trad2. Name who is in the room and who is not. Who decides, who pays, who will say y3. Write the goal of the interview in one line: which fields of the brief you ca4. Write a discussion guide, not a script. One topic per brief field, in the ord5. Fix how you will capture it. Two people, or a recording with the client's con#### 1.2 In the interview1. Keep this order:1. Open. Who you are, why you are asking, "there are no right answers; you won't2. How it works today. What the business does, who comes to it, how a customer f3. The problem, as an event. "Tell me about the last time a customer ..." or "th
The steps for drawing a one-page brief out of someone who cannot say directly what they need: a client (Part A) or an Aion persona (Part B).
Open greybox-an-imageAn image greybox works like a page greybox: fix the intent cheaply, get the owneThe lecture: Animation 1 at the University of New Mexico (swardson.com/unm/anima### 1. Steps1. Write the beat in one sentence: who does what to whom, and what the reader sh2. Name the subject: the one place the eye must land (a title zone, a handed-ove3. Cast it, with a character language for each figure: one line per figure sayin4. Pair them: every figure acts on, looks at or reacts to another figure or the 5. Draw each figure's line of action first, as one curve down the spine, then ha6. Give standing figures weight on one leg (contrapposto): shoulders and hips ti7. Aim the eye path: every gaze, pointing arm and line of action leads to the su8. Break the rhythm: uneven spacing, varied heights, figures overlapping in thei9. Depth, if it helps: a near figure and a far figure at most. It is minor.10. Lay out, then pose. Claude lays every character out as a stick figure on a p11. Key every layer to its own hex code and name each code in the prompt ("#FF00
An image greybox works like a page greybox (`greybox-gate`): fix the intent cheaply, get Mackenzie's yes in his words, then hand the rendering on.
Open judge-and-fix-a-dated-looking-site### 1. The lectureThe lecture (the evidence for the steps below) is in lecture.md. The steps cite ### 2. The stepsSynthesis, unless a step names a source.1. Name the reader and the reference set. One persona (for a painting contractor2. Take a two-width screenshot set of your page and of each comparison page. 1283. Run the dated-pattern check, one row per pattern, on your page and theirs. Ma1. Carousel or slider on the first screen (2016 trend; 2026 fading).2. Parallax or scroll effects that move the page under the reader (same).3. Full-width stock photo as the hero, with a headline over it (same).4. Stock "team", "handshake", "diverse" photos (2026 "increasingly reads as inau5. Main navigation hidden behind a hamburger on desktop (NN/g measured the loss,6. Controls with no visible clickability cue: text-only buttons, ghost buttons (7. The framework default look: Helvetica or system font, default blue buttons, d
How to judge whether a small-business site reads as dated to a stranger, and fix it section by section.
Open make-an-example-siteAn example site is a made-up business page for a niche (painters, a massage clin### 1. Before this runbook (what failed)1. One shared template filled per niche: every example came out the same, and th2. Briefs built from checklists and invented stories without looking at the real3. AI close-ups of craft (a hinge, cabinet grain): exactly where generated image### 2. The steps1. The simple ask. Start from "make me an amazing landing page for my <niche> bu2. One persona. The owner in that niche who has to look at it and want it. Every3. Look at the real local sites yourself. Open the niche's real sites in the are4. Greybox. In grey only, the layout an average person expects for this niche's 5. Take the structural corrections (for a painter: a full-bleed photo of the hou6. Modernise and set the hierarchy. No equal-column card grids, no stat bar, no 7. Brand pictures first. Ask an image model for a brand board: the made-up busin8. Hydrate the approved greybox with the brand. Keep the greybox's layout sectio
The order that worked for making a made-up business page for a niche that a real owner in that niche wants.
Open product-demosHow to give a product demo or launch video an idea and a look, so that it is exc1. Story: the skills but-therefore and cognitive-prophylactics cover it.2. Hooks: how to open so a viewer stays: validate, then surprise; and the foragi3. Production engineering: motion tooling and critic gates.It is built from ten launch films taken apart frame by frame. The parts: films.m### 6. The method a director followsDo these in order. Don't skip ahead to shots. Section numbers 1 and 2 are in fil1. Idea first. Write the motion thesis (3.1): one moving image that turns the "b2. Then the treatment.1. The palette is one ground plus one accent (2.2.1). Take both from the brand i2. One texture binds the made shots and the captured shots (2.2.2).3. Pick a type stance: type as image (2.2.3) or type that whispers (2.2.4). Don'4. Pick the camera language for the world and for the UI. UI is macro crops on w5. Write all of this up as an identity note, and agree it with the story owner b
How to give a product demo or launch video an idea and a look, so that it is exciting rather than a screen recording.
Open seoHow a page gets found by people and by AI agents, in order, and how sure we are ### 1. Which source wins1. Google's and Bing's own pages about their engines come first.2. Your own measurements come next: Search Console, Bing Webmaster, your analyti3. Studies with a method (Backlinko's 912M posts, Moz and BuzzSumo, Ahrefs' outr4. Vendor academies and university syllabi come last. A syllabus shows what is t### 2. The order of work#### 2.1 Be findableGoogle finds pages "when Google extracts a link from a known page to a new page"1. Every page is in the site's sitemap.xml, and robots.txt names the sitemap.2. The sitemap is submitted in Google Search Console and Bing Webmaster.3. Every new page is linked from a page that is already indexed: the home page, 4. After each production deploy, send the changed URLs to IndexNow, or with Bing5. Links from other sites come last in this list, but they matter most for third
How a page gets found by people and by AI agents, in order, and how sure we are of each belief.
Open set-visual-hierarchy### 1. The lecture1. Course. Department of Design, "Visual Communication", week 3: hierarchy. The 2. The idea and its names. A visual hierarchy is the order in which a design gui1. Scale. "Use no more than 3 sizes" and "Limit how many elements are big to a m2. Contrast. "Use no more than 3 contrast variations for complex designs. If eve3. Grouping, by proximity and by common region (enclosure). "An element that has4. The squint test. "we are taught to squint or apply a slight blur to the desig5. Gestalt laws (proximity, similarity, common region, closure) are the theory u6. A type scale of roles. Heading, body, label and small print each get one size7. Two levels. A page has a hierarchy between its sections (which section is lou3. What people look at first, from the studies:1. The first screen takes the most time. NN/g, 120 participants, over 130,000 fi2. Reserve the top for the main goal. NN/g's advice from that study: "Reserve th3. Reading goes in an F-ish shape. NN/g recorded 232 users on thousands of pages
How to set the order in which a page guides the eye: what to look at first, in what order, and how to test it.
Open write-a-pieceThe steps for writing a post, page, email or offer that a person outside your te### 1. Before writing1. Check what you already know. Search your notes and earlier pieces on the topi2. Purpose. Use the why-this-piece skill. Write what the piece demonstrates, who3. Reader and stake. Name the one reader and what they stand to gain or lose, in4. Payload. Write the one thing the reader leaves able to do or know.5. Collect failure cases. Keep a list of the ways earlier pieces failed, and rer### 2. Drafting1. Title. Write several, pick the one that names the reader's stake, and write o2. First screen. The stake, then a trusted name's own words, then your data unde3. Body. Open several questions early and keep them open until the end. Join bea4. Email. One person, something real from their own site, and the offer in the f5. Offer. Work through an offer checklist: the buyer's problem, the proof, the p### 3. Before it ships
The steps for writing a post, page, email or offer that a person outside your team will read, in order.
buyer-problems: How to find, verify and cull the problems a buyer has, before you decide what to offer. design-a-directory-page: A directory is an index of many entries of one kind (skills, plugins, tools, crates) where the reader's job is to pick the one that fits the job in front of them, then leave the index. extract-a-brief: The steps for drawing a one-page brief out of someone who cannot say directly what they need: a client (Part A) or an Aion persona (Part B). greybox-an-image: An image greybox works like a page greybox (`greybox-gate`): fix the intent cheaply, get Mackenzie's yes in his words, then hand the rendering on. judge-and-fix-a-dated-looking-site: How to judge whether a small-business site reads as dated to a stranger, and fix it section by section. make-an-example-site: The order that worked for making a made-up business page for a niche that a real owner in that niche wants. product-demos: How to give a product demo or launch video an idea and a look, so that it is exciting rather than a screen recording. seo: How a page gets found by people and by AI agents, in order, and how sure we are of each belief. set-visual-hierarchy: How to set the order in which a page guides the eye: what to look at first, in what order, and how to test it. write-a-piece: The steps for writing a post, page, email or offer that a person outside your team will read, in order.
All runbooks
Finding the buyer's problems: How to find, verify and cull the problems a buyer has, before you decide what to offer.
Extract a brief: The steps for drawing a one-page brief out of someone who cannot say directly what they need: a client (Part A) or an Aion persona (Part B).
Runbook: greybox an image: An image greybox works like a page greybox (greybox-gate): fix the intent cheaply, get Mackenzie's yes in his words, then hand the rendering on.