Railly/tinte

Compile your design system into an Agent Plugin. Extract an identity from any reference, emit SKILL.md + tokens.css, lint what bypasses your tokens.

What it solves

Tinte solves the problem of ensuring AI coding agents produce UI that is consistent with a specific brand's design system. It prevents agents from guessing styles or bypassing design tokens by providing them with a structured, installable "Agent Plugin" containing the brand's identity, composition rules, and CSS tokens.

How it works

Tinte compiles a design identity configuration into a set of artifacts that an AI agent can consume as an API. It uses a workflow of extraction, compilation, and enforcement:

  1. Extraction: It can extract design identities from live pages or images (via Ray).
  2. Compilation: It converts an identity config into an Agent Plugin consisting of a SKILL.md file (containing type scales, voice, and composition laws) and a tokens.css file (which serves as the style API for the agent).
  3. Enforcement: A linting tool ensures that no colors are used in the code that bypass the defined design tokens.

Additionally, Tinte can compile semantic OKLCH tokens into over 19 different formats, including shadcn/ui presets, VS Code themes, and terminal configurations.

Who it’s for

Developers and designers who want to automate the application of their design systems to AI-generated code and ensure brand consistency across different tools and environments.

Highlights

  • Agent Plugin Compiler: Transforms design systems into a format specifically designed for AI agents to read and follow.
  • Multi-format Export: Supports 19+ formats including VS Code, Zed, Cursor, and shadcn/ui.
  • Design Extraction: Ability to extract styles from live pages or images.
  • Token Linting: A CLI tool to detect when styles bypass the established design tokens.

Related

  • Project
    google-labs-code/stitch-skills

    A collection of agent skills and plugins for Google Stitch that enables AI coding agents to automate design generation, design system management, and conversion of designs to frontend code.

  • Project
    google-labs-code/design.md

    A format specification and CLI tool for describing design systems to coding agents, combining machine-readable tokens and human-readable rationale.

  • Project
    superdesigndev/superdesign-skill

    An AI product design agent skill that gives coding agents design judgment to create high-quality UI, presentations, and graphics instead of generic layouts.

  • Project
    bergside/awesome-design-skills

    A curated registry of design system skill files that provide AI coding agents with specific UI rules, tokens, and accessibility constraints to ensure consistent, high-quality design implementation.

  • Project
    coji/natural-japanese

    An Agent Skill for writing natural, professional Japanese by combining mechanical linting of AI-typical patterns with a structured writing constitution and iterative AI refinement.