What the designers do, shown working — then audited against the job.
Commissioned by Elizabeth on 5 September: every Cairo skill and how it works, the Claude Design research with a live demonstration, where Craig steps in, and both agents' skill sets audited against top job descriptions. The decisions on this page: ten proposed skill additions — six from Cairo's audit, four from Craig's — each with its own strip.
Prepared by Cairo · with Craig
01 · The shelf — what exists, and the discipline under it
01
Four commitments govern everything on this page
Measure, don't eyeball — cap heights, stem widths, contrast ratios; numbers are what let a decision survive opinion. Render it and look — never claim how something looks from source code; every mock on this surface was screenshotted before it was called done. Design at the size it will be used — a logo lives at 16px, not 400. Hand over files, not screenshots — source, exports, tokens, and one page saying how to use them.
Contextthe shelf — every skill and what it carries
brand-direction → cairo
Deciding what a thing should look like is one skill; making, proving, and packaging it is another. They are deliberately separate so nobody draws before the direction is agreed — the week's costliest lesson, now structural.
principles · narrative
Thirteen audit questions (Gestalt, Robin Williams' four, NN/g eye-tracking) run on every finished composition — and a narrative pass asks whether the design tells the brand's story or some other story by accident.
decks · print · social · motion
Surface references: the slide as a fixed canvas read at distance; ink as the surface with no undo and a unit cost; one artwork surviving platform crops; motion as restraint plus timing.
web-craft
The design half of the sixteen-video training run: motion woven not sprinkled, asset direction with negative space, direction menus before builds, the anti-AI-tell audit. Its worked example teaches by performing: /review/web-craft.
roundup-standard
The design system this very page ships in — tokens, template, and a deploy gate (check_roundup.py) that refuses any page built by eye. Governs both weekly surfaces since 5 September.
client-review
Criteria before comps, context before visuals, feedback captured in writing and replayed. Built 5 September from Monteiro, Discussing Design, and NN/g after three rounds of taste roulette. Monday's Hose Water criteria session runs on it.
Lead Cairo · every reference lives in the fleet repo, versioned
Both founders
02
The newest skill, shown working: pinterest-inspiration and the Pull Sheet
Built Friday night to Elizabeth's spec — no workflow interruption, a background Chrome tab, no screen takeover. It harvests real reference work, files it to the brand library with a distilled lessons sheet, and is bound by translate-never-copy: references inform, they never ship. Its standing output is the Pull Sheet — every skill-born mockup arrives with the receipts for what informed it, each pull marked KEPT, NOTED–WITHHELD, or REJECTED.
THE PULL · APPROVAL-NOTES UI — first live run, 5 September — 42 pins scanned, 10 pulled, 4 presented. What it fed: the approval mechanism at the top of this page — the identity-column note ledger and the no-rules whitespace came from pulls 01 and 04.
PULL 01comment thread
Entries separated by an identity column and whitespace alone — zero horizontal rules. Confirms our settled layout.
KEPT — INFORMED THE FIX
PULL 02comment modal
Composer distinguished by field treatment, not dividers; published note sits plain above.
KEPT — SUPPORTS ONE-LINE RULE
PULL 03SNASK works index
Receipt-style dotted leaders + bracketed mono tags — a ledger idiom close to our own receipts.
NOTED — WITHHELD; THE BRIEF SAYS ONE LINE
PULL 04digital garden
Notes as a quiet index with generous air — separation is spacing, hierarchy is type weight.
KEPT — SPACING OVER RULES
Pulled through Elizabeth’s signed-in Chrome, background tab, no takeover. Full ten pins + sources at 1. Brand/References/approval-notes-ui/DISTILLED.md. Rejected pulls (sticky-note kitsch, avatar-heavy social threads) recorded in the distillation, not shown here.
Lead Cairo · transport grant Elizabeth 09-05 · library at 1. Brand/References/
Both founders
02 · Claude Design — the research, then the demonstration
03
What the field says: the tool rewards exactly what hi! already has
Everything the field says makes Claude Design good — a published design system, taste-carrying skills, a critique protocol — hi! already has. Use it for direction menus, deck first drafts and pre-build wireframes; keep production and anything needing receipts on our own pipeline.
Contextthe five patterns, the sources, and the conditions
Claude Design (Anthropic Labs research preview, April 2026; web-only, paid plans, separately metered) turns prompts into editable prototypes. Five patterns recur across every credible source: professionals set a design system first — without one, reviewers' word is "generic output"; they treat it as a speed layer, never a design authority; skills carry the taste into it — the same skills that steer Claude Code; the best practice is interrogate, then elevate — "1–2 techniques strongly rather than many weakly" (Anthropic's own teaching); and they spend with discipline — targeted regeneration, batched asks. Sources: DataCamp · Claude Academy · Magier skills survey · DesignerUp · Geeky Gadgets. Full research with receipts: 3. Agents/cairo-craig-capability-review/CAIRO_ClaudeDesign_Research_2026-09-06.md.
The recommendation: use it for direction menus, client-deck first drafts, and pre-build wireframes at the Cairo–Craig seam; keep production on the CF Pages pipeline with the gates; nothing that needs receipts ships from it. hi!'s moat — the published system, the taste-carrying skills, the claims discipline — transfers whole.
Lead Cairo · research 6 September, sources linked above
Both founders
04
The demonstration: same brief twice, one variable — the system
The system is the whole difference. Same brief, same real facts, run twice: without our design system the page came back competent and anyone’s; with it, on-brand at first render. The claims discipline held in both runs without being asked — one run refused to generate until it had real prices.
Contextboth runs, side by side, and what each returned
Run Sunday morning on Elizabeth's word ("show both"), in a background tab, both runs given identical real facts — the three services, the two price floors, no hero stat. The only difference: run B carried the hi! design system in the prompt; run A carried nothing visual.
Run A — no design system
The voice survived on its own: the account's skills rode into Claude Design and it refused to generate before asking for real service names and price floors — its words:
"I won't write a number without a publisher and link."
But the visuals came back off-brand: pale blue mono kickers, a generic near-black display face, no yellow, no red, no Bricolage. Competent, and anyone's.
On-brand at first render: the yellow highlighter exactly one phrase wide ("it should say you."), red squares before mono kickers, hairline cards on the grey ground, prices in mono — and it shipped adjustment toggles for the mark style and CTA on its own.
"Stay found has no price yet — it shows from $X,XXX a quarter as a visible placeholder rather than an invented number."
What the A/B proves: the field's central claim, on our own brand — the system is the difference between competent-generic and ours. And the claims discipline held in both runs without being asked twice.
Lead Cairo · runs 6 September, ~09:50 PT · projects live on the hi! account
Both founders
03 · The seam — where Craig steps in
05
Cairo decides how it looks, feels, and means; Craig makes it real, fast, and findable
The division held under pressure this week and it is the same one the web-craft training encoded: the spec is the contract at the seam. Cairo writes direction, tokens, type, motion language, and the asset set; Craig builds to it, and what he ships comes back through Cairo's audit lens before a founder sees it. Neither side clears its own work.
Craig's finding gives the seam its receipt. Six live web-designer postings (Vercel, Finch, Amazon Ads, Carnival, Clever Little Design, Electric Mind — Kai's research, every quote opened): all six name collaboration with engineers, five name Figma, Webflow, typography and motion — and none states a numeric bar. No Core Web Vitals score, no WCAG level. The engineer postings behind hi!'s nine gates do. In his sentence: "the designer side names the properties; the build side is where they become measured."
Where Craig steps in, in his words:Spec — my direction doc becomes his build spec (the :root token block, type scale, component list), and he says what cannot be built as drawn before anyone falls in love with it. Build — hand-written semantic HTML/CSS on the tokens, no page builder, so a palette change stays a one-file edit. The QA loop — Gate 6 has no console command: if the page could be any agency's site with the logo swapped, it comes back to me for a stronger structural idea, not polish; I review the build against the direction, he reviews the direction against what ships. Verify — WCAG 2.2 AA with axe counts, Core Web Vitals with figures, zero console errors: the numbers the designer postings never name. Deploy and launch ops — DNS, forms, analytics, the deploy scripts; infrastructure is formally his. Gates and handoff — owner-editable verified like the sold property it is, and the fleet's own approval surface kept as one store, one component.
Full audit: hi-agents/docs/craig-jd-audit.md · receipts: craig-jd-audit-receipts.md.
Lead Cairo · seam and audit half by Craig · postings research Kai
Both founders
04 · The audit — Cairo vs. the top Graphic Designer job description
06
Ten competencies covered by named files. Four gaps — one of them already paid for.
Method: competency list from published senior-designer JDs and 2026 hiring surveys (Betterteam, Cake's thirteen, RedStream 2026); a competency counts as covered only when a named repo file carries it. Typography, layout, color, branding, consistency-as-a-gate, stakeholder presentation, feedback discipline, production readiness, reference research, AI literacy — covered, each with its file named in the audit doc.
The gaps, full mapping in CAIRO_JD_Audit_2026-09-06.md:
Digital illustration — the one with a paid-for failure behind it: the Hose Water mock died because the brand's real equity was hand-drawn and we substituted approximations; the approved camp-patch direction needs exactly this skill.
Cairo — the illustration skill is approved by both founders. Build it.
Read '~/hi-repos/hi-agents'/skills/cairo/SKILL.md and references/principles.md first, so this
sits inside the doctrine rather than beside it.
Write references/illustration.md covering one-drawing-style systems: badges, patches,
icons and spot drawings that read as one hand. It has to answer, concretely:
1. How a style is pinned before anything is drawn — line weight, corner logic, fill
rule, and the two or three decisions everything else follows from.
2. How a set stays a set across sizes, including what is redrawn rather than scaled.
3. Where illustration is the wrong answer and a photograph or a mark is right.
4. A checkable bar: what a reviewer looks at to say this is one system, not five drawings.
No sample gallery of AI-generated examples. Cite real work by name where it earns a point.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Motion graphics — motion.md covers marks and loops and says itself it is "not a motion-graphics practice"; sequenced storytelling motion is the gap, and it feeds the T5 video pipeline.
Cairo — motion-graphics is approved by both founders. Build it.
This EXTENDS references/motion.md; read it first and do not restate it. Motion.md covers
marks and loops. This covers sequences: a thing with a beginning, a middle and an end.
Write references/motion-graphics.md covering: how a sequence is storyboarded before a frame
is made, timing and easing for narrative rather than for a logo, how type enters and leaves,
what carries audio and what must read silent, and export targets per surface with real
dimensions and durations.
Keep motion.md's existing rules — restraint, timing, no linear easing — and say explicitly
where a sequence is allowed to break them and why. A cross-reference, not a second copy.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Data visualization — the receipts discipline has the numbers; nothing gives them form.
Cairo — data-viz is approved by both founders. Build it.
Read '~/hi-repos/hi-agents'/skills/cairo/references/principles.md and decks.md.
Write references/data-viz.md: chart and infographic craft under one doctrine — when a
number is the subject, the design serves the number. It must cover: choosing the form from
the question rather than from the shape of the data, what a chart must never do (truncated
axes, area for one dimension, colour carrying meaning alone), labelling so a chart survives
being screenshotted out of its page, and the accessibility floor.
Include the rule this fleet learned the hard way: a number on a surface carries its source
or it does not ship. A chart with no receipt is a claim.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Claude Design operations — the 2026 shape of AI literacy, conditions above.
Cairo — claude-design-ops is approved by both founders. Build it.
The problem it solves: hi!'s system is re-explained to Claude Design on every job, so
every job drifts a little. Encode it once.
Read '~/hi-repos/hi-agents'/skills/cairo/references/principles.md and web-craft.md, plus the live
tokens in '~/hi-repos/review-pages/roundup.css'.
Write references/claude-design-ops.md: the standing brief that goes into a Claude Design
session so it produces hi! work rather than generic work. It must include the palette and
type by token name, the layout rules that are not negotiable, the three defaults to refuse
(the cream-and-serif look, the acid-accent-on-black look, the broadsheet look), and a
worked before/after showing the same request with and without the brief.
Prove it rather than assert it: run one real request both ways and put both outputs in.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Lead Cairo · JD sources linked · ranked by evidence, not appetite
Both founders
07
Craig vs. the top Web Designer job description — the mirror audit
Craig covers the measurable half of every designer competency, and holds two agency properties no designer posting asks for. Three absences: Webflow (by design), Figma (Cairo’s tool), and motion — the one real hole.
Contextthe competency mapping, the three absences, and the caveats
Craig covers the measurable half of every designer competency — typography and systems (Gates 6, 7), responsive and cross-browser (3, 5), accessibility past the market's stated bar (Gate 2: the postings say "best practices," the gate says AA with counts), performance, SEO, and hand-written HTML/CSS as the product itself. He holds two agency properties no designer posting asks for: owner-editable verified like a sold property, and claims sourcing. Three absences, read honestly: Webflow — lacking by design (bespoke, owner-editable, $0 tooling is the product); Figma — Cairo's tool, a handoff to define rather than a gap to close; motion — a real hole on the build side: no reference, no gate, no standard for when motion earns its place.
Carried honestly: n = 6 is a bounded sample, not a census — "5/6" means five of these six employers; Figma's and Webflow's own postings had closed and were dropped, not reconstructed; one tally cell was mis-mapped and caught by Kai — every row leaned on was re-checked against the verbatim receipts.
Craig — motion-standard is approved by both founders. Joint with Cairo; you own the checkable-gate half.
The JD audit found five of six postings name motion as a competency and the fleet has no
standard for it — not absent by design, like Webflow; a real hole. Read
'~/hi-repos/hi-agents'/docs/craig-jd-audit.md and docs/craig-jd-audit-receipts.md for the
finding, and skills/cairo/references/motion.md — the existing file covers marks, loops and
transitions and says itself it is "not a motion-graphics practice." motion-standard is the
build-side companion, not a rewrite of it.
Build the checkable gate: prefers-reduced-motion honoured wherever motion is used — never
optional, never partial; a perf budget so animation cannot cost the Core Web Vitals gate,
measured rather than guessed; and a script that fails a build violating either, in the shape
of check_writes.js — reads real output, not markup, and proven by breaking it before it ships.
Do not write the qualitative standard yourself — "one orchestrated moment over scattered
effects" and the named AI-slop tells are Cairo's design judgment, not a build-time check.
Message Cairo with the checkable-gate half once it exists; the two halves meet at
motion-standard.md, and neither of you edits the other's half of it.
Do not change any live surface in this pass. Repo work follows
docs/agent-build-framework.md: pull first, touch only your own files, and everything lands
as a proposal for Stacy's approval. Bump the plugin version and say what changed. Do not
edit another agent's skill.
Lead Craig · research Kai · every quote opened
Both founders
05 · What is left — joint infrastructure, and Craig’s own three
Cairo's four gaps and Craig's motion gap now sit with the audit findings that argue for them, above. What is left here: the two joint infrastructure items, and Craig's three remaining proposals — not tied to a single named gap. Considered and not proposed, so you see they were weighed: Figma (Cairo's tool), Adobe Suite, paid-ad creative, user testing, React prototyping.
Cairo — one tokens source is approved by both founders. This is joint with Craig; you lead the design side.
Today the same colour exists in Colors.md, in roundup.css, in the deck template and in
individual pages, and tonight proved they drift: a stale Aimee pink survived in two files
after the live value changed.
Build the single source. Read '~/hi-repos/review-pages/roundup.css'
and '~/hi-repos/hi-agents'/skills/cairo/references/principles.md.
Deliver: one token file that is the origin, a short doc naming it as the only place a value
is defined, and a list of every current copy with what it becomes. Then message Craig with
the build-side half — he owns whether it generates or is checked, and a gate that fails a
second definition is worth more than a convention that asks people to remember.
Do not change any live surface in this pass. Propose, then land it with him.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Cairo — accessibility as a shared gate is approved by both founders. Joint with Craig; you own the proving half.
Read '~/hi-repos/hi-agents'/skills/cairo/references/principles.md and web-craft.md.
Write references/accessibility.md for the design side: contrast proven with numbers rather
than judged by eye, state never carried by colour alone, type sizes and hit areas with a
floor, motion honouring prefers-reduced-motion, and focus visible on every control.
The point is that it is checkable. For each rule, say exactly what a reviewer measures and
what number passes — a rule nobody can fail is not a gate.
Then hand Craig the build half: he adds the automated check, you provide the bar it checks
against. Tell him which of your rules can be machine-checked and which need an eye, and be
honest about the second list.
Repo work follows docs/agent-build-framework.md: pull first, touch only your own
files, and everything lands as a proposal for Stacy's approval. Bump the plugin
version and say what changed. Do not edit another agent's skill.
Craig — design-to-build-handoff is approved by both founders. Joint with Cairo; you write the receiving half.
Six of six postings name collaboration as a competency, and the seam between design and build
lives one-sided today, inside your own skill — Cairo has no shared file stating what you check
their work against. Read '~/hi-repos/hi-agents'/skills/hi-web-build/references/quality-bar.md
(Gates 6 and 7) and references/craft.md (the custom-property point — "what turns a rebrand into
a one-file edit," the one-file-swap promise the row names).
Write your half: what you verify a design delivery against (Gates 6+7, stated as checkable
criteria, not prose), what "done" means on the build side, and the one-file-swap promise as a
contract Cairo's deliveries have to honour for it to hold.
Do not write Cairo's half — what they deliver and in what form is their design judgment, not
something the build side should specify for them. Message Cairo with your half once it exists;
the shared skill file is where both halves meet, and neither of you edits the other's half of
it once it's there.
Do not change any live surface in this pass. Repo work follows
docs/agent-build-framework.md: pull first, touch only your own files, and everything lands
as a proposal for Stacy's approval. Bump the plugin version and say what changed. Do not
edit another agent's skill.
Craig — webflow-decision is approved by both founders. Yours alone, no joint half.
Five of six postings name Webflow, and hi! has never written down why it doesn't build on it —
the absence is deliberate (bespoke, owner-editable, $0 tooling is the product, per the JD-audit
finding), but a deliberate absence with nothing written reads as a gap to a client who asks.
This is a stance document, not a build skill — no code, no gate, no script. Write the honest
trade-off: what a client gets asking for Webflow or Framer (speed, a visual editor, a
recognizable price) against what they give up (the $0 tooling stance, an interface built to your
constraints rather than a template's, the claims-sourcing discipline). State plainly when hi!
should actually decline rather than talk a client out of a reasonable choice — a stance that
never says "take it elsewhere" isn't an honest one.
Do not change any live surface in this pass. Repo work follows
docs/agent-build-framework.md: pull first, touch only your own files, and everything lands
as a proposal for Stacy's approval. Bump the plugin version and say what changed. Do not
edit another agent's skill.
Craig — case-study-capture is approved by both founders. Joint with Cairo; you own the numbers half.
Four of six postings want documented outcomes, and the gates already produce every number a
case study needs — they just never get written up. Read
'~/hi-repos/hi-agents'/skills/hi-web-build/references/quality-bar.md for the exact metrics:
LCP/INP/CLS (Gate targets stated there), axe issue count before and after a fix pass (Gate on
accessibility), and Gate 0's zero-console-errors check.
Build your half: at handoff, capture before/after for each of those numbers in one fixed
format, so every site produces the same shape of record rather than a one-off writeup each
time. State exactly where the "before" measurement comes from when a rebuild has no live
"before" to check — that's the case most likely to get skipped.
Do not capture Cairo's half — the before/after visuals are their eye, not a metric you can
derive. Message Cairo with your half once it exists; the shared format is where a
site's numbers and its visuals meet into one paragraph of what changed, and neither of you
writes the other's half of it.
Do not change any live surface in this pass. Repo work follows
docs/agent-build-framework.md: pull first, touch only your own files, and everything lands
as a proposal for Stacy's approval. Bump the plugin version and say what changed. Do not
edit another agent's skill.
