7onicDESIGN SYSTEM

AI Integration Tokens

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

llms.txt 標準
全AIツール対応
ハードコード ゼロ
https://7onic.design/llms.txt

Supported AI Tools

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

Claude Code

CLAUDE.mdに追加、またはプロンプトで渡す

Cursor

.cursor/rulesに追加

GitHub Copilot

copilot-instructions.mdに追加

ChatGPT

会話にURLを貼り付け

How to Use

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

Reference Path

AIツールにファイルパスを指定するだけの、最もシンプルな方法です。

CLAUDE.md / .cursor/rules
Rules: node_modules/@7onic-ui/tokens/llms.txt

Copy & Integrate

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

ルールファイル
# 7onic Design Tokens
(paste llms.txt content here)

Direct Prompt

プロンプトでAIに直接llms.txtを読ませます。

プロンプト
Read node_modules/@7onic-ui/tokens/llms.txt and style this page with 7onic tokens

URL Reference

WebベースのAIツール向けにドメインURLを使用します。

プロンプト / ルール
Read https://7onic.design/llms.txt and follow the token rules

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>

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

Example Prompts

以下のプロンプトをコピーしてすぐに始められます。

llms.txtを読んで、7onicトークンでランディングページをスタイリングして
7onicデザイントークンで料金カードを作って
7onicトークンクラスのみ使ってダッシュボードレイアウトを作って

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が生成したコードはデプロイ前に必ずレビューしてください。デザイン要件、アクセシビリティ、トークン設定が正しいか確認してください。