Tinte plugin
tinte
Compiles a design system into an agent plugin: an identity from a reference, SKILL.md and tokens.css, a check that code bypasses tokens
- 624 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Writes files into the project
- Presets and themes are pulled from an external address
Install
- Works in
Manual install
bunx tinte build --pluginshadcn presets: npx shadcn@latest add https://tinte.dev/api/preset/one-hunter. Themes: bunx tinte <theme>.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Writes files into the project
- Presets and themes are pulled from an external address
This is third-party code. Review the repository files before installing.
What it does
Tinte compiles a design system into an agent plugin: it extracts an identity from a reference, creates `SKILL.md` and `tokens.css` and checks whether code bypasses tokens. Plugin build: `bunx tinte build --plugin`. The same 13 semantic OKLCH tokens turn into shadcn/ui presets, VS Code and terminal themes: `npx shadcn@latest add https://tinte.dev/api/preset/one-hunter`, themes into editors `bunx tinte <theme>`. Version 1.3.0 from 07.08.2026, MIT license.
Who it is for. For developers and designers who want to turn a design system into an agent plugin and check that code follows tokens.
Good fit when
- You need to turn a design system into an agent plugin
- You need a check that code does not bypass tokens
- You need shadcn presets and editor themes from one set of tokens
Not a fit when
- You need visual mockup editing: the tool works with tokens and code
- You cannot install presets and themes from an external address
Example request
Compile my design system into an agent plugin, then check the code for places where colors are set bypassing tokensLimitations
The CLI writes plugin and token files into the project and presets and themes are pulled from the tinte.dev address, so access is extended: see what you install. An identity extracted from a reference must be checked against the brand.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What does Tinte do?
It compiles a design system into an agent plugin with SKILL.md and tokens.css and checks that code follows tokens.
How do I build the plugin?
bunx tinte build --plugin.
What else can it do?
It turns OKLCH tokens into shadcn presets, VS Code and terminal themes.
Discussion
No questions or reviews yet.
Related
PluginsA skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
A plugin and npx CLI that scaffold DESIGN.md from the official google-labs-code/design.md templates
Color Expert
color-expert
A color science skill: OKLCH, APCA and WCAG contrast, design system ramps, palette generation, pigment mixing and color history
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
Tastemaker
tastemaker
A taste skill for interfaces so the result does not look generated: only Markdown and scripts, contrast is checked by WCAG calculation
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Tinte (this entry) | no | 624 | ||
| Oh My Design | no | 534 | a catalog of ready company design systems | |
| StyleKit | no | not required | 604 | 148 visual style sets with tokens |
| Inspo | no | not required | 889 | interface samples from real sites |
README in short
The README describes compiling a design system into an agent plugin with OKLCH tokens, shadcn presets and editor themes. MIT license.