Open Design: 開発者向けのオープンソースAI搭載デザインエンジン

Introduction

もし Anthropic の Claude Design を試したことがあるなら、LLM がシンプルなブリーフから洗練された UI モックアップを作り上げる様子に胸が高鳴るのを知っているでしょう。問題は？Claude Design はクローズドソースで、クラウド専用、しかも Anthropic のモデルとスキルに縛られています。Open Design（GitHub プロジェクト github.com/nexu-io/open-design）は、このジレンマを解決し、ローカルファースト、オープンソース、BYOK（Bring‑Your‑Own‑Key）デザインエンジンを提供します。ノートパソコン上で動作し、Vercel にデプロイ可能で、既に持っている 16 種類のコーディングエージェント CLI と統合できます。

本記事では、コアコンセプト、アーキテクチャ、そして Open Design を使ってブランドレベルのプロトタイプ、デック、メディアを作り始める実践的な手順を解説します。

Open Design が他と違う点は？

要するに、Open Design はベンダーロックインなしで 同じアーティファクトファーストの思考モデル を提供します。

コアアーキテクチャ概要

Browser (Next.js 16) ⇄ /api/* (Express daemon) ⇄ Local CLI agents

1. フロントエンド – チャットコンポーザー、スキルピッカー、デザインシステムセレクター、サンドボックス化された iframe プレビューをホストする React/Next.js SPA。
2. デーモン – Node‑24 の Express サーバー（od）で、
3. $PATH を走査してサポートされているコーディングエージェント CLI を検出・登録。
4. プロジェクト、会話、テンプレートをローカル SQLite DB（.od/app.sqlite）に保存。
5. BYOK プロキシ（/api/proxy/{anthropic,openai,…}）を通じて任意の LLM プロバイダーからのストリーミングレスポンスを正規化。
6. プロンプトテンプレートギャラリー、デザインシステムカタログ、アーティファクトのリントを提供。
7. エージェントランタイム – デーモンは選択された CLI をプロジェクトフォルダー（.od/projects/<id>）内で起動。エージェントは実際の読み書き、Bash、Web フェッチ機能を持ち、実際のファイルシステム上で作業するチームメンバーのように振る舞います。

関心の分離により、Web UI は任意のマシンで動かしつつ、重い LLM 呼び出しはローカルまたは自分の API キー経由で実行できます。

はじめに – 3 つのクイックパス

1️⃣ プリビルトデスクトップアプリ（ゼロセットアップ）

1. open‑design.ai にアクセスし、最新の macOS または Windows インストーラーをダウンロード。
2. アプリを実行 – デーモン、Web UI、オプションの Electron シェルが同梱されています。
3. 初回起動時に隠し .od フォルダーが作成され、インストール済みエージェントが検出され、デフォルトスキル（web‑prototype）がロードされます。

2️⃣ Docker Compose（Node 不要）

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d   # デーモン + Web がポート 7456 で起動

3️⃣ ソースから実行（開発者向けフルコントロール）

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web   # デーモン + Web が起動し、URL が表示されます

デザインワークフロー – ブリーフからアーティファクトへ

1. スキル選択 – プロトタイプ（例：mobile‑app）やデック（例：guizang‑ppt）を選びます。各スキルはモード、プラットフォーム、必要アセットを定義した SKILL.md を同梱。
2. デザインシステム選択 – 72 件のカタログから選択。システムは 9 セクションの DESIGN.md（カラー、タイポグラフィ、間隔など）を提供。
3. ブリーフ入力 – 最初のターンは 質問フォーム で、サーフェス、対象、トーン、ブランドコンテキスト、スケールを固定。これによりコストのかかる再設計ループが 80 % 削減されます。
4. ビジュアル方向性選択 – ブランドが無い場合、2 番目のフォームで 5 つのキュレートされた方向性（Editorial Monocle、Modern Minimal、Tech Utility、Brutalist、Soft Warm）から選択。ワンクリックで決定的なパレットとフォントスタックが注入されます。
5. ライブ Todo 進捗 – エージェントは in_progress → completed の Todo カードをストリーミングし、途中で介入可能にします。
6. サンドボックスプレビュー – 生成された <artifact> がクリーンな srcdoc iframe 内に表示。ワークスペース内のファイルを直接編集し、スキルを再実行できます。
7. エクスポート – Save をクリックして HTML、PDF、PPTX、ZIP、Markdown のいずれかでアーティファクトを保存。気に入ったテンプレートは SQLite の templates テーブルに保存して再利用可能です。

プロンプトスタック – 秘密のソース

Open Design のプロンプトスタックは単なる system + user メッセージではありません。以下の層で構成されます。

• Discovery ディレクティブ – 質問フォーム、ブランド仕様抽出、5 次元批評。
• Identity Charter – AI スラップ防止ルール、ジュニアデザイナー口調、ブランド固有制約。
• Active DESIGN.md – 選択されたシステムのトークン値。
• Active SKILL.md – モード固有指示とチェックリスト参照。
• Project メタデータ – フィデリティ、スピーカーノート、アニメーションフラグ。
• Side‑file pre‑flight – アセット読み込み、チェックリスト検証、デフォルト注入。

各層が ファイル であるため、apps/daemon/src/prompts/*.ts を直接編集してトーンを変えたり、新しいデザイン哲学を追加したり、プロプライエタリ LLM を統合したりできます。

メディア生成 – 画像・動画・音声

Open Design には プロンプトテンプレート ギャラリーが同梱されています。 * 93 件の画像プロンプト（gpt‑image‑2） – ポスター、アバター、インフォグラフィック。 * 39 件の Seedance 2.0 動画プロンプト – 15 秒のシネマティックテキスト‑to‑video。 * 11 件の HyperFrames テンプレート – HTML → MP4 のモーショングラフィック。

テンプレートを選ぶと、デーモンが適切なモデルへリクエストを転送し、生成された .png または .mp4 がプロジェクトフォルダーに配置され、次のスキルから参照可能になります。

プラットフォーム拡張

新しいスキルの追加

1. 既存の SKILL.md 形式に従い、skills/ 配下にフォルダーを作成。
2. 必要なアセット（template.html、references/… など）を追加。
3. デーモンを再起動 – 新スキルがピッカーに表示されます。

デザインシステムの追加

design-systems/<brand>/ に DESIGN.md をドロップ。9 セクションスキーマ（カラー、タイポグラフィ、間隔、コンポーネント、モーション、ボイス、ブランド、アンチパターン）は apps/daemon/src/skills.ts で検証されます。

新しい CLI エージェントの追加

apps/daemon/src/agents.ts を編集し、バイナリ名、ストリーミング形式、引数マップを追加。次回起動時に自動検出されます。

実際のユースケース

競合比較

• OpenCoDesign – 最初のオープン Claude‑Design クローンですが、デスクトップ Electron バンドルとスキル数が限定的。
• OpenCoCodesign – ストリーミング‑アーティファクトループは共有しますが、独自のバンドルエージェントを提供。Open Design は 既に信頼しているエージェント に委任し、ランタイムを軽量に保ちます。
• Claude Design – 強力だがクローズド、クラウド専用、高額。Open Design は同等の機能を 無料・セルフホスト・拡張性 で実現します。

コミュニティと貢献

Open Design はコミュニティ貢献で成長しています。 * Good‑first‑issues は新人向けにラベル付け。 * スキルやデザインシステムの追加は単一フォルダーの PR で完了。 * CONTRIBUTING.md にはスタイルガイド、コードレビュー方針、翻訳手順（リポジトリは 12 言語でドキュメントを提供）があります。 * すでに 170 人以上の貢献者が参加し、スター数（35k+）は高い関心を示しています。

最後に

Open Design は ローカルファースト、オープンソースの AI デザインエンジン が商用製品に匹敵できることを証明しています。既存のコーディングエージェント CLI、豊富なデザインシステムカタログ、厳格なプロンプトスタックを活用することで、クラウドに資産を送信することなく、迅速で再現性が高く、ブランド一貫性のあるアーティファクトを提供します。

ソロ創業者がピッチデックを作るにせよ、プロダクトチームが UI をプロトタイプするにせよ、LLM 主導のワークフローに興味がある開発者であれ、Open Design は 設計・反復・エクスポート をすべて自分のコントロール下で行うためのツールを提供します。

試してみませんか？ デスクトップアプリを取得するか、Docker コンテナを起動するか、リポジトリをクローンして今日から構築を始めましょう。