Skip to content
StartSecond Pass — the hub →The whole course on one page.The first lesson →Add up the numbers on your own dashboard.IntroductionWhat the course is, and who it's for.
The seven parts
1 · Why AI output looks right and is wrong3/122 · Marketing sites0/103 · Derivation0/54 · States first0/65 · Record-heavy screens0/56 · Designing for agents0/77 · Working with the agent0/7
Also here
Rules index1 liveReference35 plannedRecipes12 planned
3 of 52 units published · Chapter 2 writing now · Updated 10 Sep 2026Full contents · 52 →
ENFR
Book a call ↗
Design system2026
Case study

Reckon

A rules layer for design agents building the software nobody demos: every figure traces to real data, every action fits the record it sits on, every state is drawn before a user finds it.

Design systemUI AgentsCopywriting
ClientInternal project
Year2026
RoleDesign + build
Timeline3 weeks
Visit the site ↗Talk about a similar project
Reckon — the full marketing page
Reckon — the full marketing page

getreckon.vercel.app — the whole page, one scroll.

Work details
TypeWebsite + design system
IndustryAI agents · UI generation
ClientInternal project
RoleDesign, copy and build
Year2026
Timeline3 weeks, blank file to live
StatusOpen source · in progress
DeliverablesRulebook, site, 8-screen demo
Fonts
NewsreaderInstrument Sans
Colours
Built with
ClaudeChatGPTNext.jsTypeScriptVercel

Written alongside Claude, shipped on Next.js and Vercel. The rules themselves are plain text, so any agent can load them.

Visit the site ↗
What it needed

Screens that look finished and fall apart on contact.

Agents generate UI fast. A dashboard appears, the numbers look plausible, and none of them reconcile. Empty, loading and error states are missing. Actions sit on records that cannot take them. The demo dies the first time a real user clicks. Reckon gives that generation a rulebook — one an agent can follow and a designer can argue with.

What I did

Brief

One page, one promise: ship the screen, not the guesswork. Everything that was not that got cut — no roadmap, no manifesto, no waitlist.

Structure

The page argues in order: the failure everyone recognises, the rules that prevent it, the proof they hold, then the price — free.

Design

Near-black stage, a single ember accent, Newsreader for the arguments and Instrument Sans for everything else. Screenshots are the illustrations; nothing is drawn that the product does not do.

Build

Next.js on Vercel. The rulebook ships as plain markdown so an agent can drop it straight into its context, and the site is the documentation.

Handover

Open source. Fork the rules, keep what works, argue with the rest — that is the point of writing them down.

What shipped

4 shots
Reckon — the fixtures and hostile-values section
The fixture section: the same roster in demo data and in the set built to break it.
Reckon — the ClaimsDesk worked product
ClaimsDesk: one brief, one desk, generated from a single hostile fixture.
Reckon — the shells and archetypes page, full length
The shells page, full length: four archetypes, three questions each.

What it changed

8screens in the ClaimsDesk demo, generated from a single data fixture
1rulebook, plain text, loadable by any agent
Freeopen source — take all of it
The next step

Building with agents and getting screens that do not hold? I run the rules over your product and redesign the two worst screens.

UX / UI audit · $690 fixed · 5–7 days
Talk about a similar project ↗

More work

All work ↗
Jedari Platform — the feedPrevious
Jedari PlatformProduct UI
Nexteneo — the homepage, full lengthNext
NexteneoWebsite