All work

Strivelabs · Design engineer · Aug 2026

Brand kit extractor

Share your website at onboarding, and Strive works out your brand kit: colours, type, corners and the rules for how you use them. It lives in the knowledge base as one file you can edit, so anything the agent makes can look like yours. Reports were the first to use it.

Role
Design engineer · end to end
Team
Designed and built by me · code review by our CTO
Status
Live for all customers
Link
strivelabs.ai

At a glance

The problem

Every report came out in Strive’s orange, slate and Inter, because the report skill hardcoded them. Then a client told us the artifacts they’d made with Claude looked better, and we felt their brand was the gap.

My part

  • The experience. Benchmarked how a similar product builds brand kits, and designed the flow from onboarding to the page where a customer edits theirs.
  • The extraction. A raw scrape, one LLM call anchored by a count of every colour on the page, and checks that keep a guessed colour out.
  • The kit page. Inline editing, a preview that runs the server’s own checks, and a refresh from the website.
  • The skill. The prompt engineering that teaches the report agent to read the kit, with a default for every gap.

Our CTO reviewed the code and helped sharpen the backend.

Shipped

Live for all customers. New customers get a kit at onboarding; existing ones start on the default and fill theirs in from the design page. Chat, artifacts and more can read the same file the day they need it.

yourbrand.com Brand kit Aa extracted · yourbrand.com $48k brand/design.md Reports Chat Artifacts Emails

Backstory

Every report wore our orange

  • The Strive Studio report skill hardcoded our orange, slate and Inter, so every customer’s report looked like ours.
  • Then a client said the artifacts they’d made with Claude looked better. On checking, we felt their brand was the gap.
Drag to compare. The same report in our orange, then in a customer’s own brand kit.

The bet

Extract once, read anywhere

  • Nothing about a brand is specific to reports. So we read it off the customer’s website at onboarding, and keep it as one file in the knowledge base.
  • Reports read it first. Chat, artifacts or emails can read the same file the day they need it.
Read the brand once. Every surface after that reads the same file.

Design call · extraction

Let the model read, then check it

  • Parsing CSS finds hundreds of hex codes, and can’t tell a button from a border. A model can.
  • So one LLM call reads the raw page, handed a count of every colour on it, so the real brand colour can’t be missed.
A parser counts colours. A model can tell you which one is the brand.

Trust

A guessed colour never ships

  • The model says how sure it is, and every colour it returns must exist on the page and hold up on white.
  • If any check says no, nothing is written. The customer keeps our default rather than a wrong brand.
Better our orange than a wrong brand.

Design call · delivery

A file, not a prompt

  • I first composed the report skill per customer. The copy in the sandbox and the one we served drifted apart.
  • So the skill stays one static document that tells the agent to read the kit like any other file, with a default for every gap.
Deliver context the way you deliver knowledge: as a file the agent reads.

Design call · the page

Your brand, editable

  • The kit has its own knowledge-base page. Every token is an inline row, beside a live report preview that repaints as you edit.
  • The preview runs the same checks as the server, so what you see is what a report gets. A refresh never overwrites your edits without asking.
Edit a token, and the report beside it repaints. What you see is what a report gets.

Misses & lessons

What the first brands taught us

  • MissSliced the page before reading it. One site sent the model zero colours, and it invented a jade green for a blue brand.

    LessonMeasure the whole page, then trim. Hand the model the evidence, not a prefix.

  • MissComposed the report skill per customer. The copy in the sandbox and the one we served drifted apart.

    LessonContext belongs in a file the agent reads. Keep the prompt one reviewable document.

  • MissLet our server fetch stylesheet links that the scraped page supplied.

    LessonA page-supplied URL is untrusted. Fetch it behind the app boundary, through the same safety check.

  • MissGave the feature its own router, status endpoint and environment flag.

    LessonMake it the platform’s, not the feature’s. One seed route, status on the file, safety in the seeder.

Read the brand once, at onboarding. Every surface that comes after gets it for free.
yourbrand.com Brand kit Aa extracted · yourbrand.com $48k brand/design.md Reports Chat Artifacts Emails Deep dive · ~10 min read Read once, used everywhere: a brand kit for every Strive customer Reading a brand off a website, the checks that keep a guessed colour out, why it’s a file and not a prompt, and the page that makes it yours. Read the full story

Back to all work