デザインシステムを作成すると、Claude Designは仕様に合わせた出力を生成できます。提供するアセット（コードベース、スライドデック、その他のデザイン参考資料）から再利用可能なコンポーネント、色、タイポグラフィ、パターンを抽出し、アカウント内で作成されるすべてのプロジェクトの基盤として使用します。
Anthropic LabsのClaude DesignはPro、Max、Team、Enterpriseプランのリサーチプレビューで利用可能になりました。この機能はEnterpriseプランではデフォルトでオフになっています。
このガイドは、デザインシステムをセットアップするデザイナーまたはブランドオーナー向けです。これは1回だけ実行する必要があります。セットアップ後、すべてのチームメンバーのプロジェクトが自動的にそれを使用します（TeamおよびEnterpriseプランの場合）。
前提条件
デザインシステムセットアップのために組織管理者から付与されたアクセス許可。
ソース資料として以下のうち少なくとも1つ：
デザインシステムまたはコンポーネントライブラリを含むコードベース
ビジュアルアイデンティティを反映するスライドデックまたはドキュメント
ブランドガイドラインアセット（ロゴ、カラーパレット、タイポグラフィ仕様）
ステップ1：組織を作成または切り替える
組織のデザインシステムをセットアップするには：
Claude Designを開きます。
プロジェクトピッカーの左下隅で、現在の組織名をクリックします。
組織を選択するか、新しい組織を作成します。
オンボーディングフローにリダイレクトされます。それを完了します。
ステップ2：ブランドおよび製品アセットをアップロードする
オンボーディング中（またはその後、組織設定から）、ブランドと製品を定義するアセットをアップロードします。Claudeはそれらを分析し、再利用可能なデザインシステムを抽出します。
アップロードするもの：
コードベース：デザインシステムがコード内に存在する場合（たとえば、Reactコンポーネントライブラリ）、リポジトリをリンクまたはアップロードできます。Claudeはコンポーネントとスタイルを読み取ります。
プロトタイプ：スクリーンショット、ウェブフロー、既存のデザインファイル。
スライドデックまたはドキュメント：ブランドを反映した、よくデザインされたPowerPointやPDFでも機能します。Claudeは色、レイアウトパターン、タイポグラフィの選択を抽出します。
個別アセット：ロゴ、カラーパレットファイル、タイポグラフィサンプル。
開始するには1つのソースで十分ですが、複数を提供するとClaudeはより多くの情報を得られます。
ステップ3：生成されたデザインシステムを確認する
アップロード後、Claudeは組織のデザインシステム（UIキット）を生成します。これには通常以下が含まれます：
カラーパレット：アセットから抽出されたプライマリ、セカンダリ、アクセントカラー。
タイポグラフィ：フォントファミリー、サイズ、ウェイト。
コンポーネント：ボタン、カード、ナビゲーション要素、その他の再利用可能なUIパターン。
レイアウトパターン：スペーシング、グリッドシステム、ページ構造。
デザインシステムを検証するには、テストプロジェクトを作成して、出力がブランド期待に合致しているかを確認します。以下のようなプロンプトを試してください：
「[あなたの製品]のランディングページを作成してください。」
「[関連メトリクス]を表示するダッシュボードをデザインしてください。」
「[チームが一般的にプレゼンテーションするトピック]についてのプレゼンテーションを作成してください。」
ステップ4：チームで利用可能にする
デザインシステムの品質に満足したら、「公開」トグルがオンになっていることを確認します。公開後、組織内のClaude Designホームスクリーンから作成されたプロジェクトは、デフォルトの代わりにデザインシステムを使用します。
最良の結果を得るためのヒント
仕様だけでなく、実際の例を含めてください。完成したランディングページまたはマーケティングサイトは、カラーパレットだけよりもブランドの雰囲気についてClaudeに多くを伝えます。
反復してください。最初の抽出がブランドをうまく捉えていない場合は、追加または異なるアセットをアップロードしてみてください。
デザインシステムの更新
ブランドは進化します。デザインシステムが変わったら、Claude Design内で更新できます。Claude Design組織設定から、編集するデザインシステムの横にある「開く」ボタンをクリックします。右上隅の「リミックス」ボタンをクリックして、ウィンドウの左側のチャットインターフェースを開きます。ここからClaudeと協力してデザインシステムを変更できます。