KARAKURIDESIGN SYSTEM

AI Guide — Full

karakuriのデザイントークン + 38個のコンポーネントをすべてAIに教えるためのガイドです。@karakuri-ui/reactを使った開発で、AIが正確なProps・デフォルト値・使い方を理解するようになります。
トークンのみ必要な場合は Design Tokens AI Guide をご覧ください。

llms-full.txt・ トークン + コンポーネント
https://karakuri-design-system.vercel.app/llms-full.txt

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

Download

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

Cursor

.cursor/docs/karakuri-llms-full.txt

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

Claude Code

CLAUDE.md に参照

CLAUDE.mdに「コンポーネント情報は@./karakuri-llms-full.txt参照」と記述。

ChatGPT / Claude

チャット添付

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

Supported AI Tools

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

Claude Code
Cursor
GitHub Copilot
ChatGPT

How to Use

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

1

AIツール設定にURL貼り付け

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

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

ローカルファイルとして配置

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

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

チャットに直接添付（単発利用）

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

Before / After

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

×
Before（参照なし）

ユーザー:「確認用のモーダルを作って」

example.tsx
<div className="fixed inset-0 bg-black/50 flex items-center justify-center">
  <div className="bg-white p-6 rounded-lg w-96">
    <h2>確認</h2>
    <p>よろしいですか?</p>
    <button className="bg-blue-500 text-white px-4 py-2">OK</button>
  </div>
</div>

生のHTML、ハードコード色、アクセシビリティなし、フォーカストラップなし。

✓
After（参照あり）

ユーザー:「確認用のモーダルを作って」

example.tsx
import { Modal, ModalTrigger, ModalPortal, ModalOverlay, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter, Button } from '@karakuri-ui/react'

<Modal>
  <ModalTrigger asChild>
    <Button>開く</Button>
  </ModalTrigger>
  <ModalPortal>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader>
        <ModalTitle>確認</ModalTitle>
      </ModalHeader>
      <ModalBody>よろしいですか?</ModalBody>
      <ModalFooter>
        <Button color="primary">OK</Button>
      </ModalFooter>
    </ModalContent>
  </ModalPortal>
</Modal>

karakuri Modal使用。A11y・フォーカストラップ・ダークモード自動対応。

内部利用について

このllms-full.txtはkarakuriチーム内部の開発効率化を目的としたリソースです。npmパッケージには含まれず、このサイトからのみ提供されます。更新タイミングはkarakuriのリリースに合わせて随時行います。Props・デフォルト値はソースコードと100%一致することを検証済みです。