Open Design（nexu-io）とは｜手元のコーディングエージェントが回すOSSデザイン工房【動画解説】

AIに画面を作らせる道具は、もう珍しくない。 Figmaにも生成機能が付き、v0やLovableはクラウドでUIを吐き出す。 そこへ「AnthropicのClaude DesignをまるごとOSSで置き換える」と掲げるOpen Designが、自分たちの画面を動画で公開した。

2026年6月18日、公式アカウント@OpenDesignHQが約54秒のデモ動画を投稿した。 本文の出だしは挑発的だ。 「Claude Design is moving too slowly. So we open-sourced a better alternative.（Claude Designは動きが遅い。だから我々はより良い代替をオープンソース化した）」。 この記事では、その動画と公式リポジトリ、公式サイトという一次ソースから、Open Designが何を作ろうとしているのかを読み解く。

デザインシステムという土台の話を先に押さえておくと、Open Designがどの位置の道具なのか掴みやすい。 デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 を併読しておくと、本記事の前提が整う。

Open Designとは：Claude DesignのローカルなOSS代替

Open Design（リポジトリ名 nexu-io/open-design）は、AnthropicのクローズドサービスClaude Designの代替を狙うオープンソースのデザインツールだ。 公式の一行説明は「The local-first, open-source Claude Design alternative」。 ローカルで動き、ソースが公開され、Anthropicのモデルにもサービスにも縛られない、という主張を3語に詰めている。

リポジトリの実体は次のとおりだ。

公開からおよそ2か月で6.7万スターという数字は、Claude Designに対する代替需要の大きさを映している。 親オーガナイゼーションのnexuは、html-anythingやhtml-videoといったエージェント前提のHTML系OSSも公開しており、Open Designはそのラインの中核に位置する。

注意したいのは、当サイトでも2026年5月1日にv0.5時点のOpen Design解説を公開している点だ。 当時はスキル31種・デザインシステム72種・対応エージェント10種だった。 本記事は0.11時点の現在地と、公式が新たに公開したデモ動画を軸に読み直すものになる。

デモ動画で見るOpen Designの動き（@OpenDesignHQ 公開映像）

公開された動画の本文は、製品の主張をそのまま並べた構成だ。 逐語で引くと次のようになる。

Claude Design is moving too slowly. So we open-sourced a better alternative. Comment. Mark. Edit. Capture. Remix. Directly on the canvas. Plugins keep it on brand across projects. 22+ agents. Claude Code included. Sync projects. Connect tools. Open Design is already here👉

動画の中身を、抽出したフレームで順に確認する。 題材は「VANGUARD」という架空のブランドスタジオのヒーローLPだ。

チャットで色変更を頼むと、エンジンとして選んだClaudeが考え、プレビューが書き換わる。 ここまでは、よくある生成型ツールと変わらない。 Open Designの特徴が出るのは、その次の操作だ。

ツイートの「Comment. Mark. Edit. Capture. Remix. Directly on the canvas.（キャンバス上で直接コメント・マーク・編集・取り込み・リミックス）」は、この機能を指している。 プレビューはただ眺める対象ではなく、要素を選び、実値を見ながらコメントで修正を指示できる作業面になっている。

「Capture」は、このアプリ内ブラウザで外部サイトを開いて参照素材として取り込む動きだ。 注目したいのは、生成1ターンの所要時間・出力トークン・実コストがその場で表示される点だ。 BYOKで自分のキーを使う前提だからこそ、コストの可視化が画面に組み込まれている。

設定画面の左メニューには、Memory（記憶）、Skills（スキル）、External MCP、Connectors、Design Jury（後述する品質審査）、Pets（作業画面に出るマスコット）といった項目が並ぶ。 ツイートの「Sync projects. Connect tools.（プロジェクトを同期し、ツールを繋ぐ）」は、このコネクタやMCPの設定面に対応する。 動画はベンダー自身が用意したデモであり、第三者による独立検証ではない点は前提として押さえておきたい。

何を解決するのか：Claude Designのロックインを外す

