> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# デザインシステムの設定
> 組織のデザインシステム（コンポーネントライブラリ、ブランドアセット、デザイントークン、ビジュアル標準）をAgentに設定して、すべてのアプリ、サイト、アーティファクトがデザイン言語に従うようにします。
デザインシステムは、Replit上で組織が作成するすべてのもの（Webアプリ、モバイルアプリ、スライド、その他のアーティファクト）において、オンブランドのUIを構築するためにAgentが必要とする知識を提供します。標準のReplit pnpmモノレポ内でコンポーネントライブラリ、デザイントークン、ブランドアセット、使用ルールを設定することで、Agentは最初のプロンプトからビジュアル言語を適用します。
デザインシステムは**Enterprise**プランのみで利用できます。デザインシステムを設定・管理できるのは組織管理者のみです。
## デザインシステムを設定する理由
デザインシステムがない場合、すべてのビルダーはコンポーネントライブラリ、カラートークン、レイアウト規約をAgentに手動で説明する必要があります。デザインシステムを設定することでこの問題を解決します：
* **ビジュアル標準のエンコード**：Agentが汎用的なデフォルトではなく、正確なコンポーネント、色、スペーシングを使用します
* **一貫性の確保**：すべてのアプリが同じデザイン言語に従います
* **オンボーディング時間の短縮**：新しいビルダーが即座にオンブランドな結果を生み出します
* **暗黙知のキャプチャ**：チームの頭の中に存在するデザインの決定とコンポーネントの使用パターンをAgentのためにドキュメント化します
## 必要なもの
* tarファイルまたはtarファイルセットとしてのフロントエンドコードコンポーネントライブラリ
* デザインシステムで使用するフォントアセットとアイコン
* デザインシステムのAIドキュメント（MCP、Agentスキル）
## 設定できること
デザインシステムの設定は3つの部分で構成されます：
1. **カスタムインストラクション**。`custom_instruction/instructions.md`ファイルは、すべてのプロジェクトに適用される高レベルのルールをAgentに提供します：使用するコンポーネントライブラリ、参照するデザイントークン、従うパターン。Agentは常にこのファイルをコンテキストに持ちます。
2. **スキル**。`.agents/skills/`内のスキルは、Agentがオンデマンドで読み込む詳細な参照資料を提供します。コンポーネントAPIドキュメント、テーミングガイド、レイアウトパターンライブラリ、メインのインストラクションファイルには大きすぎるその他の詳細な参照コンテンツに使用します。
3. **デザインとブランドアセット**。ロゴ、アイコン、フォント、その他のブランドアセットを専用フォルダー（例：`src/assets/brand/`）に配置します。Agentとビルダーが壊れやすい相対パスの代わりに`@brand/logo.svg`のようなクリーンなインポートで参照できるよう、Viteパスエイリアスを設定します。これにより、プロジェクト全体でアセット参照が一貫します。
## ステップバイステップガイド
このガイドでは、tarファイルとしてパッケージ化された既存のコンポーネントライブラリを使用してデザインシステムをエンドツーエンドで設定する手順を説明します：
1. **新しいReplitアプリを作成**してtarファイルをアップロードします。
2. **Replit Agentにパッケージをインストールしてすべてのコンポーネントを表示するよう指示します。** Agentはプロジェクトを設定してコンポーネントライブラリをレンダリングします。
3. **出力を確認します。** すべてのコンポーネントが正しく表示され、期待通りであることを確認します。すべてが確認できたら、[デザインシステムスキルの作成](#creating-the-design-system-skill)に進みます。
### デザインシステムスキルの作成
コンポーネントが準備できたら、最後のステップはAgentがすべてのプロジェクトでコンポーネント、トークン、使用パターンを参照できるようにデザインシステムスキルを作成することです。
以下のプロンプト全体をコピーしてAgentに貼り付けます。``をデザインシステムの名前に置き換えてください：
````
このプロジェクトのコンポーネントとパッケージから``デザインシステムスキルを作成してください。
以下に示すファイル構造を使用します。ルートに`SKILL.md`、ガイドとコンポーネントドキュメントのための`references/`ディレクトリ、機能に必要なすべての依存関係を含む`packages/`ディレクトリ。
プロジェクト内のすべてのコンポーネントを確認し、`references/components/`以下のそれぞれのファイルに、プロパティ、バリアント、使用例を含めてドキュメント化してください。
`SKILL.md`をガイドとコンポーネント参照ファイルへのリンクを含むインデックスとしてフォーマットし、以下の例に従って「一般的なガイダンス」セクションと「コンポーネント」セクションを含めてください。
ファイル構造：
.agents/skills/your-design-system/
├── SKILL.md
├── references/
│ ├── guides/
│ │ ├── setup.md
│ │ ├── guardrails.md
│ │ ├── layout-and-spacing.md
│ │ └── ...
│ └── components/
│ ├── component-index.md
│ ├── button.md
│ ├── checkbox.md
│ └── ...
└── packages/
└── (Tarファイルまたはコードコンポーネント)
`SKILL.md`ファイルはガイドとコンポーネント参照の別のMarkdownファイルへのリンクを含むインデックスとして機能します。各リンクされたファイルは1つのトピックを詳細にカバーします。生成された`SKILL.md`の例を以下に示します：
```markdown
---
name: your-design-system
description: UIを構築または変更する際に使用します。デザインシステムのコンポーネントAPIリファレンス、レイアウトガイダンス、ビジュアルスタイルルールを提供します。
---
# Your Design System
## 一般的なガイダンス
- [セットアップ](references/guides/setup.md) — インストール、プロジェクト設定、プロバイダーのセットアップ
- [ガードレール](references/guides/guardrails.md) — 破ってはいけないハードルール（禁止パターン、必須トークン、アクセシビリティの最小要件）
- [レイアウトとスペーシング](references/guides/layout-and-spacing.md) — グリッドシステム、スペーシングスケール、レスポンシブブレークポイント、ページテンプレート
- ...
## コンポーネント
- [コンポーネントインデックス](references/components/component-index.md) — ステータスとカテゴリを含む利用可能なコンポーネントの全リスト
個々のコンポーネント参照（プロパティ、バリアント、例）：
- [ボタン](references/components/button.md)
- [チェックボックス](references/components/checkbox.md)
- ...
```
ガイドファイルはそれぞれ1つのトピックをカバーします。セットアップとインストールの手順、ベストプラクティスとルール、トークン値の参照テーブル、正しい使用法を示す短いコード例。
コンポーネントファイルはそれぞれ1つのコンポーネントをドキュメント化します。コンポーネント名、簡単な説明、プロパティテーブル、使用例、ガイドラインまたは制約を含みます。これらのファイルが完全であるほど、Agentの出力が向上します。
````
### AgentにスキルをXX接続する
スキルが作成されたら、`custom_instruction/instructions.md`がAgentをスキルに向けていることを確認します：
```markdown theme={null}
# デザインシステム
`.agents/skills/your-design-system/`のデザインシステムスキルを読み込んで従ってください。
UIを構築または変更する際は常にデザインシステムを適用してください。
```
最後に、Agentが最初からビジュアル標準を理解できるよう、`replit.md`にデザインシステム固有のコンテキストを事前に設定します。プロジェクトの概要、優先するコンポーネントライブラリ、主要なデザインの好み（スペーシングスケール、アクセシビリティ要件）、アーキテクチャスタックを含めます。
### セットアップの検証
デザインシステムを展開する前に、以下の必須事項を確認します：
* `custom_instruction/instructions.md`がAgentをデザインシステムスキルに向けている
* `.agents/skills/`にコンポーネント参照、ガイド、パッケージを含むスキルが含まれている
* `replit.md`にプロジェクトの概要、好み、アーキテクチャが事前設定されている
* デザイントークンファイルが含まれている（`tokens.css`または同等のもの）
* デザインシステムパッケージが`package.json`に事前インストールされている
* 新しいテストアプリを作成してAgentがデザインシステムを正しく使用することを確認する
### デザインシステムを組織にピン留めする
デザインシステムの準備ができたら、すべての組織メンバーが使用できるようにピン留めします：
1. 組織内のデザインシステムアプリに移動します
2. アプリのアクションメニュー（三点ドットメニュー）を開きます
3. **Agentの入力ボックスにピン留め**を選択します
デザインシステムのピン留めとピン留め解除ができるのは組織管理者（`system_admins`ロールのメンバー）のみです。
メンバーがピン留めされたデザインシステムを編集できずに表示・使用できるよう、メンバーアクセスを**読み取り専用**に設定します。
デザインシステムは組織のすべてのメンバーのAgentの入力ボックスの下に選択可能なピルとして表示されます。削除するには、同じメニューを開いて**Agentの入力ボックスからピン留め解除**を選択します。
## デザインシステムを継続的に維持する
デザインシステムは進化します。常に最新の状態に保ちましょう：
* デザインシステムが新しい色、スペーシング、タイポグラフィの値をリリースしたら**トークンファイルを更新する**
* コンポーネントに新しいプロパティ、バリアント、使用パターンが追加されたら**スキルを更新する**
* デザイン原則や標準が変更されたら**インストラクションを更新する**
* デザインシステムの新しいリリースが出たら**パッケージのバージョンを更新する**
* 新しいアプリを作成してAgentが正しい出力を生成することを確認することで**定期的にテストする**
## デザインシステムとカスタムテンプレートの比較
デザインシステムと[カスタムテンプレート](/teams/custom-templates)は異なる目的で使用されます：
| | デザインシステム | カスタムテンプレート |
| ---------- | ----------------------------------------------- | --------------------------------------- |
| **目的** | フロントエンドスタックをチームのものに変更し、コードコンポーネントを活用する | デフォルトのスタックを完全に置き換える（例：Rust、Go、C++） |
| **スタック** | 標準のReplit pnpmモノレポ内で動作 | 完全にカスタムのプロジェクト構造を定義 |
| **提供するもの** | コンポーネントライブラリのルール、デザイントークン、ブランドアセット、ビジュアルスキル | フルボイラープレート：ランタイム、ビルド設定、依存関係、プロジェクトレイアウト |
| **適用対象** | Webアプリ、モバイルアプリ、スライド、アーティファクト — Agentが構築するすべてのもの | その特定のテンプレートから作成されたアプリのみ |
通常のReplit体験全体でビジュアル標準に従ってAgentに構築させたい場合はデザインシステムを使用します。根本的に異なるスタックが必要な場合はカスタムテンプレートを使用します。
## 関連リソース
* [カスタムテンプレート](/teams/custom-templates) - 組織のために完全にカスタムなスタックを設定する
* [Agentスキル](/references/agent/skills) - スキルの仕組みと作成方法
* [スキルを使用する](/build/use-agent-skills) - スキルの使用に関するハンズオンガイド
* [replit.md](/references/project-setup/replit-dot-md) - プロジェクトコンテキストでAgentの動作をカスタマイズする
* [Enterpriseの概要](/category/teams) - Enterpriseの機能について学ぶ