> ## 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.

# デザインシステムを解説する

> デザインシステムはトークン、色、タイポグラフィ、コンポーネントを捉え、生成するすべてのデザインをブランドに沿ったものに保ちます。

デザインシステムとは、あなたのブランドを機械が扱える形にしたものです。あなたの製品を「あなたの製品らしく」見せる決定事項 — カラートークン、タイポグラフィ、間隔、サンプルコンポーネント — を捉えることで、Designは一般的にきれいなだけの結果ではなく、ブランドに沿った結果を生成できるようになります。

## デザインシステムに含まれるもの

生成されたデザインシステムには以下が含まれます：

* **トークン** — 他のすべてが参照する、名前付きの値（色、間隔、角丸など）
* **色** — 役割（プライマリ、サーフェス、アクセントなど）を持つあなたのパレット
* **タイポグラフィ** — フォントファミリー、サイズ、ウェイト
* **サンプルコンポーネント** — システムの使用例を示す、いくつかの構築済みコンポーネント（ボタン、カードなど）
* **ロゴとブランドアセット**（提供した場合）

このシステムは、プロジェクト内の`DESIGN.md`ファイルとしても表現できます。詳しくは[リファレンス](/ja/design/design-md)を参照してください。

## デザインシステムの生まれ方

作成方法は2通りあります：

1. **ゼロから** — Replitのホームページでプロンプトし、ブランドについての短いアンケートに回答します。
2. **既存のデザインから** — すでに気に入っているモックアップからシステムを抽出します（フレームの三点メニュー → 抽出）。

Figma URL、Webサイト、コード、参考画像、既存の`DESIGN.md`など、ソースから種を作ることもできます。詳細は[デザインシステムを作成する](/ja/design/create-a-design-system)を参照してください。

## デザインシステムが効果を発揮するとき

* **1度きりでなくデザインする場合。** 2回目のデザインこそ、不整合が始まるところです。システムがあれば、N回目の生成も1回目と同じ見た目を保てます。
* **チームで一緒にデザインする場合。** システムをワークスペースに保存すれば、全員が同じブランドから生成できます。
* **既存の作業に適用する場合。** 既存のアーティファクトはそのシステムの下で再構築できます。詳しくは[デザインシステムを適用する](/ja/design/apply-design-system)（時間とクレジットに関する警告の意味を含む）を参照してください。

## 保存される場所

デザインシステムはワークスペースに保存され、新しいアーティファクトを作成するときに選択でき、プロジェクトごとに切り替えられます。