また別のオープンソースリポジトリが Claude Design をクローンした
Open Design を体系的にひと通り見ていく——インストールし、デモを動かし、組み込みのデザインシステムとテンプレートをめぐり、それが時間を割く価値があるかどうかについて率直な結論にたどり着く。Chase AI の実践ウォークスルーをもとに構成。
このガイドは Open Design を体系的にひと通り見ていく入門です。インストールし、手早くデモを動かし、組み込みのデザインシステムとテンプレートをめぐり、最後にどこが優れていてどこがまだ粗いのかを正直に読み解きます。Chase AI が実践ウォークスルーでたどった道筋を踏襲しつつ、現行リリースに合わせて書き直し最新化してあるので、ステップごとに一緒に進められます。ライブの実演は上の動画を、文章版は以下をご覧ください。
Open Design のワークスペース——プロトタイプ、スライドデッキ、画像、動画がすべて一か所にまとまった、落ち着いて見慣れたキャンバス。
Open Design とは?
Open Design は、あなたがすでに使っているコーディングエージェントの上で動く、オープンソースかつローカルファーストのデザインプラットフォームです。特定のモデルプロバイダーに縛りつける代わりに、あなたのマシンにすでにある CLI——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そのほか数十種——を検出し、そのエージェントに生成を担わせます。Chase はこれを「自分のエージェントを持ち込む(bring your own agent)」と呼びますが、まさにそこが要点です。生成はあなた自身の CLI を通して走るので、すでに契約しているサブスクリプションの上にさらに別の API 料金を払うことにはなりません。
注目に値する点をいくつか挙げます:
- オープンソース、Apache-2.0——クローンし、セルフホストし、すべての行を読める。
- ローカルで動く——プロジェクトは他人のクラウドではなく、あなた自身のマシンのフォルダに置かれる。
- エージェントを差し替え可能——21 以上のコーディングエージェントに対応。どの CLI に作業を任せるかを選べるし、別のハーネスを使いたければ自分の API キーを持ち込める。
- プロトタイプにとどまらない——プロトタイプ、スライドデッキ、マガジンレイアウト、画像生成、さらには動画まで、すべて一つのワークスペースから。
- 白紙のキャンバスから始めなくて済むよう、デザインシステムとスキルの充実したライブラリを組み込み済み。
Claude Design を使ったことがあれば、このインターフェースはすぐに見慣れたものに感じられるでしょう——Open Design は同じ落ち着いた美学を保ちつつ、その上にさらなる機能(スライドデッキ、画像、動画)を重ねます。正直に言えば、これはどれか一つのツールの単なる外観の張り替えではなく、それ自体がオープンでローカル、エージェントネイティブなワークスペースです。
始める前に
Open Design のインストール方法は 3 通りあります。自分に合うものを選んでください:
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人——設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで暮らす人 | 既存のコーディングエージェント CLI |
Chase は動画でターミナル経由の方法を示していますが、今日ではデスクトップアプリが推奨される方法です——Node も pnpm もクローンも不要で、エージェントを自動検出してくれます。
ステップ 1——Open Design をインストールする
選択肢 A——デスクトップアプリ(推奨、設定不要)
open-design.ai/download にアクセスして、自分の OS 向けのビルドを入手します。インストール後、アプリはあなたの PATH 上にすでにあるすべてのコーディングエージェント CLI を自動検出し、組み込みのスキルとデザインシステムを読み込んでくれます。動くワークスペースに最も速くたどり着く方法です。
選択肢 B——ソースから実行する
Chase が動画でやっているように、リポジトリから実行したい場合に必要なコマンドはわずかです:
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 バージョンを選んでくれます。(開発サーバーが立ち上がらない場合は、エージェントに「Open Design の開発サーバーを立ち上げて」と伝えてコマンドを任せられます。)
選択肢 C——コーディングエージェントに組み込む
GUI を一切開かずに Open Design を使う——エージェント内のスキルとして呼び出す——には、次を実行します:
od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …そのあとエージェント内で、こう頼むだけです: Use open-design to generate a landing page with the Airbnb design system。
ステップ 2——初回起動: コーディングエージェントを接続する
Open Design を初めて起動すると、マシンをスキャンして見つかったすべてのローカル CLI を表示します。どのように AI を駆動したいかを尋ねるプロンプトが出ます。これが「自分のエージェントを持ち込む」ステップです。
- ローカル CLI を選ぶ。 Open Design を Claude Code、Codex、OpenCode に向ければ、生成は別の API 料金を請求される代わりに、すでに支払っているサブスクリプションから引き出されます。(別のハーネスがよければ、自分の API キーを組み込むこともできます。)
- 理由がなければモデルはデフォルトのままにしておきましょう——CLI 自体の設定に従います。
- メディアプロバイダーを追加(任意)。 画像、動画、音声を生成したいですか? OpenAI、MiniMax、ElevenLabs などのプロバイダー向けに自分の API キーを追加します。これがワークスペースの画像・動画側の機能を解放します——純粋な Claude Design のクローンには備わっていないものです。
- スキルとデザインシステムを切り替える。 目の前の作業に必要な機能だけを有効にします。
これらはどれも後から変更できるので、最初のうちはシンプルにしておきましょう。
ステップ 3——ワークスペースを探索する
上部には デザイン(Designs)、サンプル(Examples)、デザインシステム(Design systems)、そして画像と動画のテンプレートライブラリがあります。最初に見るとき最も重要なのは、デザインシステムとサンプルの 2 つです。
デザインシステムライブラリ: 各項目は実在のブランドを、再利用可能な出発点としてのパレット、タイポグラフィ、コンポーネント、視覚的な雰囲気へと分解しています。
デザインシステムライブラリは際立っています。各項目は実在のブランド——たとえば Airbnb——を取り上げ、パレット、タイポグラフィ、コンポーネント、全体的な視覚的雰囲気へと分解します。そのブランドらしさのあるページが欲しければ、そのシステムを当てはめるだけで、白紙のキャンバスではなくそれらのルールから生成が始まります。
Chase のウォークスルーからの率直な注記: サンプルは一行のプロンプトで生成されており、その正確なプロンプトがカード上にそのまま表示されています。見栄えは見事ですが、裏に秘伝のタレはありません——見えているものが、あなたが打ち込んだものそのものです。これらはワンクリックの魔法の約束ではなく、インスピレーションとして扱いましょう。画像・動画テンプレートのギャラリーも同様で、参考としては便利ですが、プロトタイプやスライドデッキのワークフローほど日々の価値は高くありません。実際に納品する成果物に注意を集中させてください。
テンプレートライブラリ: プロトタイプ、スライド、画像、動画の出発点を、種類で絞り込み、フォークして始められます。
何かをインストールする前に、ウェブ上の open-design.ai/plugins でプラグインライブラリ全体を閲覧できます。
ステップ 4——何かを作ってみる
本当のワークフロー——そして Open Design がその真価を発揮する場——は、プロトタイプとスライドデッキを作ることです。動作はおおむね期待どおりです:
- プロジェクトに名前を付け、組み込みリストから 1 つ以上のデザインシステムを選びます。
- 忠実度を選ぶ——構造を素早く区切るならワイヤーフレーム、フルスタイルの完成形なら高忠実度。
- 必要なら Claude Design の ZIP をインポート。 Claude Design で自分のデザインシステムを作りましたか? そこでプロジェクトを開き、Share → Download project as .zip を選び、その ZIP を Open Design にアップロードします。すべてのデザインファイルがワークスペースに現れ、再利用できる状態になります。(今のところ、この ZIP インポートが自分のブランドを持ち込む最もすっきりした方法です——まだ「デザインシステムをゼロから作る」ボタンはありません。)
- ブリーフを書いて作成を押す。 Open Design は Claude Design で見るのと同じ種類の確認用 Q&A を走らせます——誰のためか、スライドは何枚か、どの忠実度か、どんな視覚的トーンか——そのうえで ToDo リストを作り、それをこなしていきます。動画では、Chase が Lighthouse という架空の SaaS のランディングページを、3 つの比較可能な方向性(クラシックな縦積み、エディトリアル、派手)で依頼し、続いてブルータリストのスライドデッキを生成して PowerPoint にエクスポートします。
出力されるのは、あなたが選んだデザインシステムから作られた、本物でインタラクティブな成果物です。Chase の正直な見立て: 結果はおおむね「90% の解」にたどり着きます——ブランドに沿って使えるデッキで、間隔と書式の微調整がいくつかあなたに残されています。まだ初期段階のものとしては、これは強力な出発点です。
ヒント
- 呼び出しごとに課金されるのではなく、すでに持っているサブスクリプションから生成が引き出されるよう、API ではなくローカル CLI を使う。
- 白紙のキャンバスを飛ばすために組み込みのデザインシステムから始める; 自分のブランドが必要なときは Claude Design の ZIP をインポートする。
- 実際に使うメディアキーだけを追加する——始めるのにすべてのプロバイダーは要りません。
- 90% の下書きを想定し、そこから磨く。 引き渡し前に小さな書式のズレを捕まえられるよう、早めに(PowerPoint へも)エクスポートする。
- まずはプロトタイプとスライドデッキを頼りにする。 これらが最も完成度の高い面です; サンプルとテンプレートのギャラリーは、完成した成果物としてよりもインスピレーションとして優れています。
FAQ
Open Design は無料ですか? はい——Apache-2.0 ライセンスのオープンソースです。ローカルでの実行は無料で、料金がかかるのは接続したエージェントや API プロバイダーのモデル・メディア利用分だけです。ローカル CLI に向ければ、生成はすでに持っているサブスクリプションに乗ります。
どのコーディングエージェントに対応していますか? Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode を含む 21 以上のエージェントです。Open Design はマシンにすでにインストールされている CLI を自動検出するので、たいていは何も設定する必要がありません。
自分のデザインシステムは使えますか? はい。今日いちばんスムーズな方法は、Claude Design でシステムを作り、プロジェクトを ZIP としてダウンロードし、その ZIP を Open Design にインポートすることです——トークンとコンポーネントがそのまま引き継がれます。GUI にはまだ専用の「デザインシステムを作る」ボタンがないため、ZIP インポートが推奨される方法です。
Claude Design とどう違うのですか? 見慣れた感触は同じですが、オープンソースでローカルファースト、21 以上の CLI にわたってエージェントを差し替え可能です——加えて、単一プロバイダーのツールにはない、スライドデッキ、マガジンレイアウト、画像生成、動画といった追加機能があります。初期リリースなので粗い部分はいくつか見込んでおくべきですが、土台はしっかりしています。
この文章ガイドは Chase AI の実践ウォークスルーをもとにしています。上のフル動画をご覧いただき、より実用的な AI ツール解説については Chase AI をチャンネル登録してください。