Railly/tinte

解決する課題

Tinteは、AIコーディングエージェントが特定のブランドのデザインシステムと一貫性のあるUIを生成することを保証する問題を解決します。エージェントがスタイルを推測したり、デザイントークンを無視したりしないように、ブランドのアイデンティティ、構成ルール、CSSトークンを含む構造的でインストール可能な「エージェントプラグイン」を提供します。

動作方法

Tinteは、デザインアイデンティティの構成をAIエージェントがAPIとして利用できるアーティファクトのセットにコンパイルします。抽出、コンパイル、強制のワークフローを使用します：

1. 抽出: Rayを介してライブページや画像からデザインアイデンティティを抽出できます。
2. コンパイル: アイデンティティ構成を、SKILL.mdファイル（タイプスケール、ボイス、構成法則を含む）とtokens.cssファイル（エージェントのスタイルAPIとして機能）からなるエージェントプラグインに変換します。
3. 強制: ライティングツールにより、定義されたデザイントークンを回避する色がコード内で使用されていないかを確認します。

さらに、TinteはセマンティックなOKLCHトークンを19種類以上の形式にコンパイルでき、shadcn/uiプリセット、VS Codeテーマ、ターミナル設定などを含みます。

対象ユーザー

AI生成コードにデザインシステムを自動適用し、さまざまなツールや環境間でブランドの一貫性を確保したい開発者およびデザイナーです。

特徴

• エージェントプラグインコンパイラ: デザインシステムをAIエージェントが読み取り、従うために特別に設計された形式に変換します。
• 多形式エクスポート: VS Code、Zed、Cursor、shadcn/uiなどを含む19種類以上の形式をサポートします。
• デザイン抽出: ライブページや画像からスタイルを抽出する機能があります。
• トークンのLint: 定義されたデザイントークンを回避するスタイルが使用されていないかを検出するCLIツールです。