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語に詰めている。

親オーガナイゼーションのnexuは、html-anythingやhtml-videoといったエージェント前提のHTML系OSSも公開しており、Open Designはそのラインの中核に位置する。

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

デモ動画で見るOpen Designの動き

動画の本文は、製品の主張をそのまま並べた構成だ。

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.

題材は「VANGUARD」という架空のブランドスタジオのヒーローLPだ。 チャットで色変更を頼むと、エンジンとして選んだClaudeが考え、プレビューが書き換わる。 特徴が出るのは次の操作だ。

「Comment. Mark. Edit. Capture. Remix. Directly on the canvas.」は、この機能を指す。 プレビューは眺める対象ではなく、要素を選び、実値を見ながらコメントで修正を指示できる作業面になっている。

「Capture」は、アプリ内ブラウザで外部サイトを開いて参照素材に取り込む動きだ。 生成1ターンの所要時間・出力トークン・実コストがその場で表示される。BYOKで自分のキーを使う前提だから、コストの可視化が画面に組み込まれている。 設定画面にはExternal MCP（設定は .od/mcp-config.json に保存）、Skills、Connectors、Design Juryなどが並ぶ。 動画はベンダー自身が用意したデモであり、第三者による独立検証ではない。

何を解決するのか：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点だ。

利用者がすでに契約・インストール済みのコーディングエージェントを再利用するので、モデルの選択権とコストの管理権が利用者側に残る。

アーキテクチャ全体像

ブラウザ（Next.js 16）またはElectronシェルがUIを描き、ローカルのデーモン（Express＋SQLite）がAPIとファイルとストリーミングを担い、そのデーモンが手元のCLIエージェントを起動する。 LLMを呼ぶ経路は2つある。PATH上のCLIをspawnする経路と、CLIを持たない人向けのBYOKプロキシ（/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）だ。 プロキシ側ではSSRF対策が効き、内部IPやリンクローカル、CGNATへの到達がブロックされる。

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

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

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

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

スキルは、エージェントのデザインの作法を担う。 100以上が同梱され、Claude CodeのSKILL.md規約にod:フロントマターを足した形で書かれている。 prototype（単一ページ成果物）とdeck（横スワイプのプレゼン）が2大モードで、ほかにimage・video・audioなどがある。

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

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

動画機能のHyperFramesは、HeyGenがOSS化した動画フレームワークを取り込んだものだ。 エージェントがHTML・CSS・GSAPを書き、ヘッドレスChromeとFFmpegでMP4にレンダリングする。

既存ツールとの対比：Figma・Penpot・Excalidraw・Claude 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を自動検出し、スキルとデザインシステムを読み込む。

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

# 使っているエージェントへ一行で導入
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

エージェントがSKILL.mdを選び、指定したDESIGN.mdを束ね、http://localhost:7456でプレビューできるartifactを出す。 チームで共有するならDockerも使える。ソースから動かす場合はNode 24系とpnpm 10.33系が前提で、corepack enable && pnpm install のあと pnpm tools-dev run web で起動する。

AI・Claude・MCP連携（MCPサーバーとして動く）

Open DesignはCLIをspawnする経路に加え、自身がMCPサーバーとして振る舞う。 od mcp install <agent> を一度実行すると、別リポのエージェントからもローカルのOpen Designプロジェクトのファイルを直接読める。 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>                # 最新のレンダリング済み成果物

ZIPを毎回書き出す代わりに、MCPがライブのファイルを見せるので、エージェントが参照するのは常に最新の状態だ。

READMEのプラットフォーム表では、Claude Code・Codex CLI・Cursor・VS Code＋GitHub Copilot・Gemini CLI・OpenCode・Cline・Kimi CLI・Hermes Agentなどが「Supported」として挙げられている。 品質面では、動画の設定画面にあったDesign Juryや、スキルのcritiqueによる5次元の自己批評がある。生成物を出す前に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ライセンスを保持している。

AMRは任意だ。BYOKでローカルLLM（Ollama・LM Studio・vLLM）を指定すれば、生成までを手元で完結させることもできる。

まとめ

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

一方で、バージョンは0.x、移行プラグインはalpha、コメントモードの局所編集は部分的だ。 出力はプロトタイプ前提で、本番品質はコードへの書き直しを前提に見るのが妥当だ。 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 リリースノート — 最新リリースの変更点・安定性改善・コントリビュータ数
・Claude Designとは｜料金・始め方・使い方とFigma/v0比較をまとめて解説 — 代替元のClaude Designの全体像