Skip to content
tinte

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.

bunx tinteSource on GitHub
$ tinte build --plugin

acme-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.

  1. 01

    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 acme

acme-draft.json
  theme.light.bg   oklch(0 0 0)
  theme.light.tx   oklch(0.9461 0 0)
  primaryStyle     inverted
  2. 02

    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 --plugin

acme-plugin/
├── plugin.json
└── skills/
    └── acme-design/
        ├── SKILL.md
        └── references/
            └── tokens.css
  3. 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-foreground

2 violations found
exit 1

$ tinte lint src/   # after the fix

tinte lint: clean
exit 0

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 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. Both artifacts are fetchable at their real paths, so an agent can install this design system the same way it would install yours.

/design.md/tokens.css