tinte

Tinte - デザインシステムのインフラストラクチャ

単一の信頼できる情報源から、デザインシステムを生成、コンパイル、インストール、プレビューできます。

Tinte は、13 個のセマンティックな OKLCH カラートークンからなるテーマグラフを管理し、shadcn/ui プリセット、VS Code テーマ、ターミナル設定、その他 19 種類以上の形式にコンパイルします。

プリセット API（shadcn v4 互換）

Tinte のすべての公開テーマは、shadcn の registry:base アイテムとしてインストールできます。

テーマをインストールする

npx shadcn@latest add https://tinte.dev/api/preset/{slug}

テーマのフォントをインストールする

npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=sans
npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=mono

プリセット一式を取得する（基本 + フォント + インストールコマンド）

GET https://tinte.dev/api/preset/{slug}?type=pack

レスポンス：

{
  "base": { "$schema": "...", "name": "...", "type": "registry:base", "cssVars": { "light": {...}, "dark": {...} } },
  "fonts": [{ "$schema": "...", "name": "font-inter", "type": "registry:font", "font": {...} }],
  "slug": "theme-slug",
  "install": {
    "base": "npx shadcn@latest add https://tinte.dev/api/preset/{slug}",
    "fonts": ["npx shadcn@latest add https://tinte.dev/r/font/inter?variable=sans"]
  }
}

テーマを閲覧する

GET https://tinte.dev/api/themes/public?search={query}&limit=20&page=1

オプションのフィルター：?vendor=tinte|tweakcn|rayso

レスポンスには、slug、name、concept、およびカラートークンを含む themes[] が含まれます。

テーマの詳細を取得する

GET https://tinte.dev/api/themes/slug/{slug}

ライト／ダークのカラーブロックとオーバーライドを含む、テーマの全データを返します。

レジストリルート（shadcn 互換）

以下のルートでは、registry:base および registry:font の生のアイテムを提供します。

GET https://tinte.dev/r/{slug}                    # registry:base or registry:theme
GET https://tinte.dev/r/{slug}?type=registry:base  # explicit base type
GET https://tinte.dev/r/font/{family}?variable=sans # registry:font

画像からテーマを抽出する

スクリーンショットまたはデザイン画像をアップロードして、カラーテーマを抽出します。

curl -s -X POST https://ray.tinte.dev/api/v1/extract-theme \
  -F "[email protected]" | jq

より忠実度の高い AI モード：

curl -s -X POST "https://ray.tinte.dev/api/v1/extract-theme?mode=ai&model=anthropic/claude-haiku-4.5" \
  -F "[email protected]" | jq

レスポンス：

{
  "dark": { "bg": "#0a0a12", "bg_2": "#0f0f18", "ui": "...", "tx": "...", "pr": "...", "sc": "...", "ac_1": "...", "ac_2": "...", "ac_3": "..." },
  "light": { "bg": "#fafafa", "bg_2": "#f0f0f0", ... },
  "name": "Extracted Theme Name",
  "gradient": "linear-gradient(...)",
  "swatches": { "vibrant": { "hex": "#e84393" }, ... }
}

スクリーンショットのプレビュー

任意の Tinte テーマを適用したコードのスクリーンショットを生成します。

curl -s -X POST https://ray.tinte.dev/api/v1/screenshot \
  -H 'Content-Type: application/json' \
  -d '{
    "code": "const x = 42;",
    "language": "typescript",
    "theme": "{slug}",
    "title": "preview.ts"
  }' -o preview.png

エージェントのワークフロー

1. デザインシステムを閲覧してインストールする

1. GET https://tinte.dev/api/themes/public?search=minimal → pick theme
2. GET https://tinte.dev/api/preset/{slug}?type=pack → get install commands
3. npx shadcn@latest add https://tinte.dev/api/preset/{slug} → install base
4. npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=sans → install fonts
5. npx shadcn info --json → verify

2. スクリーンショットからデザインシステムを抽出する

1. POST ray.tinte.dev/api/v1/extract-theme -F [email protected] → get TinteBlock
2. Use extracted colors to search for matching themes or create new one
3. Install via preset API

3. デザインシステムを切り替える

1. npx shadcn info --json → read current project config
2. GET https://tinte.dev/api/themes/public?search=dark+minimal → browse alternatives
3. npx shadcn@latest add https://tinte.dev/api/preset/{new-slug} → overwrite with new theme

4. 結果をプレビューする

1. POST ray.tinte.dev/api/v1/screenshot with theme slug → get PNG
2. Open screenshot to verify visual result

カラーモデル

Tinte は、各モード（ライト／ダーク）で 13 個のセマンティックな OKLCH トークンを使用します。

トークン	役割
bg	背景
bg_2	高さのあるサーフェス
ui	ボーダー、区切り線
ui_2	控えめなボーダー
ui_3	ホバー状態
tx	プライマリテキスト
tx_2	セカンダリテキスト
tx_3	控えめなテキスト
pr	プライマリアクセント
sc	セカンダリアクセント
ac_1	アクセント 1
ac_2	アクセント 2
ac_3	アクセント 3

これらは、OKLCH 色空間形式の 30 個以上の shadcn CSS 変数（background、foreground、card、primary、secondary、muted、accent、destructive、chart-1..5、sidebar-* など）にコンパイルされます。

デザインシステムコンパイラー（エージェントプラグイン）

tinte はプロジェクトのアイデンティティを、インストール可能なエージェントプラグイン（agent-plugins.org 1.0.0）にコンパイルします。これにより、コーディングエージェントはデフォルトの凡庸な UI ではなく、ブランドに沿った UI を生成できます。

tinte build --plugin --config tinte.config.json --out ./acme-plugin
# emits: plugin.json + skills/<name>-design/SKILL.md (composition law + identity)
#        + references/tokens.css (OKLCH token API from the theme graph)

tinte lint src/            # scan for hex/rgb/hsl literals and Tailwind palette classes
tinte lint --json          # machine-readable; exit 1 on violations (CI gate)

参考サイトからアイデンティティを抽出する

CLI が色を推測することはありません。エージェントが目で見て、CLI が計算します。

tinte from --emit-script > extract.js
agent-browser open https://example.com && agent-browser wait --load networkidle
agent-browser eval "$(cat extract.js)" > candidates.json
# The agent (vision) reviews a screenshot to assign semantic roles if needed.
tinte from --normalize candidates.json --name example --out draft-identity.json
# Draft only: fill voiceWords/dosDonts by hand, then validate strictly via tinte build.

--normalize は primaryStyle: "inverted"（CTA が色相ではなく、前景色と背景色のペアになっているサイト）を検出し、ピル型の角丸を正規化します。アプリの状態に必要なトークン（destructive、ring、input）は警告として報告され、決して作り出されることはありません。