Compile your design system into an Agent Plugin

A coding agent writes on-brand UI when it can read your tokens as an API and your composition rules as instructions. Tinte emits both as one installable artifact, and compiles the same identity into a theme for your editor and terminal.

The first installs the skill into .agents/skills/ for Claude Code, Codex, and Cursor. The second installs the compiler itself. Source on GitHub

$ tinte build --pluginacme-plugin/├── plugin.json└── skills/    └── acme-design/        ├── SKILL.md        └── references/            └── tokens.css

Three commands, one config

Extraction, compilation, and enforcement read the same tinte.config.json. Nothing is restated by hand.

Read a site you already trust

Point the extractor at a page that is already on-brand. It records computed styles, not opinions, and normalizes them into thirteen semantic tokens.

$ tinte from --normalize candidates.json --name acmeacme-draft.json  theme.light.bg   oklch(0 0 0)  theme.light.tx   oklch(0.9461 0 0)  primaryStyle     inverted

Compile the identity into a plugin

The compiler emits a token file an agent reads as an API and a SKILL.md that carries the type scale, the voice, and the composition law.

$ tinte build --pluginacme-plugin/├── plugin.json└── skills/    └── acme-design/        ├── SKILL.md        └── references/            └── tokens.css

03
Fail the build on off-palette color
The linter reads the same config and names each defect by kind next to the token that replaces it. A color that bypasses the system is caught by the build, not by a reviewer who happens to notice. This page is linted the same way.
```
$ tinte lint src/card.tsx:12  hex literal       ->  var(--card)card.tsx:19  tailwind palette  ->  text-muted-foreground2 violations foundexit 1$ tinte lint src/   # after the fixtinte lint: cleanexit 0
```

The same identity, as a theme for humans

A design system an agent can read is also a theme you can look at all day. One config compiles both ways: --plugin for the agent, --to for the editor and terminal you already use.

Nine targets, one command

Each target is a provider that converts the thirteen tokens into that tool's own format. The VS Code artifact is accepted by the classic installer, so the theme lands in your editor without a marketplace round trip.

vscode: VS Code and Cursor, installable with tinte --code
zed: Zed theme family, light and dark
kitty: Kitty terminal conf
warp: Warp terminal YAML
alacritty: Alacritty terminal YAML
windows-terminal: Windows Terminal color scheme
slack: Slack sidebar theme
gimp: GIMP palette
shiki: Shiki syntax highlighting CSS

$ tinte from --normalize candidates.json --name acme$ tinte build --to vscode --config acme.jsonacme-vscode.json$ tinte acme-vscode.json --codeTheme installed successfully!

Every command

tinte from --emit-script: Prints the extraction script you run against a live page.
tinte from --normalize <json>: Turns captured computed styles into a draft identity config.
tinte build --plugin: Compiles the config into an Agent Plugin directory.
tinte build --out <dir>: Emits design.md and tokens.css as two loose files instead.
tinte build --to <provider>: Emits a theme artifact for one provider: vscode, zed, kitty, and six more.
tinte build --to: Lists every provider target available to build against.
tinte lint <paths>: Exits 1 on hex literals, functional color notation, and framework palette classes.
bunx tinte <slug>: Installs a theme into VS Code, Cursor, or Zed.

This site serves its own design context

The page you are reading is styled by the plugin tinte compiles from its own config. Every artifact is fetchable at its real path, so an agent can install this design system the same way it would install yours. The full plugin is served as an Agent Plugins 1.0.0 tree.

/design.md /tokens.css /plugin/plugin.json /plugin/skills/tinte-design/SKILL.md