A design system built for AI agents to read

What it is

chromia-marketing-design is a multi-brand design system that AI coding agents work from directly. It holds brand kits for Chromia and the products around it, including AtBash, ChromBot and EVAL Engine, plus the applied work made from them: videos, conference backdrops and a marketing site UI kit.

The idea is that brand books and skills give an agent (Claude Code, Cursor or Codex) enough context to make on-brand work from a short prompt:

1Make a one-page Chromia landing. Use @assets/chromia/. Hero, 3 feature cards, footer. Show me 3 variations.

How it is laid out

1assets/     brand source material: tokens, fonts, logos, previews
2projects/   applied work, one folder per piece, prefixed YYYYMMDD-

Each video folder under projects/ holds its own fonts, logos and audio, so it renders without reaching outside itself. AGENTS.md sets the layout rules and per-brand handling that every agent reads first, and CLAUDE.md points to it.

Agent skills

The repo ships its own skills in .agents/skills/:

chromia-design puts the agent in Chromia brand expert mode.
hyperframes and hyperframes-cli compose and render videos as HTML.
kokoro-tts generates voiceover locally. A setup script checks for uv and ffmpeg, installs the Kokoro CLI and downloads its model files.
huashu-design handles HTML-native prototypes, decks and motion. It is vendored from alchaincyf/huashu-design.

Working conventions

Two practices from the README do most of the work:

Point at concrete files. Agents do better when the prompt cites @assets/chromia/ or a project's DESIGN.md than when it describes the brand in words.
Write DESIGN.md first for video. The script, caption timing and scene map go in one file. That file drives the render and any later voiceover pass, so fixing a line means editing the doc and re-rendering.

Asking for several variations rather than one answer is the third habit the README recommends.

Running it

1npm start            # brand kit and video gallery on localhost
2./scripts/setup.sh   # one-time install for the kokoro-tts skill

npm start scans projects/ to rebuild a videos.json index, then serves the brand kit and a gallery of every rendered video.

Stack

Static HTML, CSS and JavaScript for the brand kits and gallery, HyperFrames for video, Kokoro for text-to-speech, and Python and shell scripts for setup.