Open Design 対 Figma・Claude Design — 完全ウォークスルー
ひとつの問いを軸にした Open Design の完全ツアー — エージェントネイティブなワークスペースは Figma の隣でどこに位置づけられるのか。インストールし、任意のエージェントを設定し、デザインシステムを扱い、実際のランディングページを構築し、キャンバス上のツールで反復し、エクスポートする。Anton Larichev の実践ウォークスルーに基づく。
このガイドは、ひとつの問いを軸にした Open Design の完全ウォークスルーです。すなわち、エージェントネイティブなデザインワークスペースは Figma と Claude Design の隣でどこに位置づけられるのか。アプリをインストールし、エージェントを設定し、組み込みのデザインシステムを扱い、実際のランディングページを最初から最後まで構築し、キャンバス上のツールで反復し、結果をエクスポートします。これは Anton Larichev（PurpleSchool）が実践ウォークスルーでたどった道筋を、最新リリースに合わせて書き直し更新したものです。ライブ実行は上の動画をご覧いただくか、文章版を読み進めてください。
Open Design のワークスペース — プロトタイプ、スライドデッキ、画像、動画が、落ち着いた見慣れたひとつのキャンバスにまとまっている。
Open Design とは？
Open Design は、オープンソースでローカルファーストのデザインプラットフォームで、あなたがすでに使っているコーディングエージェントの上で動作します。ひとつのモデルに縛られるのではなく、マシンにすでにある CLI を検出し — Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そしてさらに数十種類 — そのエージェントに生成を任せます。Anton の表現は的確です。表面上は Claude Design によく似ているが、内部的には「すでにインストール済みの同じエージェントを動かすだけの追加 UI」なのです。コーディングプランの上に二つ目のサブスクリプションを払う必要はありません。
真剣に検討する価値がある理由：
- オープンソース、Apache-2.0 — クローンし、セルフホストし、クライアントワークでも使える。
- ローカルで動作 — 何もアップロードされない。プロジェクトは自分のマシン上のフォルダに保存される。
- エージェントを差し替え可能 — サポートされている任意の CLI に向けるか、別のハーネス用に自分の API キーを持ち込める。
- デザインシステムとスキルの豊富なライブラリが組み込まれており、まっさらなキャンバスから始める必要がない。
- 静的なデザインにとどまらない — プロトタイプ、スライドデッキ、画像生成、動画まで、すべてひとつのワークスペースから。
Figma との違い
これこそ多くの人が実際に知りたい比較なので、率直に語りましょう。
Figma は手動の共同作業型ベクターエディタです。すべてのフレームを動かし、すべてのコンポーネントを描き、その強みは精密さとリアルタイムのチーム協働にあります。ここでは何もデザインを生成してくれません — あなた自身がデザイナーとして作業します。
Open Design はそれを逆転させます。やりたいことを記述し、デザインシステムを選ぶと、エージェントが本物のインタラクティブな HTML アーティファクトを生成し、それをあなたが磨き上げます。出力はベクターファイルではなくコードです — つまり、作ったものは何であれ、すぐにあなたの実際のプロジェクトに近いものになります。
Anton が正直に認めている点：Open Design は現状、Figma ファイルからデザインシステムを抽出するのが苦手です。今日 Figma エクスポートを与えると、抽出されたシステムは雑然と返ってくる傾向があります。そのため、信頼できる情報源が Figma にある場合は、まずエージェントにその Figma デザインをコード化させ、それから Open Design にコードを取り込むほうがきれいです（詳細は後述）。Open Design は Figma インポーターではなく、生成と反復のための場として扱いましょう。
Claude Design との違い
Claude Design を使ったことがあれば、インターフェースはすぐに見慣れたものに感じるでしょう — 同じ落ち着いた美学、同じアーティファクト優先のループです。重要な違いは次のとおりです：
- ひとつだけでなく、任意のモデル。Claude Design は Opus 4.7 に固定されます。Open Design は選んだエージェントを何でも動かせ — プロジェクトの途中で切り替えることもできます。
- メディア生成を内蔵。プロバイダーのキー（OpenAI GPT Image、MiniMax、ElevenLabs など）を追加すると、Open Design は画像・音声・動画をその場で生成します。これは Anton が挙げる際立った違いです — 単一プロバイダーのデザインツールではこれは得られません。
- ローカルかつ商用安全。Apache-2.0 に加えローカルファーストであるため、クライアントワークはマシンの外に出ることなく、誰の許可も必要としません。
ステップ 1 — Open Design をインストールする
入り口は三つあります。自分に合うものを選んでください：
| 方法 | 向いている人 | 要件 |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり変更したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで暮らす人 | 既存のコーディングエージェント CLI |
選択肢 A — デスクトップアプリ（推奨、設定不要）
open-design.ai/download にアクセスし、お使いの OS 用のビルドを入手してください。インストール後、アプリは PATH 上にあるすべてのコーディングエージェント CLI を自動検出し、組み込みのスキルとデザインシステムを読み込みます。動くワークスペースに最速でたどり着ける方法です。
選択肢 B — ソースから実行する
Anton が動画でやっているように、リポジトリから実行したい場合は、ほんの数コマンドです：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web表示されるローカル URL を開いてください。動的なポートを解決するので、ハードコードせず — 表示されたアドレスをそのままクリックしてください。Node ~24 と pnpm 10.33.x が必要です。Corepack が固定された pnpm バージョンを選んでくれます。
選択肢 C — コーディングエージェントに組み込む
GUI を一度も開かずに、エージェント内のスキルとして Open Design を呼び出すには：
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …その後、エージェント内で：Use open-design to generate a landing page with the Stripe design system。
ステップ 2 — エージェントを設定する
初回起動時、Open Design はマシンをスキャンして見つかったすべての CLI を表示し、短いセットアップを案内します：
- エージェントとモデルを選ぶ。Anton は Opus 4.7 上の Claude Code を使っています（「デザインには最高の部類」）が、Codex、Gemini CLI、その他検出されたエージェントに向けることもできます。接続を確認する Test ボタンがあります。
- または API キーを使う。ローカル CLI を使いたくない？ 代わりにベース URL、キー、モデルを設定します。
- メディアプロバイダーを追加する。これが差別化要因です — OpenAI GPT Image、MiniMax、ElevenLabs などのキーを追加して、画像・音声・動画をその場で生成します。
- スキルを切り替える。必要なデザインスキル（システムデザイン、プロトタイプ、ブランドガイドラインなど）を有効にし、残りはオフのままに。
これらはすべて後から変更できるので、最初のひとまわりはシンプルに。
ステップ 3 — デザインシステムを扱う
デザインシステムのライブラリはこのツールの中核です。各エントリは実在のブランドを取り上げ、そのパレット、タイポグラフィ、コンポーネント、全体の雰囲気を再利用可能なシステムへと体系化しています。
デザインシステムライブラリ：各エントリは実在のブランドを、再利用できるパレット、タイポグラフィ、コンポーネント、視覚的雰囲気に分解する。
自分のブランドを取り込む方法は二つあり、Anton は両方を試します：
- Claude Design の ZIP をインポートする（今日いちばんきれい）。Claude Design でシステムを作った？ そこで開き、Share → Download project as .zip を選び、その ZIP を Open Design にドラッグします。すべてのトークンとコンポーネントがそのまま引き継がれます。
- 既存のコードからシステムを抽出する。デザインシステムを付けずに高精細ファイルを作成し、そのインポート先をあなたの実際のコードのフォルダに向けて、エージェントにそこからデザインシステムを導き出すよう頼みます — 色、タイポグラフィ、スペーシング、そして JSX コンポーネントキット。完璧ではありませんが、調整できる手堅い出発点になります。
何かをインストールする前に、ウェブ上の open-design.ai/plugins でプラグインライブラリの全体を閲覧できます。
ステップ 4 — 実際のページを構築して反復する
本当のワークフローは、プロトタイプとスライドデッキの構築です。動画では、Anton がインポートしたデザインシステムに対して PurpleSchool 向けの料金/ランディングページを構築します：
- プロジェクトを作成し、web/desktop/mobile を選び、ワイヤーフレームか高精細かを選びます。
- デザインシステムを添付し、ブリーフを貼り付けます（Anton は短い仕様を使います：ヒーロー、料金、機能、FAQ、フッター）。
- プロジェクト内でモデルを選び（ここでは Opus 上の Claude Code）、送信します。
- Open Design が一行書く前に尋ねる確認の質問に答えます — 媒体、対象読者、トーン — そして、それが To-Do リストを進めていくのを見守ります。
テンプレートライブラリ：プロトタイプ、スライド、画像、動画の出発点。タイプで絞り込み、フォークして始められる。
Open Design がその真価を発揮するのはキャンバス上の反復です：任意のブロックを選んでコメントを付け、プレビューに直接描いて変更したい箇所を指し示し、フォントやサイズをインラインで編集し、デスクトップ/タブレット/モバイルの幅でレイアウトを確認します。これは、ターミナルの素のエージェントでは再現しづらい、素早いフィードバックループです。
満足したら、結果を単体の HTML または ZIP としてエクスポートしてチームに渡すか — コードを直接プロジェクトに取り込みます。
ヒント
- 生の Figma ファイルを与えないこと。Figma の抽出は今日いちばん弱い経路です。まず Figma をコードに変換し、それからコードをインポートしましょう。
- 自分のブランドが必要なときは Claude Design の ZIP をインポートしてください — もっともスムーズな入り口です。
- ローカル CLI を使い、呼び出しごとの API 料金ではなく、すでに支払っているサブスクリプションで生成が走るようにしましょう。
- キャンバス上のコメントと描画ツールに頼りましょう — ブロックを選んでその上に描くほうが、変更を文章で説明するよりはるかに速いです。
- 力強い下書きを期待し、それから磨きましょう。小さなスペーシングや書式のずれを捉えるため、早めにエクスポートしてください。
FAQ
Figma を Open Design で置き換えるべき？ いいえ — 役割が違います。Figma は精密な共同作業型の手動エディタ。Open Design はコードを出力する、エージェントネイティブな生成と反復の場です。Open Design でブリーフから本物のオンブランドな下書きへ素早くたどり着き、手作業の精密さやライブな協働が必要な仕事には Figma を使い続けましょう。
自分の Figma デザインをインポートできる？ 間接的には。直接の Figma 抽出は今日では粗いものです。信頼できる経路は、エージェントで Figma デザインをコードに変換し、そのコードを（または Claude Design の ZIP を）Open Design にインポートすることです。
Claude を使わなければならない？ いいえ。Open Design はサポートされている任意のエージェントを動かします — Codex、Gemini CLI、Cursor、OpenCode など — そしてプロジェクトの途中でモデルを切り替えたり、自分の API キーを持ち込んだりできます。
無料なの？ アプリは Apache-2.0 のオープンソースで、ローカルで実行するのは無料です。料金がかかるのは、接続したエージェントとプロバイダーのモデルおよびメディア使用分だけです。
この文章版ガイドは Anton Larichev の実践ウォークスルーに基づいています。上のフル動画をご覧いただき、開発と AI ツールの深掘りをもっと見るには PurpleSchool | Anton Larichev を購読してください。