I built my whole marketing system as 30 web pages. First I threw out 12 designs.

I typed one command and got 30 pages on my site.

The hub at supermarketers.ai/system is my entire marketing system on one screen: five channels, five stages, every AI agent that does the work, and the part that stays human. Every cell opens its own page. Every agent links to the code on GitHub.

None of those pages were written by hand.

Getting there took a day of building and a dozen designs I threw away. Both halves are below: what I got wrong, then the five pieces that make it work, so you can build your own.

Where it started: someone else's map

I saved Ryan's Head of Content playbook as a swipe. One dark image, one root, five branches, and every leaf is a concrete line you could act on. "A solid content team runs on about $40k a month." That kind of line.

I wanted the same thing for what I do. What a SuperMarketer is: an AI-native, forward-deployed marketer who sits inside a team's real work and ships the systems along with the campaigns.

So I had Claude Code build my version in the same format. An organic version and a full-stack one with paid.

It was good. It was also obviously Ryan's layout with my words in it. I wanted something that was mine, and something that could live on my site and link to everything I've written.

That's where it went sideways.

The part where I got it wrong 12 times

I asked for "something more on brand." Here's what that produced, in order.

Six interactive prototypes. A supermarket floor plan (aisles for each channel, the Brain as the stockroom, case studies at checkout). A loop diagram. A thermal receipt. A subway map. A retail planogram. A periodic table of the SuperMarketer, with gaps for posts I hadn't written yet, the way Mendeleev left gaps for elements nobody had found.

Every one of them worked. Toggles, hover states, links to real posts.

And every one of them made the idea harder to understand. What I typed back at the time:

Then six simple concept cards. A layered stack, a Venn diagram, a comparison table, a T-shape, an input-output diagram, a nutrition label.

Cleaner. Also empty. My note:

Here's what I'd figured out by then, and it took a dozen tries to see it.

Every one of those designs was decorating the idea instead of showing the work. A metaphor costs the reader attention before it gives anything back. They have to learn how the floor plan works before they learn anything about marketing.

Ryan's map worked because every leaf was a fact.

What worked: draw what's actually built

So I stopped inventing and pointed Claude at what already exists.

I'd open-sourced the system I sell earlier this month. The repo, marketing-agents, already has a map of every agent by loop and stage, and an honest score of how much each one does on its own.

That became the first grid. Every agent, one screen.

The autonomy scores are the most honest thing in it:

That's 44 of 46 agents that still need a person to decide or ship. Everyone selling AI marketing implies the opposite.

It was close. My feedback: "The numbers get confusing, and I need more hierarchy and colors to make it clear."

So version two dropped the scores and the counts, and added two ways to read it:

• Left to right is the loop. Capture, Build, Approve, Ship, Improve, with an arrow from Improve back to Capture.
• Top to bottom is demand. Social and Content create it. AI Search captures it. Demand Gen and Paid convert it.

The empty "human" cells became the actual job, in yellow: "Choose who gets touched." "Send it. Sending is human." And a column on the right says what each row moves toward pipeline.

That's the one I shipped.

How it works, in five pieces

This is the same order as the video.

1. The Brand Brain

One file every agent reads before it does anything. Positioning, a 25-word and 50-word pitch, the ICP, the offer, the proof.

The most useful section is what NOT to say:

**What We Are NOT:**
- Not a content agency. We do not take briefs and produce volume.
- Not a ghostwriting service. We pull your real point of view from
  what you already produce; we do not invent it.
- Not an SEO agency. We get you cited in AI search, not ranked on
  a fading results page.

Agents need to know what they can't say as much as what they can.

Build yours from sales calls and your best writing, not from memory. The brain/ folder in the repo has the capture guides I use: call mining, a founder interview, review mining and voice extraction. I wrote about why in Stop briefing. Start capturing.

If the Brain is wrong, everything downstream is confidently wrong. More on the Brain: /system/brain.

2. DESIGN.md

The Brain keeps agents on-message. DESIGN.md keeps them on-brand.

It's the rulebook any agent reads before it builds a page on my site: colors, fonts, templates, URL rules.