Open Designの出発点は、Claude Designへの不満だ。 公式の説明をそのまま引くと、こうなる。

In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic’s model, Anthropic’s skills, Anthropic’s surface.

つまり、Claude Designは「LLMが文章ではなくデザイン成果物を直接出す」体験を初めて広めたが、クローズドで、有料のみで、クラウド限定で、Anthropicのモデルとスキルと画面に縛られている、という整理だ。 Open Designは、その制作ループの考え方だけを受け継ぎ、ロックインを外そうとする。

差別化の軸は、公式が挙げる以下の4点に集約される。

ここで効いてくるのが「自前のエージェントを持たない」という設計判断だ。 多くの生成型ツールは独自のクラウドエージェントに閉じている。 Open Designは逆に、利用者がすでに契約・インストール済みのコーディングエージェントを再利用する。 結果として、モデルの選択権とコストの管理権が利用者側に残る。

アーキテクチャ全体像

Open Designは大きく3層で動く。 ブラウザ（Next.js 16）またはElectronシェルがUIを描き、ローカルのデーモンがAPIとファイルとストリーミングを担い、そのデーモンが手元のCLIエージェントを起動する。

デーモンはExpressとbetter-sqlite3で組まれ、プロジェクト・会話・メッセージ・タブをSQLiteに保存する。 LLMを呼ぶ経路は2つある。 ひとつはPATH上のCLIをspawnする経路、もうひとつはCLIを持たない人向けのBYOKプロキシだ。 プロキシは/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/streamという形で、OpenAI互換のエンドポイントを束ねる。 このプロキシの縁でSSRF対策が効き、内部IPやリンクローカル、CGNATへの到達がブロックされる。

セキュリティモデルは既定で読み取り専用、デーモンは127.0.0.1にバインドされる。 LAN公開にはOD_BIND_HOSTとOD_ALLOWED_ORIGINSの明示設定が要る。 プレビューはサンドボックス化したsrcdocのiframeで描かれ、生成中のartifactをストリーミングでパースして表示する。

制作の流れは、ブリーフから成果物、そしてコードへの引き渡しまで一本道で繋がる。

公式の説明では、確定したスクリーンショットやフォント、パレットが次のセッションの既定値として溜まり、手戻りとブレが減るとされている。

主要機能：スキル・デザインシステム・プラグインの3面

Open Designの素材は、3種類のプレーンなファイルとして整理されている。

スキルは、エージェントのデザインの作法を担う。 100以上のスキルがリポジトリに同梱され、それぞれがClaude CodeのSKILL.md規約にod:フロントマターを足した形で書かれている。 prototype（Web/モバイル/デスクトップの単一ページ成果物）とdeck（横スワイプのプレゼン）が2大モードで、ほかにimage・video・audio・template・design-system・utilityがある。 web-prototype、saas-landing、dashboard、mobile-app、pm-spec、finance-reportなど、シナリオ別に並ぶ。

デザインシステムは、ブランドの約束事を担う。 150のブランド仕様が9セクションのDESIGN.mdとして同梱され、Linear・Stripe・Vercel・Apple・Notion・Figma・Tesla・Spotifyといった名前が並ぶ。 切り替えれば次の生成から新しいトークンが使われ、テーマJSONの設定は要らない。

プラグインは、実行可能なワークフローを担う。 261の公式プラグインがplugins/_official/に置かれ、各プラグインはSKILL.mdとopen-design.jsonマニフェストを持つ移植可能なフォルダだ。 od-figma-migration（FigmaワークフローをReact/Next/Vueへ移行）、od-code-migration（既存リポをブランド仕様にリフレッシュしてPRを出す）、od-react-export などのシナリオが含まれる。 od plugin searchやod plugin applyといったCLIから、UIを開かずに同じ操作ができる。

成果物の幅も広い。 プロトタイプ、ライブダッシュボード、デッキに加え、画像と動画まで1つのプロジェクトから出る。

