tinte

tinte

Compile your design system into an Agent Plugin. Also the classic Tinte theme installer for VS Code, Cursor, and Zed.

Install

bunx tinte <command>

No install step required. For a global binary:

bun add -g tinte

Quickstart

Compile an identity into an Agent Plugin

Reads ./tinte.config.json (a Tinte identity) and emits a plugin directory a coding agent can load.

bunx tinte build --plugin

Writes plugin.json, skills/<name>-design/SKILL.md, and skills/<name>-design/references/tokens.css.

Without --plugin it emits the two loose artifacts instead:

bunx tinte build

Writes design.md and tokens.css.

Flags: --config <path> (default ./tinte.config.json), --out <dir> (default ./<name>-plugin).

Lint what bypasses the token system

Scans source files for hardcoded colors that should be tokens. Exits 1 when violations are found, so it works as a CI gate.

bunx tinte lint
bunx tinte lint src/ app/
bunx tinte lint --json

Extract an identity from a reference

Two steps. First print the browser extraction script, run it against a live page with agent-browser or any DOM evaluator, and save the result:

bunx tinte from --emit-script > extract.js

Then normalize the captured candidates into a draft identity:

bunx tinte from --normalize candidates.json --name acme --out tinte.config.json

Without --out the identity is printed to stdout.

Install a theme into your editor

The classic installer. Accepts a theme slug, a URL, or a local JSON file.

bunx tinte flexoki-theme                # VS Code (default)
bunx tinte flexoki-theme --cursor       # Cursor
bunx tinte flexoki-theme --zed          # Zed
bunx tinte flexoki-theme --light        # light variant (default: dark)
bunx tinte https://tinte.dev/api/themes/slug/flexoki-theme
bunx tinte ./my-theme.json --zed

Other flags: --close auto-closes the editor after install, --timeout=<ms> sets the delay (default 3000).

Housekeeping:

bunx tinte list       # list installed Tinte themes
bunx tinte cleanup    # remove temporary theme files

For agents

There is an official Tinte skill. Install it into your project:

npx skills add Railly/tinte

This installs the tinte skill (and ray, the preview companion) into .agents/skills/, readable by Claude Code, Codex, Cursor, and other agent runtimes.

The same skill is served over HTTP at tinte.dev/api/skill.

For an example of what tinte build produces, see tinte.dev/design.md - the design system of tinte.dev itself, compiled by this CLI.

Links

• Repository: github.com/Railly/tinte
• Site: tinte.dev

License

MIT