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

# デザインシステムを作成する

> 色、タイポグラフィ、トークンを抽出して保存済みのデザインシステムにし、既存のアプリをその配下に移行します。

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

ブランドは、Driveフォルダ、Figmaファイル、またはすでに気に入っている1つのデザインの中にあります。それをワークスペースに保存されるデザインシステムに変えましょう。役割別の色、タイプスケール、トークン、いくつかのコンポーネント例が含まれます。以降の新しい作業はブランドに沿って始まり、既存のアプリも同じシステムで作り直せます。すでにリリースしたアプリにシステムを適用するのは、スタイルシートの差し替えではなく、本格的な再構築です。

## こんな人におすすめ

* 次の5ページをデザインする前に、信頼できる唯一の情報源が必要なプロダクトデザイナー。
* アプリ同士のデザインがばらばらになり、すべてを同じ見た目に揃えたい創業者。

## コネクタ

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "ロゴ、色、タイポグラフィ、ブランドガイドライン",
},
{ id: "figma", name: "Figma", why: "抽出元となる既存のデザイン" },
]}
/>

## 始める前に

ブランドを定義するものを、現在どこにあってもすべて集めてください。ブランドファイル、気に入っているデザイン、ウェブサイト、Figmaファイルなどです。ロゴ、色、タイポグラフィがDriveに保存されている場合は、Driveを接続してください。Figma URL、サイトのURL、または既存の `DESIGN.md` があれば用意してください。

## Agentへのプロンプト

<AiPrompt>
  このGoogle Driveフォルダ\[リンク]のブランドファイルとこのFigmaファイル\[URL]か
  ら、\[ブランド]のデザインシステムを作成してください。役割別のパレット、タイ
  プスケール、トークンを抽出してください。ロゴも含めてください。
</AiPrompt>

## 期待できること

Agentは、渡されたソースを[生きたスタイルガイド](/ja/design/design-md)に変換します。役割が付いた色、タイプスケール、システムの他の部分が参照するトークン、2〜3個のコンポーネント例、そしてあなたが提供したブランドアセットが含まれます。内容を確認したら、**Save design system** を選択してワークスペースに保存します。それ以降、新しい作業は最初のフレームからブランドに沿って生成されます。

すでに作成したアプリをシステムの配下に移行するには、対象を選択して[システムを適用](/ja/design/apply-design-system)します。

## 自分向けにカスタマイズする

<AiPrompt>
  デザインシステムにコンポーネント例を追加してください。ボタン、フォームフ
  ィールド、ナビゲーション、カード、テーブル、空の状態です。
</AiPrompt>

<AiPrompt>
  システムにダークモードを追加してください。トークンは同じで、役割別の色の
  値を2つ目のセットとして用意します。
</AiPrompt>

## トラブルシューティング

<AccordionGroup>
  <Accordion title="システムがブランドに見えない">
    言葉で説明するのではなく、ソースを指し示してください。Driveのブランドフォルダ、Figma URL、公開中のサイト、`DESIGN.md` のいずれも入力として使えます。
  </Accordion>

  <Accordion title="適用に思ったより時間がかかる">
    既存の作業にシステムを適用すると、スタイルシートを差し替えるのではなく、スタイリング層が再生成されます。開始前に表示される時間とクレジットに関する警告は通常の動作です。
  </Accordion>

  <Accordion title="新しい編集が古いスタイルに戻ってしまう">
    その後の編集でも、システムを使い続けるはずです。ずれに気づいたら、チャットでその旨を伝え、画面を指定してください。
  </Accordion>

  <Accordion title="別のプロジェクトでシステムを再利用できない">
    先に保存してください。保存していないスタイルガイドは、生成されたプロジェクト内にとどまります。
  </Accordion>
</AccordionGroup>

## 関連項目

<CardGroup cols={2}>
  <Card title="ランディングページをデザインする" href="/ja/use-cases/design-landing-page">
    保存したシステムを、ウェイトリストやローンチページで活用します。
  </Card>

  <Card title="既存のウェブサイトをリデザインする" href="/ja/use-cases/redesign-your-website">
    すでにあるサイトからシステムを抽出します。
  </Card>
</CardGroup>