/process
Too often, brand guidelines end up in a PDF nobody opens. I turned mine into a single command that produces brand-perfect pages every time.
/the_problem
The best brand guidelines are the ones that execute themselves.
\01 / 06
Start with what the brand should feel like, not what it should look like. The visual identity follows from the experience you want someone to have.
For Run with Foxes, the brief to myself was: it should feel like a well-designed technical manual. Clean, precise, slightly obsessive about detail. The kind of thing you'd find in an architecture studio, not a marketing agency.
That feeling drove every decision. The monospace body font. The dot grid. The terminal-style navigation. Sharp corners, no decoration. Every element earns its place.
\02 / 06
Open a terminal. Describe what you want. Claude Code translates the feeling into precise, machine-readable specifications. Every hex code. Every font weight. Every spacing value. Every rule about what never to do.
The output is a skill file: a structured document that tells Claude Code exactly how to build pages in your brand. Not a PDF that people interpret. A specification that machines execute.
\03 / 06
This is where the real work happens. You take a real presentation, run it through the system, and look at what comes out. Some things will be right immediately. Others won't.
The heading weight looks too heavy. The dot grid is competing with the chart. The charcoal sections need more breathing room. The nav links don't feel right on mobile.
Each correction sharpens the spec. The gap between what you want and what you get closes with every iteration. After three or four real pages, the system starts producing output that feels right first time.
Colours are right but spacing is off. Headings too bold. Dot grid too prominent. Nav doesn't feel terminal-like enough.
Spacing corrected. Heading weight dropped to 300. Charcoal sections added. But charts don't match the brand palette yet.
Charts branded. Scroll animations added. Fox imagery integrated. Mobile breakpoints refined. Getting close.
Output matches the brand experience. Every correction from the first three rounds is now in the spec. The system remembers what you taught it.
\04 / 06
Once you're happy with the output, the spec becomes a permanent skill. Type /branded-page and the entire brand system activates. Colours, fonts, spacing, animation rules, fox placement, chart styling, navigation patterns. All of it.
The skill file is the brand guideline. Except it doesn't ask people to follow rules. It follows them itself.
\05 / 06
Same command, any input. The system doesn't care whether it's reading a PowerPoint, a PDF, a Word doc, a set of bullet points, or a screenshot. The output is always brand-correct.
I've used it for client pitch decks, internal strategy documents, and research summaries. 24 slides became a single scrolling page with animated charts, data tables, and scroll-triggered reveals.
The person writing the presentation doesn't need to know the brand spec. They write their content. The system handles everything else.
\06 / 06
The system isn't finished when you lock in the skill. It's finished when you stop caring about your brand, which is never. Every correction you make gets absorbed back into the spec.
"The nav brand text shouldn't use underscores. It's /Runwithfoxes, not /run_with_foxes."
Tell Claude Code. It fixes the current page and updates the skill file so it never happens again.
Every future page gets it right. The brand compliance checklist grows. The system gets sharper with use.
Brand systems should improve with use. Most decay with time. This one doesn't.