🤯 Claude Design をやめます——この代替ツールのほうが優れている

これは、クライアントワークのデザインで生計を立てている人によるハンズオンレビューです。Jérémy DE CAMPOS は実在の制作会社向けに SaaS プロダクトを構築しており、コーディングの前にインターフェースの下書きをするのに Claude Design を使ってきました。彼の動画の中で、あるコミュニティメンバーが Open Design を勧めます。そこで彼は、これ以上ないほど公平なテストを行います——すでに Claude Design で作ったクライアント向けツールをまったく同じように作り直し、比較するのです。この記事版は彼の実演を追い、本記事向けに書き直したうえで最新リリースに合わせて更新しています。ライブの反応は上の動画で、あるいは続けて記事版をお読みください。

Open Design：自分のマシン上で動かす、オープンソースで agent-native なデザインワークスペース。

Open Design とは？

Open Design はオープンソースでローカルファーストのデザインプラットフォーム——Claude Design と Figma に対する agent-native な代替ツールです。ひとつの有料モデルに縛りつける代わりに、あなたがすでに持っているコーディング agent の上で動作します：Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode など。

Jérémy が最初の 1 分で気づいたこと：

• オープンソース、Apache-2.0——GitHub 上にあり、開発が速く、すでに驚くほど完成度が高い。
• ローカルで動作——プロジェクトは自分のマシン上の実在するフォルダに置かれ、開いて中身を確認できる。
• 自分の agent を持ち込める——21 以上の agent に対応；料金ページは彼らのホスト型モデル用でしかないので、自分の key や CLI をつなげば不要。
• プロトタイプ以上——プロトタイプ、ダッシュボード、スライド、画像、さらには動画まで。加えて HTML Anything や HTML Video といった姉妹ツールも。

Claude Design を使ったことがあれば、インターフェースはすぐに馴染むはずです——そのうえに、あなたが選んだエンジンが乗ります。

公平なテスト：本物のクライアントツールを作り直す

おもちゃのようなプロンプトではなく、Jérémy は本物のプロジェクトを再利用します——制作会社の各クライアントへのアップデートを管理するために構築中の、社内向けのデリバリー＆バグ追跡 SaaS です。彼はすでにそのブリーフとデザインシステムのファイルを Claude Design に渡していたので、Open Design にはまったく同じ入力——同じ仕様、同じデザインシステム——を渡して動かします。同じプロンプト、同じ出発点の素材、2 つのツール：信頼に値する比較はこれだけです。

token ではなく、あなたの Claude サブスクリプションで動かす

最初に決めるのはエンジンで、コストの話が変わるのはまさにここです。Open Design は生の API key を接続できます——が、Jérémy は明白なリスクを指摘します：Opus のような有料モデルをトークン従量課金で動かすと「腕が飛ぶほど高くつきかねない」。

そして彼は肝心の選択肢を見つけます：ローカルの Claude Code CLI を動かすこと。従量制の API トークンを燃やす代わりに、Open Design はすでにインストール済みの claude CLI を動かすので、生成はあなたがすでに支払っている Claude サブスクリプションに対して走ります。彼は即座に切り替え——「とても興味深い、と言うときは、本当に興味深いという意味だ」——最後に消費を確認します：フルセッションで使ったのはウィンドウの約 9%。これを毎日やる制作会社にとって、その差こそが議論のすべてです。

ヒント：エンジンはワークスペース左下で選びます。既存のサブスクリプションを再利用するには Open Design をローカル CLI（Claude Code、Codex、Gemini）に向け、従量制の API key はフォールバックとしてだけ残しておきましょう。

それが作ったもの：絵ではなく、クリックできるプロトタイプ

ここがレビューの潮目です。Open Design が返すのは平べったいスクリーンショットではなく——動く、クリックできるプロトタイプを構築します。Jérémy はチケットボードに入り、個々のチケットを開いて詳細ビューを見て、列の間でカードをドラッグします。kanban はインタラクティブで；チケット詳細にはクライアントのメモ、キャプチャログ、コンソールビューが表示され；画面同士は本物のアプリのように互いにリンクしています。

静的なモックアップではない——画面同士がつながり、要素はクリックに反応する。

