Claude DesignからClaude Codeへコンテキストを失わずに移行する方法 (2026年版)

Claude Designは現在、Claudeの内部で動作しています。Anthropicのスタートガイドによると、「Artifactsを開始できるテンプレートの一つであり、あらゆるチャット、Claude Code、Artifactsタブから使用でき、キャンバス上での編集やデザインシステムを含めることが可能」と説明されています。Free、Pro、Max、Team、Enterpriseの各プランで利用可能です。

従来のスタンドアロンサイト（claude.ai/design）は閉鎖される予定です。Anthropicの移行ガイドによれば、「2026年12月14日に閉鎖されますが、その日までは引き続きアクセス可能」とのことです。そこにあるプロジェクトはArtifactsとしてClaudeに移行でき、この機能は有料プランから順次展開されています。

これにより、構築したいデザインの出発点は以下の3つになります：

• Claude内でArtifactとして作成されたデザイン
• まだスタンドアロンサイトにあるデザイン
• Claude Code内で/designコマンドを使用してドラフトされたデザイン

これら3つはすべて同じ場所に到達しますが、そのルートと付随する情報は異なります。

ハンドオフによるデザインそのもの

スタートガイドでは、ハンドオフについて次の一文で説明されています。「デザインをソフトウェアにする準備ができたら、Claude Codeにハンドオフできます。これにより、スクリーンショットからやり直すのではなく、既存の作業から継続できます。」

エクスポートオプションにおいて、Claude Codeへのハンドオフには2つの送信先があります。ローカルマシンのClaude Code用の「Send to local coding agent」と、クラウドセッション用の「Send to Claude Code Web」です。同じメニューには、.zipダウンロード、PDF、PPTX、Googleスライド、スタンドアロンHTMLなどの他の形式も用意されています。

Claude Code側については、同記事で次のように述べられています。「Claude Codeから/designを使用して、デザインをコードベースにインポートしたり、コードをライブプロトタイプとしてエクスポートしたり、あるいはClaudeに最初から最後まで構築を任せたりすることができます。」

/design-syncによるデザインシステム

2つ目の要素はデザインシステムです。Anthropicのデザインシステムに関する記事によると、デザインシステムが「すでにReactコンポーネントとして存在する場合、Claude Codeで/design-syncを実行してください。トークンとコンポーネントを直接読み取り、コード化されたプロダクトデザインシステムに最適に機能します」とされています。

スタートガイドではその目的を明確に述べています。「/design-syncを使用してデザインシステムを取り込むことで、Claude Designで構築するすべてのものが既存のコンポーネントから開始されるようになります。」コンポーネントがリポジトリにある場合、リポジトリがソースとなり、デザインは実際にデプロイされるものから始まります。

CLAUDE.mdによるデザイントークン

Claude Codeには、ビジュアルルールを記述するための独自の場所もあります。Claude CodeのArtifactsドキュメントによると、Artifactsをブランディングと一致させるには、「プロジェクトのCLAUDE.mdやリポジトリ内のテーマファイルなど、Claudeが見つけられる場所に記録してください」とあります。また、Claudeがそれらをどのように優先順位付けするかも付け加えられています。「Claudeは、自身の選択よりもデザインシステムを優先し、それら両方よりもユーザーのプロンプトを優先します。」

したがって、色、タイポグラフィ、スペーシングを含むCLAUDE.md内の短いデザインシステムセクションは、そのリポジトリでのすべてのClaude Codeセッションで読み込まれます。Claude CodeのサブディレクトリにおけるCLAUDE.mdの制限に関するガイドでは、重要な行が読み込まれるように長いファイルをどこに配置すべきかを説明しています。

Anthropicによるハンドオフの説明はデザインに関するものです。デザインの背景にある会話が引き継がれるとは書かれておらず、スタンドアロンサイトについてはチャットやコメントは移行できないと明記されています。以下の3種類のコンテキストは、自分自身で持ち込む必要があります。

