目次
はじめに
こんにちは、佐々木です。
2026/6/17にClaude Codeがアップデートされ、/design-syncコマンドでClaude Designのデザインシステムとコードベースを同期できるようになりました。
自分で作成したWebアプリも、Claude Design上でデザインを編集できると便利だと思い、試してみました。
しかし実際にやってみると、Claude Design側で編集した内容をコードに反映するところで苦労したので、その内容も含めて紹介します。
概要
Design Syncは、ローカルのコンポーネントライブラリと、Claude Design上のデザインシステムプロジェクトを同期する仕組みです。
そのためには、Claude Codeで以下のコマンドを利用します。
| コマンド | 説明 |
|---|---|
/design-login |
/design-syncのための design-system アクセスを claude.ai アカウントで認可します |
/design-sync [hint] |
スキル。リポジトリの React デザインシステムを変換して Claude Design にアップロードします。これにより、デザインが実際のコンポーネントを使用するようになります。オプションでデザインシステムに名前を付けます。例えば/design-sync Acme DS。初回同期はすべてのコンポーネントを検証し、大規模なリポジトリでは数時間かかる場合があります。Anthropic API で利用可能です。Amazon Bedrock、Google Cloud の Agent Platform、Microsoft Foundry では、基盤となるツールが claude.ai に到達できないため、コマンドは利用できません |
参考：https://code.claude.com/docs/ja/commands
今回は、Reactで作った簡単なTodoアプリを題材に、コード→デザイン・デザイン→コードの双方向の同期を試しました。
検証用アプリの準備
検証用に、シンプルなTodoアプリを用意しました。
技術スタック：Vite / React 19 / TypeScript / Tailwind CSS v4
ローカルからClaudeDesignへの同期
ここでは、ローカルのReactコンポーネントをClaude Design上のデザインシステムとして同期する手順を説明します。
(1)/design-loginを実行
Claude Codeで/design-syncのためのアクセスを認可します。
表示されたURLからClaude Designを開き、アクティベーションコードをClaude Codeに貼り付けます。
❯ /design-login Design login Authorize design-system access (read and write your organization's claude.ai/design projects) with your claude.ai account. This is separate from this session's authentication and changes nothing else. A design credential is already stored — completing this flow replaces it. (以下略)
(2)/design-syncを実行
ローカルのReactコンポーネントを変換し、Claude Designにアップロードします。 コマンド中にアップロードするコンポーネントの範囲やデザインシステム名が聞かれるので、任意に回答します。
❯ /design-sync ● Searching for 5 patterns, reading 2 files, listing 1 directory, running 1 shell command, recalling 1 memory… ⎿ $ cd "C:\Users\yuki\Project\検証用\claude-design-sync" && git log --oneline --all -- .design-sync todo-react/.design-sync 2>&1 * Coalescing… (35s · ↓ 1.8k tokens · thinking) Tip: Use /btw to ask a quick side question without interrupting Claude's current work (以下略)
Claude Design上にデザインシステムが新規作成されました。
ClaudeDesignで修正
Claude Design上で、自然言語で修正内容を指示すると、デザインが更新されます。 今回は、Todo一覧をリッチにするよう変更を指示しました。
ClaudeDesignからローカルへの同期
Claude Designで修正した内容をローカルのコードに反映します。 公式ドキュメントにあるように、デザイン→コード方向には専用のコマンドが用意されていないため、コード→デザインのときのようにコマンド一つでは完結せず、以下の手順で手動で反映します。(ここでしばらく詰まりました)
(1)Claude Codeへ連携用プロンプト取得
Claude Design画面右上の「Share」から、コードへの同期用コマンドを表示し、コピーします。
(2)Claude Codeへ貼り付けて実装
先ほどコピーしたプロンプトを、ローカルで起動したClaude Codeに貼り付けます。
❯ Use the claude_design MCP (https://api.anthropic.com/v1/design/mcp, auth via /design-login) to import this project: https://claude.ai/design/p/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX Implement: the designs in this project ✢ Burrowing… (11s · ↑ 500 tokens · thought for 7s) (以下略)
Claude DesignのMCPを利用しているため、初回はセッションの再起動と認証が求められました。
セッションの再起動が必要です。次の手順でお願いします。 1. 現在のClaude Codeセッションを終了・再起動してください(このプロジェクトディレクトリで) 2. 起動後、/mcp を実行して claude_design の認証(OAuth)を完了させてください — ブラウザでの承認が求められるはずです 3. 認証が終わったら、このタスク(https://claude.ai/design/p/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX のデザインをインポートして実装)を再度依頼してください。会話の続きとして対応します
再起動と認証を済ませて再度依頼すると、ローカルのコードにClaude Designでの修正が反映されました。
所感
良かった点:
- 実装済みのフロントエンドコンポーネントをそのままClaude Designに取り込めるため、一からデザインを起こし直す手間がない。
- Claude Design上ではプロンプトで指示するだけで高品質なデザインを作成でき、細かいCSS等の手直しをする必要がない。
- コード→デザインの同期手順はシンプルで、
/design-login→/design-syncの2コマンドだけで最初の同期が完了する。
課題点:
- 双方向同期に対応しているものの、デザイン→コード方向の反映は、Shareから同期用コマンドをコピーしてClaude Codeに手動で貼り付ける必要があり、コード→デザイン方向(コマンド1つ)に比べると手作業が多く煩雑に感じた。
- 初回同期はすべてのコンポーネントを検証する仕様のため、大規模なリポジトリでは数時間かかる可能性がある。今回は小規模なTodoアプリだったが、それでも10分くらいかかった。
まとめ
今回、Claude CodeのDesign Sync機能を使い、Reactで実装したTodoアプリのコンポーネントをClaude Design上のデザインシステムに同期し、コード→デザイン、デザイン→コードの双方向の連携を試してみました。
既存のReactコードベースをそのままClaude Designに取り込み、プロンプトだけで品質の良いデザイン修正ができる点は非常に便利だと感じました。 一方で、デザイン→コード方向の反映にはMCPの認証やコマンドの手動貼り付けといった手作業が残っており、コード→デザイン方向に比べるとまだ手間がかかる印象です。
とはいえ、既存の実装をベースにデザインを素早く試行錯誤できる仕組みとして、UXの改善サイクルを回すうえで十分に実用的だと感じました。今後、双方向の同期がよりシームレスになるアップデートに期待します。
