Claude Design から Open Design への移行 — 無制限の環境を手に入れる
Claude Design の週ごとの制限から解放されるための移行ガイド。Open Design をインストールし、Claude Design の ZIP をインポートし、好きなモデルで制作し、プロジェクトの途中でモデルを切り替え、AI 画像を追加し、デプロイするまでを解説します。「いつ乗り換えるべきか」という率直な判断も収録。Jack Roberts による実践的なウォークスルーに基づいています。
このガイドは、Claude Design の厳しい週ごとの制限にぶつかっているすべての人のための移行プレイブックです。Open Design をインストールし、既存の作業を持ち込み、好きなモデルで制作し、プロジェクトの途中でモデルを切り替え、AI 画像を追加し、デプロイする — そのすべてをローカルで行えます。これは Jack Roberts が実践的なウォークスルーで実演しているエンドツーエンドの移行を、最新リリースに合わせて書き直しアップデートしたものです。ライブ実演は上の動画をご覧いただくか、テキスト版を読み進めてください。
Open Design のワークスペース — プロトタイプ、スライドデッキ、画像、動画が、落ち着いた見慣れた一つのキャンバスにまとまっています。
そもそもなぜ移行するのか？
Jack の主張は率直です。Claude Design は本当に優れているが、制限が手を止めてしまう、と。使えるモデルは一つ（Opus 4.7）に固定され、意味のあるデザインは週におよそ数件までに制限され、しかもすでに支払っているコーディング費用に加えて月額 $20〜$200 を払うことになります。より安いモデル、別のモデル、あるいは大規模にデザインしたいと思った瞬間、足止めを食らうのです。
Open Design はそうした壁を取り払います。
- 好きなモデルをどれでも — しかもプロジェクトの途中で切り替えられます。
- 週ごとの上限なし — 生成はすでに使っているエージェントとプロバイダーに乗ります。
- Apache-2.0 — 制限の厳しいライセンスのクローンリポジトリとは違い、クライアントワークでも商用利用が安全です。
- ローカルファースト — 何もアップロードされず、プロジェクトは自分のマシンに留まります。
このライセンスの点は、聞こえる以上に重要です。Jack は、いくつかの「Claude Design クローン」は実際にはクライアントプロジェクトで使えないと強調します。Apache-2.0 なら、それで作った有償の仕事を、ロイヤリティも許諾も不要で世に出せます。
ステップ 1 — Open Design をインストールする
入り口は 3 通りあります。
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで暮らす人 | 既存のコーディングエージェント CLI |
最もシンプルなのは open-design.ai/download からのデスクトップアプリです — インストール済みのエージェント CLI を自動検出します。動画では、Jack は開発者向けのルートを選び、リポジトリをエージェントに渡してクローンと実行を任せています。
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webこれは独自のローカル Web アプリ — 自分のマシンでホストされる Claude Design ライクなワークスペース — を、出力される動的な URL で開きます（ポートをハードコードしないでください）。
ステップ 2 — Claude Design の作業を持ち込む
みんなが最も求めている移行ステップ、それが Claude Design プロジェクトのインポートです。Claude Design でデザインシステムやプロジェクトを作ったなら、そのまま持ち越せます — Claude Design で開いてプロジェクトを ZIP としてダウンロードし、その ZIP を Open Design でインポートするだけ。トークンやコンポーネントも一緒に移るので、ゼロから作り直す必要はありません。
デザインシステムライブラリ：各エントリは実在のブランドをパレット、タイポグラフィ、コンポーネント、そして再利用できるビジュアルの雰囲気にまで分解しています。
さらに、奥行きのある組み込みのデザインシステムライブラリも受け継げます — Airbnb、Apple、Nike、PlayStation など多数 — なので、何もインポートしなくても、ブランドを選べばエージェントがそのボイス、タイポグラフィ、パレット、レイアウトの言語を受け継ぎます。
ステップ 3 — 選んだモデルで制作する
初回起動時、Open Design はマシンにインストール済みのエージェントを表示します。Jack は Claude Code を選び、プロジェクトに名前（「analytics」）を付け、高忠実度を選択し、Stripe 風のダッシュボードのブリーフを書きます。Open Design は明確化のための質問 — 画面、主な閲覧者、トーン、スコープ、アクセント — を投げかけ、To-Do リストを順にこなして、一発でインタラクティブなダッシュボードを生み出します。2 回目のフィードバックでプロダクション対応に仕上がります。
テンプレートライブラリ：プロトタイプ、スライド、画像、動画の出発点を、種類で絞り込みフォークして始められます。
ステップ 4 — プロジェクトの途中でモデルを切り替える
これは Jack のお気に入りの一手であり、Claude Design にはできないことです。プロジェクトの途中で、（左下の）モデルスイッチャーを開き、Claude Code から Codex（あるいは ChatGPT、Gemini、接続済みのものなら何でも）に変更して保存します。すると次のメッセージ — 「ライブイベントのストリームを滑らかにして、カクついて見える」 — は、同じプロジェクトで、同じコンテキストのまま、新しいモデルが処理します。
彼のプロのコツはこうです。Opus で最初のデザインを確立し、それから安いモデルに切り替えてイテレーションと拡張を行う。モデルにとって、原理から見た目を組み立てるよりも、同じものを増やす方がはるかに簡単です。だから最も強力なモデルにアーキテクチャを定めさせ、安いモデルに量をこなさせましょう。
ステップ 5 — AI 画像を追加してデプロイする
設定でメディアプロバイダーのキー（たとえば GPT Image 用の OpenAI）を追加すれば、インラインで生成画像をリクエストできます — 「ボックスの一つに、ジブリ風の投資用ブタの貯金箱の画像を追加して」 — すると、グラデーションまで含めてそのままデザインに落とし込まれます。このインライン生成は、純粋なデザインクローンでは得られないものです。
完成したら、共有からフルのエクスポートメニューが開きます。スタンドアロンの HTML、PowerPoint、PDF、ZIP、テンプレートとして保存 — あるいはトークンを使って Vercel に直接デプロイ。ZIP としてダウンロードすれば、Codex、Claude、あるいはお好みのエディタで開き直すこともできます。
いつ乗り換えるべきか（そして、いつそうでないか）
Jack は相性について正直です。商用利用が安全な成果物を必要とするエージェンシーやフリーランサー、すでに Claude Code / Codex / Cursor に課金しているマルチモデル運用者、あるいは Claude Design の週ごとの上限を使い切ってもっとデザインしたいだけの人なら、Open Design に乗り換えましょう。これらすべてに初めて触れる人で、その制限の中で満足しているなら、当面は Claude Design のままで構いません。
一つだけ注意点を。Open Design は若く、急速に進化中のプロジェクトなので、時折の粗さは想定しておき、大目に見てあげてください — 改善のスピードは速いです。
コツ
- まず Claude Design の ZIP をインポートする — すでにあるシステムを作り直さないこと。
- Opus で見た目を定めてから、安いモデルに切り替える — イテレーションと拡張のために。
- メディアキーを追加する — インライン AI 画像を得られ、静的なデザインツールからの本物のアップグレードになります。
- ローカル CLI を使う — 生成が、呼び出しごとの課金ではなく、すでに支払っているサブスクリプションに乗るように。
- 早めにエクスポートする（HTML/ZIP/Vercel） — 引き渡す前に検証するために。
FAQ
Claude Design のプロジェクトは移行できますか？ はい。Claude Design からプロジェクトを ZIP としてダウンロードし、その ZIP を Open Design にインポートします — トークンとコンポーネントが引き継がれます。
本当にどんなモデルでも使えますか？ はい — マシンにインストール済みのエージェント（Claude Code、Codex、Gemini、Cursor、OpenCode など）から選び、プロジェクトの途中で切り替えるか、自分の API キーを持ち込めます。
クライアントワークで安全に使えますか？ はい。Open Design は Apache-2.0 なので、制限の厳しいライセンスの一部のクローンとは違い、ロイヤリティも許諾も不要で商用利用できます。
無料ですか？ アプリは Apache-2.0 のオープンソースで、ローカルでの実行は無料です。支払うのは、接続したエージェントとプロバイダーのモデルおよびメディアの利用分だけ — これこそが、固定の月額上限から抜け出す方法そのものです。
このテキストガイドは Jack Roberts の実践的なウォークスルーに基づいています。上のフル動画をご覧いただき、実践的な AI 構築の解説をもっと見たい方は Jack Roberts をフォローしてください。