HumanBuiltAI
Specs/AI product/Brand systems/2026

A brand kit for AI.

Small businesses have a logo, a rough PDF and a few phone photos. AI tools need rules. Specs reads the messy files, writes them up as a brand kit an AI can follow, then art-directs Instagram posts that explain every choice they make.

My own product: live, open source, and free to try with three demo brands.

Role
Product, design and engineering (solo)
Focus
AI product design, prompt and pipeline design, generative UI
Built with
Next.js, TypeScript, Claude API, Netlify
Year
2026

The short version

1-minute read · full story below
ProblemAsk an AI for a small business’s Instagram post and you get something generic. Brand guidelines, when they exist at all, are written for people to browse, not for a model to follow.
ApproachTurn messy uploads into small, sourced kit files that state their reasons. Ask the owner only the calls that change a post. Let the model compose each layout from the kit, with code checking every one.
ResultA live app with three fictional demo brands whose posts look like three different art directors made them. In my scoring, the kit version beat the same brief with no kit 5 times out of 5.
Try the live app View on GitHub
The Specs start screen: the headline Your brand, written down for machines, and three demo brand cards for Half Acre Club, Third Shift Slice and Hollis Ware
Start screen · three fictional demo brands, free to tryFig. 01
02 — The problem

The brand book was written for people.

Most small businesses keep their brand in a logo file, an About page and the owner’s head. Even a proper guidelines PDF is made to be browsed. An AI can skim it, but it has to guess the rest, so the first draft comes out generic: right name, wrong everything else.

Specs asks a simple question. What if the brand were written down for machines, in small files with exact values and reasons, so an agent starts on brand by default?

Same brief, same model. The only difference below is whether the model could read the kit.

Without the kit: a generic post with a stock-looking open till 3am sign, a blue Till 3am badge and plain sans serif type
Without the kit · generic type, a default blue
With the kit: OFF AT 2:30? OPEN TILL 3AM. in huge yellow condensed type on black, a taped handwritten $4 CHEESE sign, and the Third Shift Slice neon logo
With the kit · Third Shift Slice, a late-night slice window
03 — The kit

Small files, each with a reason.

A Specs kit is a folder of small chunks, one idea each: positioning, voice, terminology, audience, visual system, layout, art direction, social rules and guardrails. Each is a few hundred words and starts by saying where it came from and how sure it is.

Every rule states its reason and leans on examples over adjectives. A model follows “Write like the tag: number, material, price” with a sample line far better than it follows “friendly”. The same goes for a freelancer.

chunk_id: voice-core
confidence: high
sources:
  - upload: notes-batch-07.md
    location: "the word I keep reaching for is plain"

1. Write like the tag. Number, material, price.
   Facts are the warmth here, because they show
   someone counted.

From Hollis Ware’s voice chunk, a fictional ceramics studio.

As files are read, the kit fills in on screen as a mood board, so the wait shows the brand taking shape. Every item links back to the upload it came from. When the owner is done, the kit downloads as a zip that works in any AI tool.

Hollis Ware’s mood board in Specs: the uploaded files, a fanned palette, the type pair, one voice line, facts posts can use with their sources, and words to never say
Brand DNA reveal · the kit as a mood boardFig. 02
04 — The calls

Only the calls that change a post.

My first live run felt like a wall of questions. Every gap and conflict was asked about, with no sense of which ones mattered. So code now triages first: it asks only what changes a post, settles what the uploads already settle (with an Undo), and skips the rest. That’s five calls at most, and prices and dates are always asked.

Each call is a small interface component, not a chat message: a pair of prices, a photo picker, a palette. It sits beside a live post that changes as you answer. The model picks the component and writes one sentence, and the app checks that choice against a fixed catalog of ten before anything renders.

A call in Specs: three photos tell three stories and posts will lead with the one you pick, with a photo picker and a live post preview beside it
Fill the gaps · one call beside a live postFig. 03
05 — Art direction

One engine. Three art directors.

The first version filled six shared templates. Fonts and colors were exact, but every brand composed the same way, which undercut the whole “art director” idea. Now the model composes each post’s layout from the kit’s layout chunk, and code keeps it honest.

Code fills in the approved copy. CSS can reach colors and fonts only through the kit’s variables. A browser check catches clipped text, overlaps and low contrast, and a layout that fails twice falls back to a template. It’s HTML and CSS, not image generation, so fonts, prices and logos come out exact.

Fifteen posts, five per demo brand: Third Shift Slice in loud yellow condensed type on black, Half Acre Club in seed-packet serif on cream paper cards, Hollis Ware in quiet serif with wide margins
Same five briefs, three kits: loud, warm, quietFig. 04
06 — Showing the work

Every choice cites its rule.

Tap Why this works on any post and numbered pins land on it. Each note says what was decided and which kit chunks it came from: why the price sits on a taped paper sign, why the only pink is the logo, why the headline says “3AM” and not “open late”.

That makes the posts reviewable. An owner can disagree with a rule instead of a vibe, and fix it once in the kit. Flip to Without kit and the same brief appears with nothing to go on.

The copy comes only from the kit and the brief. Specs never invents a price, a date or a location. When the uploads disagree, it asks the owner instead of picking one.

A Third Shift Slice post with numbered pins, followed by notes for layout, headline, badge, pink and photo crop, each tagged with the kit chunks it used
Why this works · Fig. 05
07 — Outcome

Live, open source, and it explains itself.

5 of 5Head-to-heads won by the kit version against the same brief with no kit, in my scoring.
20 of 20Checks passed when Specs drafted a kit from deliberately messy uploads, including a planted contradiction.
≤ 5Calls the owner is asked to make, instead of a form full of gaps.

Every build phase had a pass-or-fail gate I wrote before building it. Because it’s free to try, the server owns every prompt, caps uploads and posts per visit, and stops all generation once the day’s spend limit is reached.

08 — Reflection

AI drafts. Judgment decides what ships.

I built Specs the way it asks small businesses to work. I wrote the spec and the gates, made the calls on type, color and logos, and directed Claude through the build. I kept a dated journal of every decision and dead end.

The biggest lesson was the same for the model as for people: a rule without its reason gets over-applied. When the critic marked down a glowing pink price for “two pinks” next to the logo, the fix wasn’t a stricter rule. It was one more sentence saying why the rule exists.