デザインを形作った会話。 あるレイアウトを別のレイアウトより優先した理由、対処することに合意したエッジケース、設定した制約などはチャットの中にあります。スタンドアロンサイトについて、Anthropicは明示的です。「チャットやコメントはClaudeに移行できないため、閉鎖されるまでスタンドアロン版に残ります。」移行されないもののリストには「Claudeとのチャット」や「プロジェクトやデザインシステムへのコメント」が挙げられており、「スタンドアロン版が閉鎖される前に、チャットやコメントから必要なものを保存してください」とアドバイスしています。

コメントとレビューノート。 デザインに残されたフィードバックも、スタンドアロンサイトにおける同様のリストに含まれています。

単一のデザインを超えて適用されるルール。 フォームにどのコンポーネントを使用するか、空の状態には何を表示するか、エラーの文言はどうするか。これらが会話の中で決まったのであれば、それらはデザインファイルには含まれていません。

これはハンドオフ機能の欠陥ではありません。デザインファイルはデザインを保持するものです。その背後にある意思決定は別の要素であり、Claude Codeはそれらをリポジトリ内のファイルから読み取ります。

スクリーンショットを送信する。 大まかな開始点としては機能しますが、Anthropic自身のハンドオフの説明では、スクリーンショットからやり直すことと対比されています。スクリーンショットには構造やコンポーネントの情報が含まれません。

デザインチャット全体をClaude Codeに貼り付ける。 意思決定の根拠は持ち込めますが、大量のノイズも混入し、セッションのコンテキストが不要な議論で埋まってしまいます。

Claude Codeがデザインシステムを推測することに頼る。 CLAUDE.mdのトークンや読み取り可能なコンポーネントがない場合、Claude Codeは独自のビジュアル選択を行ってしまいます。

スタンドアロンプロジェクトを12月まで放置する。 チャットやコメントは移行されず、スタンドアロンプロジェクトへの公開リンクも閉鎖後は機能しなくなります。

ステップ 1: デザイン、システム、意思決定を収集する

ハンドオフを行う前に、以下の3つを収集します。

• デザイン。 構築したいバージョンが最新であることを確認してください。まだスタンドアロンサイトにある場合は、オプションが利用可能になったらプロジェクトをClaudeに移動するか、プロジェクトを.zipとしてダウンロードしてください。Anthropicは、プロジェクトを移動する際に「何が移動し、何が異なって動作し、何が残るか」を示すレビューが表示されると述べています。
• デザインシステム。 システムがコード内にある場合は、どのリポジトリのどのコンポーネントかをメモしてください。ブランドアセットからClaude内で構築された場合は、それが移行済みであり、デザインで使用されているものであることを確認してください。
• 意思決定。 デザインチャットを読み返し、何がなぜ決定されたかを書き出します。レイアウトの選択、各画面に必要な状態、コピーのルール、アクセシビリティ要件、そして却下した案などです。1つの決定につき1行でまとめます。スタンドアロンプロジェクトの場合、チャットは移行されないため、12月14日より前に行ってください。

ステップ 2: 各要素をClaude Codeに持ち込む

機能が実装されるリポジトリにおいて：

1. デザインシステムを取り込む。 コンポーネントがリポジトリにある場合は、/design-syncを実行して、Claude DesignとClaude Codeが同じコンポーネントを使用するようにします。
2. CLAUDE.mdにビジュアルルールを追加する。 色、タイポグラフィ、スペーシングを含む短いデザインシステムセクションを記述するか、それらを保持するテーマファイルを指定します。
3. Claude Codeが読み取れる場所に意思決定を追加する。 機能全体に適用されるルールをCLAUDE.md、またはCLAUDE.mdが参照する短いデザインノートファイルに記述します。そのセッション限りの詳細は、セッション自体に残しておきます。
4. デザインをハンドオフする。 デザインから、ローカルセッションの場合は「Send to local coding agent」、クラウドセッションの場合は「Send to Claude Code Web」を選択します。または、Claude Codeから/designを使用してインポートします。
5. コンテキストを提示して構築を開始する。 最初のメッセージで、これがどのデザインであるか、どの意思決定に従うべきか、そして「完了」の状態がどのようなものかをClaude Codeに伝えます。その後、コードを書く前に、何を構築しようとしているのか要約するように指示します。

クラウドセッションにハンドオフする場合、ローカルマシンの設定は自動的には引き継がれません。Claude Codeクラウドセッションにおけるローカルセットアップの扱いに関するガイドでは、クラウド環境にロードされる内容について解説しています。