- Colors: --sm-white, --sm-ink (near-black text), --sm-yellow (accent),
  --sm-slate (muted), --sm-purple (eyebrows/accents), --sm-cream, --sm-mist.
- Fonts: Archivo Black (uppercase headers), Inter (body),
  JetBrains Mono (eyebrows/meta/code), Instrument Serif (italic flourishes).

The best part is the rules learned from mistakes, each one dated:

- .post-dek must be upright + --sm-ink, NOT italic + --sm-slate.
  Italic serif in light slate is hard to read. (Fixed 2026-06-28.)

Every time the AI gets something wrong, it becomes a written rule, so it happens once. Same idea as the three folders any AI can use.

Write down your taste, or the AI will guess it.

3. The system as data

The whole system is one Python file. Stages, channels, agents, and the posts and videos behind each cell.

Each agent gets a trust level in plain words:

LEVELS = {
    1: ("Suggests", "It proposes. You decide."),
    2: ("Drafts", "It drafts. You edit and approve."),
    3: ("Ships on approval", "It publishes once you approve."),
    4: ("Runs on its own", "It runs on a schedule with no one in the loop."),
}

And each agent gets one honest sentence:

"insight-scorer": ("Insight scorer", 1,
    "Ranks this week's insights so the best one becomes content. Ranking is not deciding."),
"youtube-publish-agent": ("YouTube publish", 3,
    "Builds the full publish package (titles, chapters, tags, pinned comment) and publishes on approval."),

Two guardrails are built in. If a cell links to a post that doesn't exist, the build fails. If an agent name doesn't match a real file in the public repo, the build fails.

Design the system before you build pages.

4. One command, 30 pages

$ cd ~/personal/supermarketers/supermarketers-site
$ python3 scripts/system/build.py
Built system.html + 29 pages in system/. Sitemap: 30 /system URLs.

That's the hub, 25 cell pages (5 channels by 5 stages) and 4 foundation pages: the Brain, the Voice, the Gates, the Ledger. It also rewrites the /system block in the sitemap.

Here's the live grid. Every cell is a link.

And here's one cell, Content: Build. What happens at that stage, every agent with a link to its file on GitHub, what you decide, what comes out, a minimap of where you are in the system.

Further down, the posts and videos that explain that step. Every cell links to real writing, so the system doubles as an internal link directory for the whole site.

All 15 videos on my channel are mapped to the step they explain:

Why plain HTML. The crawlers behind ChatGPT, Claude and Perplexity don't run JavaScript. If they can't read a page, they won't cite it. So these are static pages, not an app, and the hub is listed in my llms.txt. My own homepage is a React app, so it ships a pre-rendered copy for crawlers.

It works on a phone too: each channel collapses into one card.

Change one file, and every page updates.

5. Gates, then a human says ship

Six checks run before any person sees the work:

A gate that auto-approves is not a gate. The agent that built something never gets to say it's done. More in /system/gates and in AI made drafting free. It made reviewing expensive.

Then a human merges. The workflow for this build: Claude opened a pull request, I said "merge," Cloudflare deployed in about 40 seconds, and Claude checked the live site.

The moment I liked most came after the nav update. Claude checked the live site and found "The system" link on the blog but not on the homepage. It didn't call it done. It looked into it. The homepage had updated a few seconds after the blog, and a second check confirmed the link.

Verification, not trust.

What shipped

No traffic or signup numbers yet. It went live on October 13. I'll write the follow-up when there's data.

Build your own

Don't start with 25 cells.

1. Write the Brain first. One file. Use the capture guides and fill it from three sales calls and your five best posts. Write the "What we are NOT" section before anything else.
2. Pick one channel. Draw its five stages: what gets captured, built, approved, shipped, improved. Mark which steps an agent does and which stay yours.
3. Put it in a data file before you design a page. The design was the last thing that went right for me, not the first.
4. Add one gate. Fabrication is the one I'd start with. It catches the invented number before your buyer does.
5. Ship it where crawlers can read it. Static HTML. Link every step to the post that explains it.

Explore the whole thing at supermarketers.ai/system. Every page has the full map as a download.

The agents are free in the repo. If you'd rather have someone run it inside your team, start with the free AI Visibility Check to see whether AI search recommends you or a competitor, then book a call.