> ## 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. # デザインシステムを作成する > プロンプトを使ってゼロからデザインシステムを作成するか、すでに気に入っているモックアップから抽出します。そしてワークスペースに保存します。 デザインシステムを作成する方法は、あなたのブランドが今どこに存在しているかによって2通りあります。 ## ゼロから：ホームページでプロンプトする システムがあなたの頭の中（またはブランドガイドライン）には存在するものの、まだどのデザインにも反映されていない場合はここから始めます。 Replitのホームページで、欲しいデザインシステムをプロンプトボックスに説明します。例：*「プレミアムなスーパーカーレンタルブランド、Velocityのためのデザインシステムを作成して」*。 デザインシステム作成のプロンプトが入力されたホームページのプロンプトボックス Agentがあなたのシステムについて短い質問（ブランドの個性、色、タイポグラフィの好みなど）をします。Figma URL、Webサイト、コード、参考画像、ブランドアセット、既存の`DESIGN.md`など、参照元を指定することもできます。 ## モックアップから：デザインシステムを抽出する すでに気に入っているデザイン — 生成されたフレームやドロップしたテンプレート — があり、他のすべてをそれに合わせたい場合はここから始めます。 Canvas上で、見た目を取り込みたいモックアップをクリックします。 フレームの\*\*⋯\*\*（三点）メニューを開き、**Extract design system**を選びます。Agentがモックアップのトークン、色、タイポグラフィを生きたスタイルガイドに凝縮し、それをデザイン全体に適用します。 選択したフレームのアクションバーのクローズアップ。その他オプションのメニューが開いており、Apply design systemとExtract design systemが表示されている ## 確認して保存する どちらの方法でも、生成された内容を確認します：色（役割別 — プライマリ、アクセント、ミュートなど）、タイポグラフィスケール、トークン（CSS変数に反映される`tokens.json`に保存）を備えた生きたスタイルガイドです。確認できたら**Save design system**を選んでワークスペースに保存します。 フォーカスモードで生きたスタイルガイドとして表示されたAPEX X1 Design System。色、フォント、レイアウト、コンポーネントのサイドバー、コアパレット、タイプスケール、サンプルコンポーネントが表示されている ## 次のステップ * [既存のアプリに適用する](/ja/design/apply-design-system) * [デザインシステムの中身](/ja/design/design-md)