7onicDESIGN SYSTEM

AI Integration Components

フルガイドをAIに渡すと、7onicコンポーネントとトークンで構築します。Props、compoundパターン、フォームレシピまですべて含まれています。
トークンのみの使用については、Token AI Integrationをご覧ください。

llms-full.txt
38 components
ハードコード ゼロ
https://7onic.design/llms-full.txt

Supported AI Tools

llms-full.txtも同じ標準に準拠しています。テキストを読み込めるAIツールすべてに対応しています。

Claude Code

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

Cursor

.cursor/rulesに追加

GitHub Copilot

copilot-instructions.mdに追加

ChatGPT

会話にURLを貼り付け

How to Use

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

Reference Path

node_modules内のファイルをAIツールに指定します。

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

Copy & Integrate

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

ルールファイル
# 7onic Components + Tokens
(paste llms-full.txt content here)

Direct Prompt

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

プロンプト
Read node_modules/@7onic-ui/react/llms.txt and build a dashboard with 7onic

URL Reference

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

プロンプト / ルール
Read https://7onic.design/llms-full.txt and build with 7onic components

What AI Does Automatically

フルガイドにより、AIはコンポーネントとトークンを一体的に扱います。

Uses 7onic Components

カスタムボタン/モーダル/フォームを自作せず、正しいPropsで既存コンポーネントを使用します。

Correct Compound Patterns

ModalにはModal.Content、TooltipにはTooltip.Triggerなど、必須サブコンポーネントをもれなく適用します。

Token Classes Only

bg-blue-500ではなくbg-primaryを使用し、すべてのスタイリングがデザイントークンに従います。

Form Patterns

AIはInputをFieldで囲み、Field.Labelにrequiredを付け、Field.Errorで正しくエラー処理を行います。

Before / After

コンポーネントガイドありとなしで構築した同じUI

llms-full.txt なし
<button
  className="bg-blue-500 text-white px-4 py-2
    rounded-lg hover:bg-blue-600"
>
  Save Changes
</button>

<div className="fixed inset-0 bg-black/50 z-[9999]">
  <div className="bg-white rounded-lg p-6 max-w-md">
    <h2>Confirm</h2>
    <p className="text-gray-500">Are you sure?</p>
  </div>
</div>
llms-full.txt あり
<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <Modal.Trigger asChild>
    <Button>Open</Button>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Title>Confirm</Modal.Title>
    <Modal.Description>
      Are you sure?
    </Modal.Description>
  </Modal.Content>
</Modal>

コンポーネントはダークモード、アクセシビリティ、z-indexレイヤリング、アニメーションを自動で処理します。手動実装は不要です。

Example Prompts

以下のプロンプトをコピーしてコンポーネントで構築を開始できます。

llms-full.txtを読んで、7onicでSaaSダッシュボードを作って
7onicコンポーネントでフォームバリデーション付き設定ページを作って
7onicを使ってソートとページネーション付きデータテーブルを作って

Token Rules

コンポーネントはすべてのスタイリングにデザイントークンを使用しています。トークンの完全ガイドはAI Integration (Tokens)をご覧ください。

bg-blue-500
bg-primary
text-gray-700
text-foreground
p-[17px]
p-4
rounded-[7px]
rounded-md

Troubleshooting

よくある問題と対処法

AIが7onicを使わずカスタムコンポーネントを作る

AIに伝えてください：「llms-full.txtを再読み込みして。カスタムで作らず、既存の7onicコンポーネントを使って。」

AIがcompoundのサブコンポーネントを忘れる

AIに伝えてください：「ModalにはModal.ContentとModal.Titleが必要。llms-full.txtのcompound構造を確認して。」

AIが間違ったPropsを渡す

AIに伝えてください：「llms-full.txtのPropsテーブルを確認して。文書化されたprop値のみ使用して。」

Disclaimer

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