Tinte: Compile Design Systems into Agent Plugins

LinkRaillyTool

Tinte is a CLI tool that compiles design systems into machine-readable plugins for coding agents such as Claude Code, Cursor, and Codex. Based on a single configuration file, it generates token APIs, LLM composition rules, and matching themes for editors and terminals.

Key points

  1. Extraction from live sites: Tinte records computed styles from existing web pages and normalises them into 13 semantic tokens.
  2. Agent plugin generation: Compiles configs into an Agent Plugin directory containing SKILL.md and tokens.css.
  3. Enforcement via linter: The tinte lint command fails builds on hardcoded hex values, functional colour notation, or Tailwind palette classes.
  4. Multi-target themes: Compiles the exact same identity into themes for VS Code, Cursor, Zed, Kitty, Warp, Alacritty, Windows Terminal, Slack, and GIMP.

Why it matters

Coding agents frequently output off-brand user interfaces when design instructions lack precise constraints. Tinte packages design tokens as an API and rules as explicit context, giving models verifiable composition boundaries.

Analysis

Tinte bridges the gap between design tokens and agentic software engineering. By unifying extraction, agent instruction files, linting, and human development environment themes into a single tinte.config.json, it simplifies design governance. Delivering instructions via the .agents/skills/ pattern provides agents with structured, actionable context directly within the repository.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 5 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Impeccable AI

    Impeccable: Design Vocabulary and Anti-Slop System for Coding Agents

    Impeccable is a design skill and plugin for AI coding agents such as Claude and Cursor. It provides models with a shared design vocabulary, detects common AI visual defaults, and integrates existing design systems directly into code.

    AI & LLMs· Tool

  • Repository:amaancoderx/npxskillui

    SkillUI: Reverse-Engineer Design Systems into Claude Code Skills

    SkillUI is a Node.js CLI tool that extracts design systems from URLs, local projects, or Git repositories. Using pure static analysis without AI models or API keys, it gathers colors, typography, spacing, components, and screenshots into formatted context files for Claude Code.

    2kstarsTypeScript

    AI & LLMs· Tool

  • Link:eyedropper.design

    Eyedropper: Serving Design Systems to AI Agents via MCP

    Eyedropper extracts design tokens including colors, typography, and spacing from production code and serves them to AI agents via the Model Context Protocol (MCP). It automatically validates visual code generations against the design system to ensure brand consistency.

    AI & LLMs· Tool

  • Repository:shadcn-ui/lint

    shadcn/lint: Agent-First Linter for Tailwind Design Systems

    shadcn/lint is a linter designed for Tailwind CSS (v4) that enforces design system boundaries with error messages tailored for AI coding agents. Instead of generic type errors, it provides actionable suggestions based on components, variants, and themes.

    2.2kstarsTypeScript

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.