動画機能のHyperFramesは、HeyGenがオープンソース化したエージェント前提の動画フレームワークを取り込んだものだ。 エージェントがHTML・CSS・GSAPを書き、ヘッドレスChromeとFFmpegで決定論的なMP4にレンダリングする。 公式によれば、HyperFramesのテンプレート11種とSeedanceのプロンプト39種がリポジトリに同梱される。

既存ツールとの対比：Figma・Penpot・Excalidraw・Claude Design

Open Designは、従来のキャンバス型エディタとは生成の出発点が違う。 人が線を引くのではなく、エージェントがブランド仕様を読んで実コードの成果物を出す。 そのうえで、オープン性・自己ホスト・成果物の性質を軸に並べると、立ち位置が見える。

操作モデルとオープン性の2軸で並べると、Open Designの居場所が見える。

この表とマップで読み取りたいのは、Open Designが「Figmaの置き換え」というより「Claude Designの置き換え」を主戦場にしている点だ。 公式の比較表でも、対面に置かれているのはClaude DesignとLovable/v0/Boltであって、Figmaは「エージェント時代のFigma代替」という文脈で言及されるにとどまる。 手作業のキャンバス編集が中心ならPenpotやFigma、ホワイトボード的な発散ならExcalidraw、という従来の住み分けは残る。

導入手順（最小例）

最短は、デスクトップアプリのダウンロードだ。 公式サイトのopen-design.aiまたはGitHub Releasesから、macOS（Apple Silicon / Intel）かWindows（x64）の本体を入れる。 インストール後、アプリがPATH上のコーディングエージェントCLIを自動検出し、100以上のスキルと150のデザインシステムを読み込む。

UIを開かずにエージェントへ組み込む場合は、ワンライナーのインストールスクリプトを使う。

# 使っているエージェントへ一行で導入（16以上のCLIに対応）
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

導入後は、エージェントの中から自然文で呼び出せる。

> Use open-design to generate a landing page with the Linear design system

エージェントがskills/を読み、適切なSKILL.mdを選び、指定したDESIGN.mdを束ね、http://localhost:7456でプレビューできるartifactを出す。 チームで共有するならDockerが使える。

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

ソースから動かす場合はNode 24系とpnpm 10.33系が前提になる。 corepack enable && pnpm install のあと pnpm tools-dev run web で起動する。

想定ユースケース

公式のワークフロー説明と同梱スキルから、現実的な使いどころを並べる。

注意点として、生成されるHTMLはサンドボックスのiframeで動くプロトタイプ前提だ。 アクセシビリティやパフォーマンス、レスポンシブの作り込みが万全とは限らない。 本番実装は、出力をReactやNext.jsのコードに書き直す前提で見るのが妥当だ。

AI・Claude・MCP連携

Open DesignはCLIをspawnする経路に加え、自身がMCPサーバーとして振る舞う経路を持つ。 od mcp install <agent> を一度実行すると、そのエージェントの設定にMCPサーバーが書き込まれ、別リポからでもローカルのOpen Designプロジェクトのファイルを直接読めるようになる。

ツイートの「22+ agents. Claude Code included.（22以上のエージェント、Claude Codeを含む）」は、この対応範囲を指す。 READMEのプラットフォーム表では、Claude Code・Codex CLI・Cursor・VS Code＋GitHub Copilot・Gemini CLI・OpenCode・OpenClaw・Antigravity・Cline・Trae・Kimi CLI・Pi Agent・Mistral Vibe CLI・Hermes Agentなどが「Supported」として挙げられている。

MCPでエージェントに渡せるのは、生のデザインソースだ。 od search-filesでプロジェクト横断のファイル検索、od get-fileでDESIGN.mdの取得、od get-artifactで最新の成果物を取り出せる。

od search-files "primary button"      # プロジェクト横断でファイルを検索
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # 最新のレンダリング済み成果物
od plugin run web-prototype --brief "..."

ZIPを毎回書き出して貼り直す代わりに、MCPがライブのファイルを直接見せる。 エージェントが参照するのは常に最新の状態で、古いエクスポートではない、という設計だ。

