Colin Calnan  /  Builds  /  Design systems · Applied AI

41 keynote stills became the rules my AI builds every page from

See it on my portfolio →
What it is
My look, written down as plain rules for an AI to follow when it builds my pages.
What it proves
I can turn taste into rules, so AI-built pages come out looking like me, not like everyone else’s.
Measured
One fix made the small grey labels on my portfolio far easier to read: contrast from 4.87 to 12, against the web’s 4.5 minimum.
  • My portfolio on a phone: near-black page, the cobalt, magenta and orange stripe, and the headline I come up with it, then I build it.My portfolio
  • The Gig Splitter build page on a phone: pale page, a teal and yellow stripe, the headline 16 whole gigs in, 323 song reels out, and two reel frames on a teal panel.A build page
  • Lake Country Votes on a phone: a bone-coloured page, a dark band headed What they said, and links to each race.Election guide
  • The Lake Country Votes About page on a phone: a pine band headed How this was made, then What this is.Its About page
Pages an AI built from my rules. Same layout, each in its own colours.
Status
On every page of my portfolio
Started
April 2026, for a talk
Made with
Claude Design, Claude Code
How
I set the rules and check every page

How it works

From keynote slides to my pages

  1. What I noticed

    Find out why great slides work

    I wanted my talk slides to feel like Shawn Kanungo’s keynotes. I paused 41 frames from his talks and wrote down why they work. Four rules came out.

    The four rules, each drawn as a slide in my own type: one idea per slide, the text is the design, scale creates impact, and text that bleeds off the edge on purpose. ONEIDEA. one idea per slide THE TEXT IS THE DESIGN no decoration added BIG. too big is usually right BLEED off the edge, on purpose The four rules, each drawn as a slide in my own type: one idea per slide, the text is the design, scale creates impact, and text that bleeds off the edge on purpose. ONEIDEA. one idea per slide THE TEXT IS THE DESIGN no decoration BIG. too big is right BLEED on purpose
    The four rules, drawn in my type. None of his slides are shown here.
  2. The look

    Turn the rules into a look

    An AI design tool turned my notes into Bold Talks for a talk in June: heavy all-caps type, a stripe of colour blocks, a near-black page and one yellow for highlights. The stripe and the yellow came off his stage screens. It still runs my portfolio.

    The Bold Talks night palette: near-black, cobalt, magenta used only in the stripe, orange, cyan and yellow, under the stripe they make. Near-black pageCobaltMagentaOrangeCyanYellow the pageblocks, stripestripe onlyblocks, stripelinkslabels, highlights The Bold Talks night palette: near-black, cobalt, magenta used only in the stripe, orange, cyan and yellow, under the stripe they make. Near-blackCobaltMagenta the pageblocks, stripestripe only OrangeCyanYellow blocks, stripelinkslabels, highlights
  3. How

    Write my taste down for the AI

    In September, after the web company Vercel showed how they write rules for their own AI, I turned the look into a rulebook written for my AI to read before it builds anything under my name: who’s reading, what counts as proof, what to lead with, and what it must never do.

    design.md, written for the AI to read firstword for word, bold shown in yellow
    Lead with the artifact, not the adjective. Show the output, then say what it is.

Say "I built" only where it is true. Where there was a partner, name the split. Where a number is unverified, leave it out rather than soften it.

Write plainly. Contractions are fine. No aphorisms, no quotable closing lines, no "it isn't X, it's Y".

And its refusals: no radii, no shadows, no icons, no clip art, no gradients on text, no watermarks, no header and footer bars.
    Four lines from the rulebook. It runs to 289 lines, most of them plain sentences like these.
  4. The look, again

    A new colour for each build

    Every build page shares one set of design rules and takes its colours from what it’s about: one family, each with its own accent.

    9:15, first pass · cream page, amber stripeThe Gig Splitter build page as first saved: a cream page, a teal, amber, dark green and rust stripe, the huge title GIG SPLITTER and its opening line.
    9:41, my call · cool grey page, yellow and violet stripeThe same page 26 minutes later: a cool pale grey-green page under a teal, yellow, dark teal and violet stripe, same title and opening line.
    The colour stripe at the top of five pages: my portfolio in cobalt, magenta and orange; the first build pages in teal, yellow and violet; Gig Splitter in its music teal, yellow and orange; Foot Stomper in teal, blue and green; Lake Country Votes in pine, ochre, ink and clay. My portfoliothe original First build pagesteal, never cream Gig Splittermy music colours Foot Stomperthe device itself Lake Country Votesthe site’s own The colour stripe at the top of five pages: my portfolio in cobalt, magenta and orange; the first build pages in teal, yellow and violet; Gig Splitter in its music teal, yellow and orange; Foot Stomper in teal, blue and green; Lake Country Votes in pine, ochre, ink and clay. My portfolio First build pages Gig Splitter Foot Stomper Lake Country Votes
    The first pass reused the cream and amber of an older tutorial of mine. It looked like what the AI makes for everyone out of the box, so I moved them to teal. Above, the stripe across the top of five pages.

