さらばClaude Design！これが最高のオープンソースAI UIジェネレーター
Windows 11でOpen Designをインストールして実行する——シンプルなネイティブのデスクトップ版に加え、Node 24とpnpmを使いWSL経由でソースからビルドする方法も解説します。オープンソースのAI UIジェネレーターをクラウドのサブスクリプションなしでローカルに動かしましょう。AI Automationのチュートリアルを基にしています。
このガイドは、自分のマシンでOpen Designを動かしたいWindowsユーザーのためのものです——クラウドアカウントも、使い切るための月額クレジットも不要です。AI AutomationがWindowsインストールのチュートリアルで示している手順を踏襲しつつ、コマンドを1つずつ追えるよう最新リリースに合わせて書き直しました。実際の操作は上の動画で確認するか、このままテキスト版を読み進めてください。
WindowsでローカルにOpen Designを実行：完全に自分で管理できる、オープンソースかつエージェントネイティブなデザインワークスペース。
Open Designとは？
Open Designは、オープンソースでローカルファーストのデザインプラットフォームです——Claude DesignやFigmaに代わるエージェントネイティブな選択肢です。1つのモデルプロバイダーに縛られるのではなく、すでに使っているコーディングエージェントの上で動作します：Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そのほか多数。単に鍵を持ち込むだけでなく、“bring your own agent”という発想です。
注目に値する点をいくつか挙げます：
- オープンソース、Apache-2.0 — クローンして、セルフホストし、すべての行を読めます。
- ローカルで動作 — プロジェクトは他人のクラウドではなく、自分のマシンの自分のフォルダーに保存されます。
- エージェントを差し替え可能 — 21以上のコーディングエージェントに対応。どのCLIで生成を駆動するかを選べ、出力の品質は選んだモデルに連動します。
- プロトタイプにとどまらない — プロトタイプ、ライブアーティファクト、スライドデッキ、マガジンレイアウト、画像生成、さらには動画まで、すべて1つのワークスペースから。
- デザインシステムとテンプレートの組み込みライブラリがあるので、真っ白なキャンバスから始める必要はありません。
Claude Designを使ったことがあれば、すぐに馴染めるはずです——Open Designは同じ落ち着いた美しさをそのままに、その上に機能（とモデルの選択肢）を加えています。
始める前に
WindowsにOpen Designをインストールする方法は3つあります。自分に合うものを選んでください：
| 経路 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ（Windows x64） | ほとんどのWindowsユーザー — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行（WSL） | コードを読んだり変更したい開発者 | WSL2 + Ubuntu、Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで作業する人 | 既存のコーディングエージェントのCLI |
動画ではWSLでソースから実行する経路を使っています。リポジトリの中で作業したいなら最適です。ただしほとんどの人にはネイティブのWindowsデスクトップ版が推奨ルートです——WSLもNodeもクローンも不要なWindows（x64）インストーラーがあります。本ガイドは両方を扱いますが、以下のWSLチュートリアルは、あえてソース経路を選びたい場合向けです。
ステップ1 — WSLをセットアップする
デスクトップアプリだけが目的なら、ステップ2のオプションAまで読み飛ばしてください。ソースから実行したい場合は、まずWindows内にLinux環境が必要です。それを提供してくれるのがWSL（Windows Subsystem for Linux）です——デュアルブートも、世話の焼ける仮想マシンもなく、Windowsと並んで動く本物のUbuntuシェルが手に入ります。
1. WSLとUbuntuをインストールする。 PowerShellを開いてwsl --installを実行します——これでWSL2が有効になり、既定でUbuntuがインストールされます。Windowsが求めたら再起動し、スタートメニューからUbuntuを起動して、初回起動時にLinuxのユーザー名とパスワードを設定します。（別のツールで導入したUbuntuがすでにありますか？それを再利用すればよく、これを繰り返す必要はありません。）
2. ベースパッケージを更新する。 Ubuntuシェル内で、パッケージインデックスを更新し、必須ツールをインストールします：
sudo apt update && sudo apt install -y curl git動画からのトラブルシューティングのヒント： 後の手順で不可解なエラーが出たら、Linuxインスタンスをきれいに再起動してください——PowerShellから
wsl --shutdownを実行し、Ubuntuを開き直します。新しく起動し直すことで、初回特有のトラブルのほとんどが解消します。
3. Node 24をインストールする。 ソースからのビルドはNode ~24を対象としています。まっさらなUbuntuにはまだnvmがないので、先にそれをインストールし、それを使ってNode 24を入れます：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc # load nvm into the current shell
nvm install 24
nvm use 24
node --version # should print v24.xUbuntuのセットアップとNode 24の有効化が済んだら、Open Designをインストールする準備は完了です。
ステップ2 — Open Designをインストールする
オプションA — Windowsデスクトップアプリ（推奨、設定不要）
open-design.ai にアクセスしてDownload desktopをクリックします。macOSやLinux版と並んでネイティブのWindows (x64)ビルドがあります。インストーラーを実行してアプリを開くと、PATH上にあるすべてのコーディングエージェントのCLIを自動検出し、組み込みのスキルとデザインシステムを読み込んでくれます。WSLもターミナルも不要——これがWindowsで最もシンプルな経路です。
オプションB — ソースから実行する（WSL内）
これはAI Automationが実演している経路です。Node 24を有効にしたUbuntuシェル内で、リポジトリをクローンし、Webランタイムを起動します：
git clone https://github.com/nexu-io/open-design.git ~/open-design
cd ~/open-design
corepack enable && pnpm install
pnpm tools-dev run webcorepack enableを実行すると、Corepackがリポジトリで固定されたpnpmのバージョン（10.33.x）を選ぶので、自分でpnpmをインストールする必要はありません。pnpm installは依存関係を取得し、ネイティブな部分をコンパイルします——初回は数分かかることがありますが、これは想定どおりで失敗ではありません。続いてpnpm tools-dev run webがローカルのデーモンとWebサーバーを起動します。
完了すると、コマンドがローカルのURLを表示します——それをコピーしてWindowsのブラウザーに貼り付けてください。WSLがポートを自動的にWindowsへ転送するので、アプリはそのまま開きます。
重要： ポートは起動時に動的に割り当てられます——コマンドが実際に表示するアドレスを読み取ってください。固定ポートだと思い込まないこと。アドレスはマシンごとに、また実行のたびに異なる場合があります。
オプションC — コーディングエージェントに組み込む（WSL）
GUIを使わず、Open Designをエージェント内のMCPサーバーとして呼び出したいですか？WSLでは最初に1つ余分な手順があります。Linuxにはもともと/usr/bin/od（8進ダンプツール）が同梱されており、これがOpen Design自身のodを覆い隠してしまいます——そのためod mcp install …はそのままだとmcp／installが“file not found”になって失敗します。odをクローン先に向ける小さなラッパーを追加し、PATHの先頭に置きましょう：
mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design" # the ~/open-design clone from Option B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od # Open Design's od should now win次に、これをエージェントに接続します：
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …あとはエージェント内でこう頼むだけです：Use open-design to generate a landing page with the Airbnb design system.
初回起動：コーディングエージェントを接続する
ワークスペースが初めて読み込まれると、Open Designは環境をスキャンし、見つかったすべてのCLIを表示します。WSLは本物のLinux環境なので、Ubuntu内にインストールされたエージェントも拾います——つまりWSL内にあるGemini CLIなどのエージェントもそこで検出されます。まだ表示されないものがあれば、rescan（再スキャン）をクリックしてください。
- 既定のエージェントとモデルを選ぶ。 インストール済みのCLIに生成を任せるか、特定のプロバイダーとモデルを指定します。動画でも強調されているとおり、強力なモデルほど出力が目に見えて良くなるので、結果が重要なときは性能の高いものを選びましょう。
- メディアプロバイダーを追加する（任意）。 画像・動画・音声を生成するには、自分のAPIキーを貼り付けます——bring-your-own-keyで、実際に使うプロバイダーの分だけ。
- MCPサービスを接続する（任意）。 エージェントに他のソースから取得させたい場合は、コネクターを接続します。
- 設定を整える。 言語、外観、通知——デスクトップペットまで。これらは後からいつでも変更できるので、最初はシンプルに済ませましょう。
ワークスペースを見て回る
Open Designは作業をプロジェクト単位で管理します：あるフォルダーに対して実行すると、作成したデザインはそのプロジェクトのディレクトリ内に保存されます。最初のプロジェクト一覧は空ですが、それで正常です。
プロジェクト内では、プロトタイプ、スライドデッキ、画像、動画などを作れます。真っ白なキャンバスを解消する出発点が2つあります：
デザインシステムライブラリ：Airbnb、Airtableをはじめ多数の中から実在するブランドのルックを選べば、Open Designがそのトークン、カラー、タイポグラフィをあなたのデザインに取り込みます。
- デザインシステムは、ブランドのルックをトークンの
DESIGN.mdとして捉えます——プライマリ／セカンダリカラー、タイポグラフィ、スペーシングなど。プレビューすれば、パレットを一から定義する代わりに、その上に直接構築できます。 - テンプレートは、プロトタイプ、スライド、そして画像・動画の生成をカバーします。種類で絞り込み、どれでもフォークして手早く始められます。
テンプレート：プロトタイプ、スライド、画像、動画の出発点——種類で絞り込み、フォークして始めましょう。
何かをインストールする前に、open-design.ai/plugins でライブラリ全体をWeb上で閲覧できます。
何かを作ってみる
AI Automationが実演している流れを、最新リリースに合わせて書き直したものです：
- デザインシステムを選ぶ。 気に入ったものを——たとえばAirbnbを——選び、開いてその
DESIGN.mdとトークンを確認します。 - 出発点として読み込む。 Share → Download as ZIPを使い、続いてプロジェクトでImport flat design ZIPを選びます。デザインがワークスペースに現れ、その上に構築する準備が整います。
- 欲しい変更をプロンプトで伝える。 平易な言葉で指示を入力します——“背景を暗くできますか？”——そして送信します。エージェントはデザインシステムを読み取り、作業を計画し、アーティファクトの新しいバージョンを生成します。
- 自由に反復する。 フォントを変えたり、ロゴを追加・削除したり、自分のアセットをアップロードして適切な場所に配置させたりできます。各プロンプトが新しい案を生み出すので、採用するか破棄するか選べます。
- 満足したらエクスポートする。 Shareを押して、結果をZIPとしてダウンロードします。
出力は、接続したモデルによって駆動される、本物の編集可能なデザインです——だからこそ高性能なエージェントは、得られる結果に直接報いてくれます。
もっと活用するためのヒント
- 強力なモデルを選ぶ。 出力の品質は接続したエージェントに連動します——流れを学ぶには無料モデルでも十分ですが、本番の仕事には高性能なものを選ぶ価値があります。
- 毎回、表示されたURLを読む。 ローカルのアドレスは動的です。古いリンクを使い回すのではなく、
tools-devが表示するものをコピーしてください。 - Open Designが探す場所にエージェントを入れる。 WSLでソースから実行していますか？ワークスペースが検出できるよう、CLIはUbuntu内にインストールしましょう。デスクトップアプリはWindowsの
PATHを読み取ります。 - 始めるのにデザインシステムは不要。 組み込みのものから始めても、ZIPを読み込んでも、Open Designに既定値を推測させてもかまいません。デザインはプロジェクトフォルダーとともに残るので、適切なディレクトリに対して実行することで作業を整理しましょう。
FAQ
Open Designは無料ですか？ はい——Apache-2.0ライセンスのオープンソースです。ローカルでは無料で実行でき、料金が発生するのは、接続したエージェントとメディアプロバイダーのモデル／API利用分だけです。
WSLとWindowsデスクトップアプリのどちらを使うべき？ ほとんどの人にはネイティブのWindows (x64) デスクトップ版の方がシンプルです——WSLもNodeもクローンも不要。コードを読んだり変更したい場合に限ってWSLのソース経路を使ってください。なお、WSL2は主にサポートされる経路で、Windowsネイティブはベストエフォートです。片方でつまずいたら、もう片方を試してみてください。
どのコーディングエージェントに対応していますか？
Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCodeを含む21以上のエージェントです。Open Designは、マシンにすでにインストールされているCLIを検出します——ソース経路ならWSL内、デスクトップアプリならWindowsのPATH上です。
Claude Designとどう違うのですか？ 馴染みのある感覚は同じですが、オープンソースでローカルファースト、そしてエージェントを差し替え可能です——だから1つのモデルに縛られたり、決まったクレジット枠を使い切ったりすることはありません。さらにスライドデッキ、マガジンレイアウト、画像生成、動画など、プロトタイプの先まで広がります。
この記事のガイドは、AI AutomationのWindowsインストールのチュートリアルを基にしています。上のフル動画をご覧いただき、AI Automationを購読してください——実践的なAIツールの動画をもっと見られます。