Open Design の仕組み — セルフホスト可能な、自前キー持ち込みアーキテクチャ
Open Design の内部を覗く — ローカルデーモン、あらゆる層での BYOK 設計、スキルとデザインシステムが単なるファイルである理由、そしてセルフホストとデプロイの方法。ボタンを押すだけでなく、自分が何を動かしているのかを理解したい人のために。AI Stack Engineer のフル解説に基づく。
このガイドは、自分が実際に何を動かしているのかを理解したい人のためのものです。Open Design が内部でどう動くのか、なぜあらゆる層でセルフホストと BYOK が可能なのか、そしてそのスキルとデザインシステムがなぜ fork できる単なるファイルなのか。これは AI Stack Engineer がフル動画で行ったアーキテクチャ優先の解説を踏襲し、最新リリースに合わせて書き直し・更新したものです。ライブ実行は上の動画を、文章版はこのまま読み進めてください。
プラグインハブ：レジストリを閲覧し、プラグインをインポートして、チーム向けに準備します。
Open Design とは？
Open Design は、クラウド型デザインツールの完全オープンソースな代替です。ローカルファースト、Web へデプロイ可能、そしてあらゆる層で BYOK。「BYOK」とは自前のキーを持ち込む（bring your own key）という意味です。Open Design は独自のモデルやエージェントを同梱する代わりに、あなたのマシンにすでにあるコーディング CLI — Claude Code、Codex、Cursor、Gemini、OpenCode など — をスキャンし、それをエンジンとして使います。パス上に一つも無ければ、Anthropic API のフォールバックがあります。ライセンスは Apache-2.0 なので、fork し、社内にデプロイし、自由に改変できます。
AI Stack Engineer が繰り返し立ち返るポイントはこうです。クラウド型デザインツールは、たった一社のモデルの上で、そのクラウドの中で、有料プランの裏側で動き、セルフホストの選択肢が一切ありません。Open Design はこの三つすべてを反転させます — あなたのマシン、あなたのエージェント、あなたのキー。
どう作られているか（理解する価値のある部分）
アーキテクチャはあえてシンプルです。
- フロントエンド — Vite + React + TypeScript のアプリ。
- バックエンド — Node + Express のデーモンで、プロジェクト、会話、メッセージ、タブを SQLite で管理。
- デーモンが唯一の特権プロセスです。あなたが選んだ CLI を起動し、その作業ディレクトリを隠し
.odディレクトリ配下のプロジェクトごとのフォルダに設定します。
この最後の点こそ、Open Design をチャットボックス以上のものにしています。エージェントは実際のファイルシステムに対する本物の読み取り / 書き込み / bash / Web 取得ツールを手にします。成果物を生成するとき、それはディスク上に実際のファイルを書き込んでいるのであり、あなたはそれを開き、編集し、バージョン管理し、エクスポートできます — チャットウィンドウに塊を返すのではありません。
スキルとデザインシステムは単なるファイル
仕事の大半をこなすのは二つの構成要素で、どちらもあなたが所有する普通のファイルです。
- スキルは実務的な面をカバーします — Web プロトタイプ、SaaS のランディング、ダッシュボード、料金ページ、ドキュメント、ブログ、モバイルアプリ、スライドデッキ（雑誌スタイルの PPT スキルを含む） — さらに、PM 仕様書、週次アップデート、議事録、ランブック、財務レポート、請求書、カンバンボード、OKR といった成果物テンプレートも。それぞれが、読み、編集し、追記できるファイルです。
- デザインシステムは、プレーンな markdown の
DESIGN.mdファイルとして保存されます。それぞれが、実在のブランドから引き出された色、タイポグラフィ、余白、レイアウト、コンポーネント、モーション、トーン、ブランドルール、アンチパターンを定義します。
Open Design のワークスペース：作りたいものを記述し、モードを選べば、あとはエージェントが仕上げます。
両方ともファイルであるため、あなたのデザインワークフロー全体がバージョン管理可能で fork 可能になります — チームは自分たちの内部スキルとブランド DESIGN.md を git に保ち、任意のエージェントにそれらを基に生成させられます。
インストールとセルフホスト
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install # 大量の依存を取得します — 少し待ってください
pnpm tools-dev run web表示されたローカル URL を開きます（ポートは動的です — 決め打ちしないでください）。設定ゼロが良いですか？ open-design.ai/download のデスクトップアプリなら Node と pnpm を省けます。初回起動時に PATH をスキャンし、見つかったエージェントを一覧表示します。一つ選ぶか（AI Stack Engineer は OpenCode で非 Claude の経路をテストしています）、Anthropic の BYOK オプションを使ってください。
プロンプトスタックには知っておく価値のある巧妙な工夫が二つあります。一つはディスカバリーフォーム（書き始める前に、対象面、想定読者、トーン、ブランド、規模を尋ねます — ラジオボタン 30 秒が、方向修正の 30 分を節約します）、もう一つは方向ピッカー（決定論的なパレットを備えた、厳選された五つのビジュアル方向。これによりモデルが雰囲気を即興で外すことがありません）です。
スライドデッキモード：デッキのカテゴリを選び、サンプルをフォークして出発点にします。
完成したら、HTML、PDF、ZIP にエクスポート — あるいはデプロイします。Web へデプロイ可能でローカルファーストなので、何一つ第三者のクラウドに触れる必要はありません。
率直な結論
AI Stack Engineer の評価は公平です。ある最上位モデルに合わせて磨き込まれた洗練されたクラウドツールは、すぐ使える完成度とエクスポートの幅では依然として勝ります。一方 Open Design は、多くの人にとって本当に重要な点で勝ります — 無料で Apache-2.0、自前のエージェントとキーを持ち込め、そしてモデルの柔軟性は控えめな超能力です。あるプロバイダが値上げしたり、二つのモデルが同じレイアウトをどう扱うか比べたくなったりしたら、ドロップダウンでエージェントを切り替えて再実行するだけ。率直な注意点もいくつか。まだリサーチプレビューの初期段階であること。Claude Code は最もリッチなストリーミング（構造化された stream-JSON）を得られる一方、他の CLI は行バッファ方式であること。出力品質は接続先のモデルに大きく左右されること。そしてコメントモードでの外科的編集のような一部機能はまだロードマップ上にあること。
ヒント
.odプロジェクトフォルダを理解する — 成果物はそこにある実際のファイルです。バックアップ / コミットしましょう。- スキルと
DESIGN.mdを git に置くことで、バージョン管理され、チームで共有できるワークフローに。 - ローカル CLI を使う。すでに支払っているサブスクリプションの上で生成が走ります。
- エンジンは慎重に選ぶ — 弱いモデルは、素晴らしいデザインシステムを与えても、やはり弱い出力しか生みません。
- プライバシーや管理が必要なときはセルフホスト / デプロイを — 何一つあなたのマシンから出る必要はありません。
FAQ
「あらゆる層での BYOK」とは？ 自前のエージェント CLI と、自前のモデルキーを持ち込みます。Open Design はデザインの場、スキル、デザインシステムを提供します。モデルとそのコストはあなたの側に留まります。
私の作業は実際どこにあるの？
あなたのマシン上、.od 配下のプロジェクトごとのフォルダに、ローカルデーモン（SQLite + 実際のファイル）が管理します。セルフホスト可能で、Web へもデプロイ可能です。
スキルやデザインシステムをカスタマイズできる？
はい — どれもプレーンなファイルです（スキルはフォルダ、デザインシステムは DESIGN.md）。編集し、自分のものを追加し、バージョン管理に置いてください。
無料？ アプリは Apache-2.0 のオープンソースで、ローカル実行は無料です。あなたが接続したエージェントとキーのモデル使用分だけを支払います。
この文章ガイドは AI Stack Engineer のフル解説に基づいています。上のフル動画をご覧になり、より実用的な AI スタック解説のためにAI Stack Engineer をチャンネル登録してください。