品質面では、5次元の自己批評がある。 動画の設定画面にあったDesign Juryや、スキルのcritiqueがこれにあたる。 生成物を出す前に5つの観点でスコアリングし、いわゆる「それっぽいが使えないUI」を抑える狙いのゲートだ。

制限事項・既知の課題

公式のロードマップとリリースノートから、現時点の限界を拾う。

最新の0.11.0「The Bazaar」は、安定性の改善に大きく振られている。 リリースノートによれば、レンダラがクラッシュしてもデスクトップウィンドウが自己修復し、質問待ちで処理が止まらなくなり、マークアップ中にプレビューが勝手にリロードされる問題が解消された、とされる。 裏を返せば、これらは0.10系まで実際に起きていた不具合であり、日常的に開いて使うにはまだ磨き込みの途中だったことを示す。

オープンソースとしての活発さは数字に出ている。 0.11.0は「137 PR・57コントリビュータ・4日」で出たと公式が記している。 更新の速さは魅力だが、同時にバージョン間の変化が速いことの裏返しでもある。

価格・ライセンス・利用条件

ソフトウェア本体のライセンスはApache-2.0で、商用利用も可能だ。 同梱のdesign-templates/guizang-ppt/とdesign-templates/html-ppt/は、それぞれ元のMITライセンス（@op7418、@lewislulu）を保持している。

費用の考え方は2通りある。

AMRは任意の選択肢であり、利用は必須ではない。 BYOKでローカルLLM（Ollama・LM Studio・vLLM）を指定すれば、生成までを手元で完結させることもできる。 ライセンス上のブランド仕様は、VoltAgent/awesome-design-mdやbergside/awesome-design-skillsといった外部OSSを出典として取り込んでいる。

まとめ

Open Designが公開したのは、約54秒の短いデモ動画だった。 だがその中身は、製品の主張を凝縮していた。

VANGUARDのヒーローLPは、チャットの一言で色を変え、キャンバス上の見出しをクリックして実値を確認し、コメントで直接修正を指示できた。 アプリ内ブラウザは外部サイトを開いて素材を取り込み、1ターンのコストはその場で円ではなくドルで表示された。 そのすべてが、ツールを行き来せず、手元のClaudeを呼び出して進んでいた。

この設計を支えるのが、スキル・デザインシステム・プラグインという3面のプレーンなファイルだ。 DESIGN.mdがブランドの約束事を1枚に収め、生成のたびにエージェントがそれを読む。 自前のエージェントを持たないという判断が、モデルとコストの主導権を利用者の側に残している。

一方で、わかっていないことや未完成の部分も残る。 バージョンは0.x、移行プラグインはalpha、コメントモードの局所編集は部分的だ。 動画はベンダーのデモで、出力はプロトタイプ前提。 本番品質はコードへの書き直しを前提に見るのが妥当だ。

それでも、「Claude Designの制作ループをOSSで開き直す」という賭けは、クラウドに閉じた生成型ツールとは明確に違う方向を向いている。 6.7万スターという数字は、ロックインを外したいという需要が確かに存在することを示している。 0.x時代のOpen Designがどこまで完成度を上げるかは、リリースの積み重ねを見て判断するのが正しい。 ただ、「手元のコーディングエージェントをデザインエンジンにする」という問いの立て方は、見ておく価値がある。

参照ソース

・nexu-io/open-design 公式リポジトリ — README・ライセンス・スター数・アーキテクチャ・スキル/デザインシステム/プラグインの全数値
・@OpenDesignHQ 公式投稿（デモ動画 / 2026-06-18） — 本記事冒頭の動画と引用本文の出典
・Open Design 公式サイト（open-design.ai） — ダウンロード・AMR・対応エージェント・提供状況
・Open Design 0.11.0 — The Bazaar リリースノート — 最新リリースの変更点・安定性改善・コントリビュータ数
・DESIGN.md入門：AIとデザインシステムを繋ぐMarkdownファイルの書き方 — DESIGN.md仕様の前提
・Claude Designとは｜料金・始め方・使い方とFigma/v0比較をまとめて解説 — 代替元のClaude Designの全体像 </content>