Claude Code design-syncの使い方 — Reactデザインシステムを同期する
/design-syncはリポジトリのReactデザインシステムをClaude Designにアップロードするコマンドです。初回同期の所要時間と、Bedrock等で使えない制約を解説します。
/design-syncは、リポジトリのReactデザインシステムをClaude Codeが解析し、Claude Designにアップロードするコマンドです。同期が終わると、Claude Designが生成するデザインは実際のコンポーネントを使うようになります。初回同期はすべてのコンポーネントを検証するため、大規模なリポジトリでは数時間かかることがあります。Amazon Bedrock・Google Cloud's Agent Platform・Microsoft Foundry・Claude Platform on AWSでは、内部のツールがclaude.aiに到達できないため、このコマンド自体が使えません。
design-syncとは何をするコマンドか
/design-syncは公式ドキュメントで「Convert your repo's React design system and upload it to Claude Design, so designs it produces use your real components(リポジトリのReactデザインシステムを変換し、Claude Designにアップロードすることで、生成されるデザインが実際のコンポーネントを使うようにする)」と説明されています。対象はReactのデザインシステムで、変換後にClaude Design側のコンポーネントとして登録されます。
/design-syncはbuilt-inコマンドではなくバンドルスキルです。/verifyや/code-reviewと同じ枠組みで、Claude Codeにあらかじめ組み込まれたプロンプトとして動作します。バンドルスキルとSKILL.mdで自作するスキルの関係はClaude Code Skills完全ガイドで解説しています。バンドルスキルはすべてのセッションで利用できますが、disableBundledSkills設定を有効にすると/doctor以外まとめて無効化されます。/design-syncだけを個別に隠したい場合は、skillOverridesで"design-sync": "off"と設定します。
はじめに — 前提条件
/design-syncを実行する前に、次の2点を確認します。
- Reactのデザインシステムを持つリポジトリであること。対象はReactに限定されており、他のUIフレームワークでは変換の対象になりません
- claude.aiアカウントでの認証が済んでいること。
/design-syncはClaude Designへのアップロードを伴うため、claude.aiアカウントへのアクセス許可が必要です
ステップ1 — design-loginで認証する
はじめに/design-loginを実行し、claude.aiアカウントへの認証を済ませます。
/design-login/design-loginは「Authorize design-system access for /design-sync with your claude.ai account(claude.aiアカウントで/design-syncのデザインシステムアクセスを許可する)」ための専用コマンドです。/design-syncはこの許可がないと実行できません。認証はセッションをまたいで保持されるため、リポジトリごとに毎回実行する必要はありません。
ステップ2 — design-syncを実行する
認証が済んだら、リポジトリのルートで/design-syncを実行します。
/design-syncデザインシステムに名前を付けたい場合は、引数として渡します。
/design-sync Acme DS引数なしで実行すると、Claude Codeがリポジトリの構成からデザインシステム名を推測します。複数のデザインシステムを扱うモノレポや、推測結果を変えたい場合は引数で明示します。
初回同期はすべてのコンポーネントを検証するため、大規模なリポジトリでは数時間かかることがあります。これはコンポーネント数に比例する処理で、ボタンやフォーム要素程度の小さなデザインシステムであれば数分で終わりますが、数百コンポーネント規模のリポジトリでは待ち時間を見込んでおく必要があります。コンポーネントを新規追加したり既存コンポーネントのpropsやスタイルを変更したりした場合、/design-syncを再実行すれば差分だけが反映される可能性がありますが、2回目以降の所要時間について公式ドキュメントは明言していません。継続的にメンテナンスしているリポジトリでも、再同期には一定の待ち時間を見込んでおくのが安全です。
認証方式によって/design-syncが使えるかどうかも変わります。Claude Codeの利用環境別に並べると次のとおりです。
| 認証方式 | /design-syncの可否 |
|---|---|
| Anthropic Consoleのキー認証 | /design-syncの可否利用可能 |
| Claude Codeのclaude.aiサブスクリプション認証 | /design-syncの可否利用可能 |
| Amazon Bedrock | /design-syncの可否利用不可(基盤ツールがclaude.aiに到達できない) |
| Google Cloud's Agent Platform | /design-syncの可否利用不可(同上) |
| Microsoft Foundry | /design-syncの可否利用不可(同上) |
| Claude Platform on AWS | /design-syncの可否利用不可(同上) |
アーティファクトのデザインスキルとは別物
Claude Codeには、/design-syncとは別に「アーティファクトを作るときに自動で適用される組み込みのデザインスキル」があります。v2.1.182以降、Claude Codeがアーティファクトをビルドするとき、このスキルが配色・タイポグラフィー・レイアウトを整えます。このスキルはプロジェクト内に既存のデザインシステムがないか先に探し、CLAUDE.mdやテーマファイルに記録されたデザイントークン(色・タイポグラフィー・余白の名前付き値)があれば、それを自分の判断より優先して使います。
この2つは目的も対象も異なります。アーティファクトのデザインスキルは、Claude Codeの中でアーティファクト(単発のHTML/Reactページ)を作るときにローカルのCLAUDE.md等を参照する仕組みです。一方/design-syncは、リポジトリのReactデザインシステムそのものをClaude Designという別プロダクトへアップロードし、Claude Design上でのデザイン生成に使う仕組みです。片方はClaude Codeの内部で完結し、もう片方はclaude.aiのClaude Designへのデータ送信を伴います。両方使っている場合、CLAUDE.mdのデザイントークンとClaude Design側の同期済みコンポーネントは別々に管理される点に注意します。
ステップ3 — Claude Designで確認する
同期が完了したら、Claude Designを開いてアップロードされたコンポーネントを確認します。以降Claude Designでデザインを生成すると、汎用的なUIパーツではなく、同期した実際のコンポーネントが使われます。デザインシステム側でコンポーネントを追加・変更した場合は、/design-syncを再実行して差分を反映します。Claude Design自体の位置付けはClaude Design発表で確認できます。
よくあるつまずき
/design-syncが見当たらない・実行できない: Bedrock・Google Cloud's Agent Platform・Foundry・Claude Platform on AWSで認証している場合、このコマンド自体が提供されません。Anthropic Consoleのキー認証かclaude.aiサブスクリプション認証に切り替える必要があります- 同期に想定以上の時間がかかる: 初回同期はコンポーネント数に比例して時間がかかる仕様です。数百コンポーネント規模のリポジトリでは数時間を見込みます
- デザインシステムがReact以外:
/design-syncはReactのデザインシステムを対象にしたコマンドで、他のフレームワークのコンポーネントは変換の対象外です /design-syncが使えなくなった:disableBundledSkillsが有効になっているか、skillOverridesで個別に"off"にされていないか設定を確認します
よくある質問
/design-syncと/design-loginの違いは何ですか
/design-loginはclaude.aiアカウントへのアクセスを許可するための認証コマンドで、/design-sync本体を実行する前に一度済ませておく手順です。/design-syncはその許可を前提に、実際にデザインシステムを変換してClaude Designへアップロードします。
/design-sync Acme DSのようにデザインシステム名を指定する意味は何ですか
引数はデザインシステムの名前(hint)として渡すもので、Claude Design側で表示・管理するときの識別名になります。引数を省略するとClaude Codeがリポジトリの構成から名前を推測しますが、複数のデザインシステムを扱うモノレポでは推測結果が意図と異なる場合があるため、引数で明示しておくと管理しやすくなります。
Bedrock経由でも/design-syncは使えますか
使えません。/design-syncはAmazon Bedrock・Google Cloud's Agent Platform・Microsoft Foundry・Claude Platform on AWSのいずれでも利用できません。基盤となるツールがclaude.aiに到達できない構成のためです。これらの環境でデザインシステムを連携したい場合は、Anthropic Consoleのキー認証かclaude.aiサブスクリプション認証によるセッションを別途用意する必要があります。
まとめ
/design-syncは、リポジトリのReactデザインシステムをClaude Designに同期し、生成されるデザインに実際のコンポーネントを反映させるバンドルスキルです。実行前に/design-loginでclaude.aiアカウントの認証を済ませ、/design-sync(または/design-sync [hint])でアップロードします。初回同期はコンポーネント数に応じて数時間かかることがある一方、Bedrock・Google Cloud's Agent Platform・Foundry・Claude Platform on AWSでは基盤ツールがclaude.aiに到達できずコマンド自体が使えません。Claude Codeのコマンド体系全体はClaude Codeスラッシュコマンド一覧で確認できます。