Claude Code design-syncの使い方 — Reactデザインシステムを同期する

/design-syncは、リポジトリのReactデザインシステムをClaude Codeが変換し、Claude Designにアップロードするコマンドです。同期が終わると、Claude Designが生成するデザインは実際のコンポーネントを使うようになります(組織単位の設定手順はClaude Designで自社のデザインシステムを設定する手順参照)。初回同期はすべてのコンポーネントを検証するため、大規模なリポジトリでは数時間かかることがあります。

名前が似た/designは、UI案を複数のアートボードとして並べて比較する別のコマンドです(Claude Code /designの使い方参照)。この記事では、実行手順と、/design-syncが見当たらないときの原因の切り分けを扱います。

何が起きるコマンドか

公式のコマンド一覧では、/design-sync [hint]は「Convert your repo's React design system and upload it to Claude Design, so designs it produces use your real components(リポジトリのReactデザインシステムを変換してClaude Designにアップロードし、生成されるデザインが実際のコンポーネントを使うようにする)」と説明されています。hintには、デザインシステムの名前を任意で渡せます。

/design-syncはbuilt-inコマンドではなくバンドルスキルです。/doctorや/code-reviewと同じく、Claude Codeにあらかじめ組み込まれたプロンプトとして動作します。自作スキルとの関係はClaude Code Skills完全ガイドにあります。バンドルスキルであることは、次の「見当たらないとき」の切り分けで効いてきます。

実行手順

必要なのは、Reactのデザインシステムを持つリポジトリと、claude.aiアカウントです。

/design-login
/design-sync Acme DS

コンポーネントを追加したりpropsを変えたりしたときは、/design-syncを再実行します。再実行が差分だけを処理するのか、毎回すべてを検証し直すのかは、公式ドキュメントに書かれていません。所要時間で公式が述べているのは「初回はすべてのコンポーネントを検証し、大規模なリポジトリでは数時間かかることがある」という点だけです。

/design-syncが見当たらないときの切り分け

コマンドが出てこない原因は、大きく3系統です。上から順に当てはめると絞り込めます。

なお、v2.1.285のclaude --helpにあるサブコマンド一覧にdesign-syncはありません。/importにはclaude importというシェル用のサブコマンドの形がありますが、/design-syncにはその形が用意されていません。セッションを開いて/を入力し、候補にdesign-syncが出るかどうかが、最初の確認になります。

接続先がclaude.aiに届かない環境か

/design-syncはClaude Designへの送信にclaude.aiを必要とします。次の経路ではCLIがclaude.aiに接続しないため、コマンドが使えません。

バンドルスキルが無効化されていないか

バンドルスキルなので、設定で消えることがあります。

• disableBundledSkills: true(設定ファイル)、または環境変数CLAUDE_CODE_DISABLE_BUNDLED_SKILLS=1(そのセッションだけ)で、バンドルスキルが取り除かれます。どちらか一方で無効になると、もう一方では戻せません
• skillOverridesに"design-sync": "off"を書くと、/design-syncだけが隠れます。/skillsメニューでSpaceキーを押すと、この設定が.claude/settings.local.jsonに書き込まれます
• "off"にしたスキルを完全名で呼んでも、実行はされずskillOverridesのエラーが返ります

skillOverridesの値は4段階で、隠れ方が違います。

• "on": Claudeに名前と説明が見え、/メニューにも出ます。skillOverridesに載っていないスキルは、この扱いになります
• "name-only": Claudeには名前だけが見え、/メニューには出ます
• "user-invocable-only"(/skillsメニューでの表示はuser-only): Claudeには見えなくなりますが、/メニューには残ります
• "off": Claudeからも/メニューからも消えます

メニューに出ているのに動かないのか、そもそもメニューに無いのかで、どの設定が効いているかを推測できます。v2.1.199以降の"off"は、Remote ControlのクライアントやAgent SDKの呼び出し元に示されるコマンド一覧からもスキルを外します。次の設定なら/design-syncだけが消えます。

{
  "skillOverrides": {
    "design-sync": "off"
  }
}

プラグインのスキルはskillOverridesの対象外で、/pluginで管理します。.claude/skills/や.claude/commands/に置いた自作スキルは、disableBundledSkillsの影響を受けません。逆に言えば、自作スキルが動くのに/design-syncだけ無いなら、バンドルスキルの側で止まっています。

/doctorはv2.1.205以降、disableBundledSkillsが有効でも入力できます。/design-syncにはこの扱いの記載がないため、無効化すれば消えます。

v2.1.285でclaude --helpを実行すると、起動オプションの一覧に次の行が出ます。

claude --version
claude --help | grep -n "disable-slash-commands"

2.1.285 (Claude Code)
86:  --disable-slash-commands              Disable all skills

--disable-slash-commandsで起動したセッションでは、/design-syncを含むすべてのスキルが無効になります。この起動オプションはスキルに加えてコマンドも止めるため、/design-loginも使えません。CI用のラッパースクリプトなどにこのオプションが入っていないかも、見る価値があります。

設定ファイルのどこで無効化されているか分からないときは、シェルからclaude doctorを実行する手があります。v2.1.285のclaude --helpでは、このサブコマンドは「Check the health of your Claude Code installation」と説明され、カレントディレクトリの設定ファイルを信頼確認のプロンプトなしで読むと書かれています。より詳しい点検とその場の修復は、セッション内の/doctorで行います。CLIリファレンスでは、claude doctorは設定ファイルの検証エラーも表示すると説明されています。ただし、存在しないスキル名をskillOverridesに書いた場合まで指摘されるかは書かれていません。

リポジトリがReactではないか

説明されている対象はReactのデザインシステムだけです。VueやSvelteのリポジトリでの挙動は書かれていないため、コマンドが見えていても同期できるとは限りません。

アーティファクトのデザインスキルとの違い

Claude Codeには、アーティファクトをビルドするときに適用される別のバンドルスキルもあります。名前が近いため混同されやすい2つを比べます。

両方を使っている場合、CLAUDE.mdのデザイントークンと、Claude Design側の同期済みコンポーネントは別々に管理されます。片方を更新しても、もう片方には反映されません。

使ったあとに持ち帰る判断

同期できないときは、自作スキルが動くかどうかと、起動コマンドにどんなオプションが付いているかの2点で、原因が設定側か環境側かに分かれます。自作スキルまで動かないなら--disable-slash-commandsが、自作だけ動くならdisableBundledSkillsかskillOverridesが候補です。どちらも問題なければ、接続経路を疑うことになります。Claude Design自体の位置付けはClaude Design発表、Claude Codeのコマンド体系全体はClaude Codeスラッシュコマンド一覧で確認できます。