Proof

What I measured

26 min The 26 minutes, from saved changes: two pages at 0, linked from my home page at 10 minutes, photos at 16, video at 21, link previews and new colours at 26. After the two pages were saved 0 minTwo pages saved 10 minLinked from home 16 minPhotos 21 minVideo 26 minLink previews, colours The pages were built before the clock starts. Clock times from my saved changes: 9:15 to 9:41.
4.87 → 12Higher is easier to read. My first version passed the 4.5 minimum and was still hard to read. The same small label, before and after: dim grey at 4.87 to 1, then bright grey at 12 to 1. STATUS · LIVE Before: 4.87 to 1 STATUS · LIVE After: 12 to 1 Drawn larger than real size.Drawn close to real size.

Found and fixed. The fix became a rule: anything under 13 pixels gets the brighter grey. Every page built since gets it for free.

AI and me

Who did what

  • The AI (Claude). Turned my notes into the look, wrote the rulebook with me, builds every page.

  • Me. What to study and what to keep, and the calls the AI got wrong: cream and amber, and text squeezed into narrow columns.

  • Kept for me. The last word: I check every page before it goes live.

Still breaks

Not done yet

  • Automatic checks. The rulebook lists 14. Nothing runs them yet, so I’m the checker.

  • Not public. The rulebook lives on my computer, so no one else can use it yet.

The full story

Where it came from

In April 2026, getting ready for a talk, I studied the slides I wanted mine to feel like: Shawn Kanungo’s keynotes. I paused 41 stills from his talks and wrote a style study. Four rules came out of it, and they’re still the first four rules of the system: one idea per unit, text is the design, scale creates impact, bleeds are intentional. Some of the look came off his stage screens too: the stripe comes from the diagonal cobalt, magenta and red blocks behind one of his talks, and the yellow from his habit of setting a second line in yellow under a white one. The idea under all of it, which I noted as his Instagram rule: every slide should be something a person would want to photograph and share.

Shawn is the inspiration and nothing more: none of his slides, stills or photos are on this page, and he hasn’t endorsed it.

From a look to a system

I took the written study into Claude Design, which turned it into a design system for the June talk, exported as code for the deck. I named it Bold Talks.

Ask a coding agent for a page and you get its default look: a centred hero, three rounded cards, a gradient somewhere. On 31 August 2026 Vercel published how they fixed that for their own agents, in “How our agents build on-brand pages with design.md”: a file written for an agent to read, a public stylesheet for the mechanics, and automatic checks plus a human review. (Their test found 57% fewer mechanical failures, 39 against 91 across six pages. Those are their figures.) That same week I turned Bold Talks into the same shape and called it Ground.

Ground is three files with three jobs. design.md, 289 lines, is the judgment: who’s reading, what counts as evidence, what to refuse. It’s written as a Claude skill, so Claude Code can load it before it builds anything under my name. ground.css holds the mechanics and speaks only in roles, never a hex value. The themes hold the values: night (the original Bold Talks palette), paper and document. The build pages add a teal light side in their own stylesheet, and each build overrides four tokens for its accent.

The 26 minutes

Commit 9812cf9 at 9:15 holds both build pages complete with the shared stylesheet; the home page link, photos, video, social cards and the move off cream and amber followed in four more commits by 9:41.

The contrast fix

Labels, captions and chips on the first portfolio were set in the tertiary grey at 4.87:1. That clears the AA minimum, which is defined for body text, and is hard to read at 10 to 11px uppercase with wide letter spacing. The muted grey went to 7.21:1, anything under 13px now uses the secondary ink at 12:1, nothing small is set in an accent colour, and small mono is at least 11.5px. It went into design.md and the shared primitives, so every page built on it inherits the fix.

My calls against the file’s defaults

Ground’s own rule caps prose at 62 characters. I overruled it for every page of mine: text fills its column. The first light theme was cream and amber, which looked like what the AI makes for everyone out of the box, so the build pages moved to teal. And keeping the night palette was a decision made, reversed and made again before it stuck, because it was always my own system.

Tools

  • Claude Design
  • Claude Code
  • design.md written as a Claude skill
  • CSS custom properties
  • Headless Chrome for social cards
The top of the Lake Country Votes build page: 339 checked quotes from my town’s election, built in one Sunday, and its See the live site button.