デザインシステムの設定

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が汎用的なデフォルトではなく、正確なコンポーネント、色、スペーシングを使用します
• 一貫性の確保：すべてのアプリが同じデザイン言語に従います
• オンボーディング時間の短縮：新しいビルダーが即座にオンブランドな結果を生み出します
• 暗黙知のキャプチャ：チームの頭の中に存在するデザインの決定とコンポーネントの使用パターンをAgentのためにドキュメント化します

​

必要なもの

• tarファイルまたはtarファイルセットとしてのフロントエンドコードコンポーネントライブラリ
• デザインシステムで使用するフォントアセットとアイコン
• デザインシステムのAIドキュメント（MCP、Agentスキル）

​

設定できること

1. カスタムインストラクション。custom_instruction/instructions.mdファイルは、すべてのプロジェクトに適用される高レベルのルールをAgentに提供します：使用するコンポーネントライブラリ、参照するデザイントークン、従うパターン。Agentは常にこのファイルをコンテキストに持ちます。
2. スキル。.agents/skills/内のスキルは、Agentがオンデマンドで読み込む詳細な参照資料を提供します。コンポーネントAPIドキュメント、テーミングガイド、レイアウトパターンライブラリ、メインのインストラクションファイルには大きすぎるその他の詳細な参照コンテンツに使用します。
3. デザインとブランドアセット。ロゴ、アイコン、フォント、その他のブランドアセットを専用フォルダー（例：src/assets/brand/）に配置します。Agentとビルダーが壊れやすい相対パスの代わりに@brand/logo.svgのようなクリーンなインポートで参照できるよう、Viteパスエイリアスを設定します。これにより、プロジェクト全体でアセット参照が一貫します。

​

ステップバイステップガイド

1. 新しいReplitアプリを作成してtarファイルをアップロードします。
2. Replit Agentにパッケージをインストールしてすべてのコンポーネントを表示するよう指示します。 Agentはプロジェクトを設定してコンポーネントライブラリをレンダリングします。
3. 出力を確認します。 すべてのコンポーネントが正しく表示され、期待通りであることを確認します。すべてが確認できたら、デザインシステムスキルの作成に進みます。

​

デザインシステムスキルの作成

このプロジェクトのコンポーネントとパッケージから`<your-design-system-name>`デザインシステムスキルを作成してください。

以下に示すファイル構造を使用します。ルートに`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接続する

# デザインシステム

`.agents/skills/your-design-system/`のデザインシステムスキルを読み込んで従ってください。
UIを構築または変更する際は常にデザインシステムを適用してください。

​

セットアップの検証

• custom_instruction/instructions.mdがAgentをデザインシステムスキルに向けている
• .agents/skills/にコンポーネント参照、ガイド、パッケージを含むスキルが含まれている
• replit.mdにプロジェクトの概要、好み、アーキテクチャが事前設定されている
• デザイントークンファイルが含まれている（tokens.cssまたは同等のもの）
• デザインシステムパッケージがpackage.jsonに事前インストールされている
• 新しいテストアプリを作成してAgentがデザインシステムを正しく使用することを確認する

​

デザインシステムを組織にピン留めする

1. 組織内のデザインシステムアプリに移動します
2. アプリのアクションメニュー（三点ドットメニュー）を開きます
3. Agentの入力ボックスにピン留めを選択します

​

デザインシステムを継続的に維持する

• デザインシステムが新しい色、スペーシング、タイポグラフィの値をリリースしたらトークンファイルを更新する
• コンポーネントに新しいプロパティ、バリアント、使用パターンが追加されたらスキルを更新する
• デザイン原則や標準が変更されたらインストラクションを更新する
• デザインシステムの新しいリリースが出たらパッケージのバージョンを更新する
• 新しいアプリを作成してAgentが正しい出力を生成することを確認することで定期的にテストする

​

デザインシステムとカスタムテンプレートの比較

​

関連リソース

• カスタムテンプレート - 組織のために完全にカスタムなスタックを設定する
• Agentスキル - スキルの仕組みと作成方法
• スキルを使用する - スキルの使用に関するハンズオンガイド
• replit.md - プロジェクトコンテキストでAgentの動作をカスタマイズする
• Enterpriseの概要 - Enterpriseの機能について学ぶ