手動移行も機能しますが、意思決定が「移動不可能なデザインチャット」の中にあったという問題は残ります。このリポジトリのためにCLAUDE.mdにコピーしても、別の製品の次のデザインではまた同じ作業が始まります。ChatGPTで構築内容をレビューしたり、別のAIアシスタントで次の機能を計画したりする場合、それらの意思決定はそこには存在しません。

MemoryLakeは、設計上の意思決定や慣習を一つのリストとして維持するための記憶レイヤーです。これはClaude Codeだけでなく、ChatGPTやCodexなど、接続する他のアシスタントからも利用可能です。

エントリーはあなた自身の言葉で作成します。Claude Design、Artifacts、デザインシステム、Claudeチャット、あるいはベンダーのストレージから何かが読み取られたり、書き込まれたり、削除されたりすることはありません。業務内容については、ツールの外部に保持するものに関する組織のポリシーに従ってください。

ステップ 1: APIキーを作成する

サインインし、ダッシュボードからキーを生成します。このキーはMemoryLakeワークスペースに属し、Claudeアカウントとは別個のものです。

ステップ 2: 最初の記憶（memory）をアップロードする

手動移行のステップ1で書き留めた意思決定（レイアウトの選択、状態、コピーのルール、却下した案など）から始めましょう。1つの決定につき1つのエントリーを作成し、日付を入れ、属する製品や機能のラベルを付けます。

ステップ 3: AIとエージェントを接続する

Claude Codeや、使用している他のアシスタントを接続します。次のデザインハンドオフ、レビュー、または後続機能の開発時には、すでに意思決定が手の届くところにあります。

第一の違いは、構築されたものが「正しい理由」に基づいてデザインと一致することです。Claude Codeはデザイン、コンポーネント、そしてその背後にある意思決定を把握しているため、「なぜ2番目のステップが任意なのか」を推測する必要がありません。

第二に、デザインシステムが一箇所に集約されます。/design-syncがリポジトリからコンポーネントを読み取り、CLAUDE.mdがトークンを保持することで、新しいデザインも新しいコードも同じソースから始まります。

第三に、意思決定がツールの寿命を超えて存続します。12月にスタンドアロンチャットが閉鎖されても、あるいは二度と開かないデザインチャットがあっても、その推論が失われることはありません。もしChatGPTでもデザインを行う場合は、ChatGPTがデザインシステムを忘れてしまう理由に関するガイドが参考になります。

スクリーンショットではなく、デザインをハンドオフする。 ハンドオフにより、Claude Codeが必要とする構造が維持されます。

リポジトリをコンポーネントのソースにする。 デザインシステムがコードとして存在する場合は、/design-syncを使用してください。

ビジュアルルールをCLAUDE.mdに記述する。 リポジトリ内のすべてのセッションがそれらを読み取ります。

デザインチャットを離れる前に意思決定を書き留める。 理由を添えて、1項目1行でまとめます。

12月14日までにスタンドアロンのチャットとコメントを保存する。 これらはClaudeに移行されません。

構築前に計画を再述するようClaude Codeに求める。 意思決定が正しく伝わっているかを確認する最も早い方法です。

機能全体のルールと一時的な詳細を分ける。 ルールはファイルに、詳細はセッションに記述します。

もしClaude Codeが依然として合意内容から逸脱する場合は、Claude Codeがプロジェクトのコンテキストを忘れる理由に関するガイドで一般的な原因を確認してください。

Claude Designは現在、ClaudeおよびClaude Codeの内部に統合されています。完成したデザインは、「Send to local coding agent」または「Send to Claude Code Web」でClaude Codeに引き継ぐか、/designでインポートできます。コード内のデザインシステムは/design-syncで取り込め、ビジュアルルールはCLAUDE.mdに配置できます。

Anthropicは、デザインの背景にある会話がハンドオフで移動するとは説明していません。デザインチャットを離れる前に意思決定を書き留め、機能全体のルールをリポジトリに配置し、デザインファイルよりも長持ちする場所に保管してください。そうすることで、構築されるソフトウェアは、デザインが作成されたのと同じ理由に基づいて形作られるようになります。