AI Integration Tokens

AIにトークンルールを渡すだけで、ハードコードではなくデザイントークンで構築。ダークモード、スペーシング、カラーもすべて自動対応します。
コンポーネントとAIの連携については、Component AI Integrationをご覧ください。

llms.txt (Tokens)

全AIツール対応

ハードコードゼロ

https://7onic.design/llms.txt

llms.txtはパッケージインストール時に自動で含まれます。AIに追加指示する際にこのURLをコピーしてお使いください。

Supported AI Tools

llms.txtはオープン標準です。テキストファイルを読み込めるAIツールすべてに対応しています。

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

AIツールとワークフローに合った方法を選んでください。

ローカル（パッケージインストール済み）

Claude Code、Cursor、Copilotなど、AIがローカルファイルを直接読み込めます。

Reference Path

Web（ローカルアクセス不可）

ChatGPTなど、ローカルファイルを読み込めないWebベースのAIツール向け。

URL Reference

Copy & Integrate

llms.txtの内容をプロジェクトのAIルールファイルにコピーします。

# 7onic Design Tokens
(paste llms.txt content here)

What AI Does Automatically

llms.txtを読み込むと、AIは毎回指示しなくても以下のルールに従います。

Token Classes Only

bg-blue-500ではなくbg-primary、text-[13px]ではなくtext-sm、rounded-[7px]ではなくrounded-mdを使用します。

Dark Mode for Free

トークンベースのカラーはライト/ダークテーマに自動対応するため、dark:プレフィックスは不要です。

Consistent Spacing

p-[17px]のような任意値ではなく、スペーシングトークン（p-4, gap-2）を使用します。

Self-Check Before Output

AIはコードを表示する前に、すべての行をトークンホワイトリストと照合して検証します。

Before / After

トークンルールありとなしで構築した同じUI

llms.txt なし

<div className="bg-blue-500 text-white p-[20px]
  rounded-[8px] shadow-lg">
  <h2 className="text-[18px] font-medium">
    Dashboard
  </h2>
  <p className="text-gray-300 text-[14px]">
    Welcome back
  </p>
</div>

llms.txt あり

<div className="bg-background-muted text-foreground p-5
  rounded-lg shadow-md">
  <h2 className="text-lg font-semibold">
    Dashboard
  </h2>
  <p className="text-text-muted text-sm">
    Welcome back
  </p>
</div>

トークンベースのコードはダークモード、カスタムテーマ、ブランド変更に自動で対応します。手動での更新は不要です。

Troubleshooting

よくある問題と対処法

AIがbg-blue-500のようなハードコードされたカラーを使う

AIに伝えてください：「llms.txtを再読み込みして。すべてのハードコードされたカラーをトークンクラスに置換して。」

AIがdark:プレフィックスを付ける

AIに伝えてください：「トークンカラーはダークモードに自動対応する。dark:プレフィックスをすべて削除して。」

AIがp-[17px]のような任意値を使う

AIに伝えてください：「llms.txtのスペーシングトークンのみ使用して。p-[17px]ではなくp-4。」

Disclaimer

AIは完璧ではありません。AIが生成したコードはデプロイ前に必ずレビューしてください。デザイン要件、アクセシビリティ、トークン設定が正しいか確認してください。