AI Guide — Tokens

デザイントークンだけをAIに教えたい場合のガイドです。ヘッドレスUIや自作コンポーネントにkarakuriのトークン（カラー、スペーシング、タイポグラフィなど）を適用したいときに使用します。
コンポーネントも含める場合は Components AI Guide をご覧ください。

llms-tokens.txt・トークン専用

https://karakuri-design-system.vercel.app/llms-tokens.txt

AIツールにこのURLを貼り付けるか、ファイルをダウンロードしてローカルで読み込ませることができます。

Download

AIツールにローカルでファイルを読み込ませる場合は、ダウンロードして任意の場所に配置してください。

.cursor/docs/llms-tokens.txt

プロジェクトルートの.cursor/docs/に配置すると、Cursorが自動認識します。

CLAUDE.md に参照

CLAUDE.mdに「トークン情報は@./llms-tokens.txt参照」と記述。

チャット添付

ダウンロードしたファイルをそのままチャットに添付。単発の質問用。

llms.txt標準に対応する主要なAIツール

Claude Code

Cursor

GitHub Copilot

ChatGPT

3つの方法からプロジェクトに合わせて選択してください

Cursorの「Docs」設定、Claudeの「Projects」設定などにURLを追加すると、AIがそのページを自動参照します。

https://karakuri-design-system.vercel.app/llms-tokens.txt

上の「Download」ボタンでダウンロードし、プロジェクトに配置してください。例：

project/
├── .cursor/
│   └── docs/
│       └── llms-tokens.txt  ← ここに配置

ダウンロードしたファイルをChatGPT/Claudeのチャット添付欄にドラッグ＆ドロップ。セッション中のみ参照。常用ならば方法1または2を推奨します。

llms-tokens.txtを読み込ませた時のAIの反応の違い

Before（参照なし）

ユーザー:「ボタンを青背景で作って」

example.tsx

<button className="bg-blue-500 text-white px-4 py-2">
  送信
</button>

生のTailwindカラー・任意値。ダークモード非対応。

✓

After（参照あり）

ユーザー:「ボタンを青背景で作って」

example.tsx

<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md">
  送信
</button>

semantic token使用。ダークモード自動対応。

内部利用について

このllms.txtはkarakuriチーム内部の開発効率化を目的としたリソースです。npmパッケージには含まれず、このサイトからのみ提供されます。更新タイミングはkarakuriのリリースに合わせて随時行います。