20分でわかるOpen Design — セットアップからデモまで完全ガイド
Open Designのインストールからコーディングエージェントの接続、ワークスペースの概要、そして最初の高精細プロトタイプ作成までを一気通貫で解説する入門ガイド。CodingMenaceによる実機ファーストインプレッション動画をベースにしています。
このガイドでは、Open Designに触れる最初の20分間を、クリーンインストールから最初のプロトタイプ生成までたどっていきます。CodingMenace（Dennis）が実機ファーストインプレッション動画でたどった流れを下敷きに、現行リリースに合わせて書き直し・更新しているので、ステップごとに沿って進められます。実際の操作は上の動画をご覧いただくか、テキスト版で読み進めてください。
Open Designは、オープンソースのClaude Design代替として位置づけられています — デスクトップファースト、エージェントネイティブ、Apache-2.0。
Open Designとは？
Open Designは、オープンソースでローカルファーストなデザインプラットフォームであり、Claude DesignやFigmaに代わるエージェントネイティブな選択肢です。特定のモデルプロバイダーに縛り付けるのではなく、あなたがすでに使っているコーディングエージェントの上で動作します：Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そしてその他十数種類。単なる「bring your own key」ではなく「bring your own agent」です。
一見の価値がある理由をいくつか挙げます：
- オープンソース、Apache-2.0 — クローンして、セルフホストして、全行を読めます。
- ローカルで動作 — プロジェクトは他人のクラウドではなく、自分のマシンの自分のフォルダに置かれます。
- エージェントを差し替え可能 — 21以上のコーディングエージェントに対応。生成を駆動するCLIは自分で選べます。
- プロトタイプにとどまらない — プロトタイプ、ライブアーティファクト、スライドデッキ、マガジンレイアウト、画像生成、さらには動画まで、すべてを一つのワークスペースから。
- 豊富なデザインシステムとスキルを内蔵しているので、白紙のキャンバスから始める必要はありません。
Claude Designを使ったことがあれば、見た目も使い心地もすぐに馴染むはずです — Open Designは意図的に同じ落ち着いた美学を保ちつつ、その上に機能を追加しています。
始める前に
Open Designのインストール方法は3通りあります。自分に合ったものを選んでください：
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読みたい・改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで暮らしている人 | 既存のコーディングエージェントCLI |
動画ではソースから実行する方法を使っていますが、現在おすすめなのはデスクトップアプリです — Nodeもpnpmもクローンも不要です。
ステップ1 — Open Designをインストールする
方法A — デスクトップアプリ（おすすめ、設定不要）
open-design.aiにアクセスし、Download desktopをクリックします。macOS（Apple SiliconおよびIntel）、Windows（x64）、Linux（AppImage）向けのビルドが用意されています。インストール後、アプリはPATH上にあるコーディングエージェントCLIをすべて自動検出し、内蔵スキルとデザインシステムを読み込みます。
方法B — ソースから実行
動画のDennisのようにリポジトリから実行したい場合は、3つのコマンドだけで済みます：
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をまったく開かずに、エージェント内のスキルやMCPサーバーとしてOpen Designを呼び出したい場合は、次を実行します：
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …あとはエージェント内でこう頼むだけです：Use open-design to generate a landing page with the Linear design system。
ステップ2 — 初回起動：コーディングエージェントを接続する
Open Designを初めて起動すると、マシンをスキャンして見つかったローカルCLIをすべて表示します — Claude Code、OpenCode、Copilot CLIなど。これが「bring your own agent」のステップです。
- デフォルトのエージェントとモデルを選ぶ。 インストール済みのCLIに生成を任せるか、このプロジェクト用に特定のモデル（たとえばClaude Opus）を指定します。
- メディアプロバイダーを追加する（任意）。 画像、動画、音声を生成したいですか？OpenAI（gpt-image）、MiniMax、ElevenLabs、fal、Sunoなどのプロバイダー向けに自分のAPIキーを追加します。ここで「bring your own key」が活きてきます。
- MCPサービスを接続する（任意）。 エージェントに他のソースからデータを取得させたい場合は、Composioのようなコネクターを組み込みます。
- スキルとデザインシステムを切り替える。 取り組む作業の種類に必要な機能だけを有効にします — プロトタイプ、スライドデッキ、モバイルアプリ、議事録など。
これらはあとからいつでも変更できるので、初回はシンプルにしておきましょう。
ステップ3 — ワークスペースを探索する
Open Designは作業をプロジェクト単位で管理します：あるフォルダに対して実行すると、作成したデザインはそのプロジェクトディレクトリ内に保存されます。フォルダを切り替えれば、プロジェクトも切り替わります。
プロジェクト内では、プロトタイプ、ライブアーティファクト、スライドデッキ、アニメーションを作成できます。プロトタイプでは2つの精細度から選べます：
- ワイヤーフレーム — 骨組みだけ：ボックスや図形でレイアウトを素早く区切ります。
- 高精細 — 構築中のページを完全にスタイリングしたプロトタイプ。
Claude Designとの大きな違いの一つ：最初にデザインシステムを定義する必要がありません。Open Designは妥当なデフォルトと出発点のギャラリーを備えているので、既存のデザインシステムから始めることも、まったく使わずに始めることもできます。
デザインシステムライブラリ：実在ブランドの出発点（Agentic、Airbnb、Airtableなど）を、どのプロジェクトにもそのまま取り込めます。
マーケットプレイスはブランドシステムにとどまりません。テンプレートライブラリは、プロトタイプ、スライド、そして画像と動画の生成までカバーしています — タイプで絞り込んで、好きなものをフォークして出発点にできます。
テンプレート：プロトタイプ、スライド、画像、動画の出発点 — タイプで絞り込んでフォークすれば始められます。
何かをインストールする前に、Web上のopen-design.ai/pluginsでプラグインライブラリ全体を閲覧できます。
ステップ4 — 最初のプロトタイプを作る
さあ、お楽しみの部分です。動画では、Dennisが既存のClaude Designプロジェクトをインポートし、Open Designに新しいページを作らせています。ここでも同じ流れをたどります：
- 新しいプロトタイプを作成する。 名前を付けて（Dennisは「Expensely」と名付けています）、高精細を選びます。
- デザインシステムをインポートする。 Open Designは既存のClaude DesignのZIPをインポートできるので、トークンやコンポーネントがそのまま引き継がれます。インポートされたデザインファイルは、ライブプレビューと並んでワークスペースに表示されます。
- ブリーフを書く。 Dennisは「直近3か月のデータを使って12か月分の経費を予測する新しいページを作って」とプロンプトを与えます。おなじみの分割レイアウトが表示されます：左に会話、右にプレビューとデザインファイル。
- 確認の質問に答える。 エージェントが気の利いた追加質問をいくつか投げかけます — 同じ色でいいか？どの精細度か？シンプルな3か月平均でよいか？ — そのうえでToDoリストを立て、デザインシステムを読み込み、アーティファクト（
projections-v2.html）を構築します。 - デザインを反復改善する。 最初の出来に満足できませんか？別の方向性をリクエストしましょう。Dennisは「別の見た目と雰囲気にして」と頼み、エディトリアルな方向性を選んで、新たな
projections-v3を得ます — 同じデータとデザインシステムから作られた、まったく別物のデザインです。
出来上がるのは本物のインタラクティブなプロトタイプです：チャートやページをクリックして操作し、エクスポートしたり引き継いだりできます — すべてインポートしたデザインシステムから構築されています。
もっと使いこなすためのヒント
- 本物の見た目を確かめたいときは高精細から始め、構造を素早く区切りたいときはワイヤーフレームを使いましょう。
- デザインはプロジェクトフォルダと一緒に残ります — 適切なディレクトリに対してOpen Designを実行することで作業を整理できます。
- メディアキーは自前で用意し、実際に使うプロバイダーの分だけにしましょう。すべて揃える必要はありません。
- 始めるのにデザインシステムは不要です。 内蔵のものから始めても、Claude DesignのZIPをインポートしても、Open Designにデフォルトを推測させてもかまいません。
FAQ
Open Designは無料ですか？
はい — Apache-2.0ライセンスのオープンソースです。ローカルで無料で実行でき、課金が発生するのは接続したエージェントやメディアプロバイダーのモデル/API利用分だけです。
どのコーディングエージェントに対応していますか？
Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCodeを含む21以上のエージェントです。Open DesignはマシンにすでにインストールされているCLIを検出します。
デザインする前にデザインシステムを作る必要がありますか？
いいえ。Claude Designと違い、Open Designは使えるデフォルトと出発点のギャラリーを提供します。必要になったら自前のデザインシステムを持ち込めます。
Claude Designとはどう違いますか？
おなじみの使い心地はそのままに、オープンソースでローカルファースト、エージェントを差し替え可能です — さらにスライドデッキ、マガジンレイアウト、画像生成、動画といった追加機能も備えています。
この記事はCodingMenaceのファーストインプレッション解説をもとにしています。上の動画全編をご覧いただき、より多くのAIツール実機動画を見るにはCodingMenaceをチャンネル登録してください。