続いて彼は追加のプロンプトでさらに押し込みます：他のページも作り、サイドバーのリンクを配線して、モックアップをナビゲートできるようにして。それは応じて、追加のページを生成してつなぎ、二度言われるまでもなくレイアウトをタブレット版とモバイル版に適応させます。

デザインシステムが、きちんと提示される

彼は Claude Design に渡したのと同じデザインシステムを与えたので、比較はまっすぐです——そして彼の評価は率直です：Open Design のデザインシステムのほうが提示がうまい。色、タイポグラフィ、余白、コンポーネントが明快に並べられ、注釈と点線ガイドのスタイリングが、システムを「投げ出した」のではなく「考え抜かれた」ものに見せます。

色の寄せ集めではなく、ドキュメントのように読めるデザインシステム。

キャンバス上で直接編集・注釈できます：領域を選び、メモを残し、その場でテキストを微調整し、変更を agent に適用してもらうためキューに入れる——そして実際に適用され、パスごとにより整った結果が返ってきます。

モックアップから PRD へ——あなたの agent への引き継ぎ

Jérémy の実際のワークフローにぴたりと合う機能が PRD 生成です。彼のやり方は vibe-coding：チケットをまとめ、変更を説明し、仕様を Claude Code に渡して、コード編集そのものはそれにやらせます。Open Design はまさにその橋を作ります——3 つの形態の PRD です：

• 彼が読むためのプレビュー版、
• AI にそのまま食わせる Markdown 版、
• そして必要なときにクライアントへ送る PDF 版。

デリバリービュー（作業を完了とマーク）とアプリの変更履歴と組み合わさることで、「デザインした画面」から「私のコーディング agent が構築の土台にできる仕様」までのループを閉じます——ワークスペースを離れることなく。

モックアップの先へ

動いているあいだ、彼は残りを見て回り、次々と発見します：

• メモリ——セッションを通じてやったことを自動的に保持する。
• 画像ライブラリ + 生成——インラインで画像を取り込む、あるいは作る。
• スキル——作り置きのスキルが一式あり、自分のもので拡張できる。
• MCP サーバー＆コネクタ——外部 MCP をサポート、さらにその逆も：Open Design を MCP サーバーとして公開し、あなたの Claude Code CLI がターミナルから直接キャンバスを駆動して編集できるようにする。
• Figma からのインポート、プラグインハブ、テンプレートパック。
• デザインレビューパネル——有効にすると、agent の横に 5 パネルのレビューが現れ、出力を採点する。

評決

彼の結論は明快です：彼は Claude Design をやめ、自分の本物のプロジェクトを——デザインでも動画でも——Open Design に移すことを本気で検討しています。彼を惹きつけた組み合わせは具体的です：同じ入力から、より良く提示されたデザインシステムと本当にインタラクティブなプロトタイプが生まれ、従量制トークンではなく彼がすでに支払っている Claude サブスクリプションで動き、コーディング agent にそのまま渡せる PRD を吐き出す。彼はこの先数週間これを本気で使い込み、また報告するつもりだと言います——が、初回の印象は、これは単なる無料のクローンではなく、彼のワークフローにとってより優れたツールだ、というものです。

FAQ

Open Design は本当に無料ですか？ アプリはオープンソース（Apache-2.0）で、ローカルで動きます。料金がかかるのは選んだモデルの分だけ——そして Claude Code のようなローカル CLI をつなげば、それはすでに持っているサブスクリプションで動き、追加のトークン課金はありません。

料金ページの有料プランは必要ですか？ いいえ。あのプランは Open Design のホスト型モデル用です。自分の key かローカル CLI を持ち込めばスキップできます。

Claude Design ですでに作ったものをインポートできますか？ はい——Claude Design からデザインシステムをエクスポートして Open Design にインポートすれば、同じブランドのまま生成を続けられます。

本物の仕様をエクスポートできますか？ はい。Open Design はプレビュー、Markdown、PDF の形で PRD を生成できるので、Markdown をコーディング agent に、PDF をクライアントに渡せます。

どの agent を使うべきですか？ 対応しているものならどれでも——出力の質は選んだモデルに連動します。ローカルの Claude Code、Codex、Gemini CLI を使うのが、既存のサブスクリプションを再利用できる最も安い道です。