Open Design

ローカルファーストのオープンソース製品。0.10.0 では発見から素材収集・対話編集・コメント・モーション調整・エディタ/Code Agent への引き渡しまでを 1 ウィンドウに集約する。README 0.10.0 時点の構成を整理する。

1 — 概要
プロダクトの位置づけ

Open Design は、Claude Design が示した「ブリーフを固める → 方向を決める → 成果物をストリーム → 批評 → 納品」というエージェントネイティブなループを、クローズド実装からファイルベースのスキル・デザインシステム・プラグインへ開いた製品。macOS / Windows 向けネイティブデスクトップアプリと Web UI を持ち、手元の CLI をデザインエンジンとして起動する。

100+skills
150design systems
261plugins
21coding agents
14media providers

0.9.0 で内蔵された公式 Model Router（AMR）に加え、0.10.0 はプロジェクトビューをオールインワン Studio へ再編する。並列セッション・コメントキュー・参照ボードで「1 人のアシスタント」から「ローカルなデザインチーム」に近い運用へ移行する。CLI が無い場合は BYOK プロキシ（POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）へフォールバックし、0.10 では API キーのフィールド検証・下書き保存前の検証・アカウントから取得したモデル一覧が強化される。

設計判断: Open Design はモデルもエージェントループも抱え込まない。既存 CLI の tool loop と権限管理を使い、スキル合成・プレビュー・保存・エクスポートの統合シェルに徹する。
2 — 画面構成

Home

Skill と Design System を選び、ブリーフを入力して実行する入口。Chip Rail で Image / Video / HyperFrames / Audio などの Composer Surface を切り替える。

Automation

反復するデザインワークフローを再利用可能な自動化として登録・スケジュールする画面。

Design System

チームの DESIGN.md をブランド契約として蒸留し、以降の出力に一貫した視覚言語を適用する。

Plugin

公式・コミュニティのプラグインを閲覧・インストールし、生成パイプラインを拡張する。

Integrations

外部システムや MCP ツールを接続し、IDE・スクリプト・自動化から Open Design を呼び出す。

Studio / Workspace

0.10.0 以降の制作ハブ。Lexical コンポーザー、対話ターミナル、参照ボード、コメントキューを同一画面に集約し、Prototype・HyperFrame・Deck・Image を扱う。

3 — 0.10 ワークスペース
1 ウィンドウで完結する制作

0.10.0 の中心はプロジェクトビューの再編（211 ファイル規模）。ざっくりしたアイデアから参照収集・対話編集・コメント・モーション調整・エディタ/Code Agent への引き渡しまで、アプリを離れずに進められる。

  • Lexical コンポーザー — @mention を atomic pill 化。キャレット位置に mention / slash ポップオーバーを出す。
  • 対話ターミナル — チャット横でセッションをその場実行。
  • 参照ボード — ブラウザ風ボードとページキャプチャで外部参照をプロジェクトへ取り込む。
  • 会話フォーク — 任意メッセージから分岐して別ルートを試せる。
レビューと引き渡し
  • コメントキュー — 生成中でもプレビューコメントを投入でき、デッキマーカーをピン留め。前ターン完了を待たない。
  • ステージドプレビュー — 生成中に段階的フィードバックをストリーム表示し、黒箱待ちを減らす。
  • Questions タブ — 発見質問を右ペインへ分離。未変更の example prompt では質問をスキップ。
  • 本番引き渡し — sandbox runtime、run スコープ MCP ツール束、プロジェクト export manifest、contained preview URL でエディタ/Code Agent へ渡す。
4 — 生成ループ
ユーザー操作から成果物まで
01
Discover

Home で Skill / Design System / プラグインを選び、ブリーフを入力。新規依頼では Questions タブの質問フォームで出力面・読者・トーン・規模を先に固定する（example prompt をそのまま使う場合はスキップ）。

02
Lock direction

発見質問、アクティブな DESIGN.md、SKILL.md、プラグインの open-design.json、テンプレート参照をプロンプトスタックへ合成する。

03
Stream artifact

daemon が検出済みエージェントをプロジェクト作業ディレクトリで起動し、tool call とテキストを SSE で UI へ流す。0.10 ではステージドプレビューで途中経過を見せ、CLI が無ければ BYOK API 経路へ落ちる。

04
Critique & deliver

サンドボックス iframe でプレビューし、実行中でもコメントをキュー投入。手動編集インスペクタはピン留め、参照画像付きコメントで refinement。HTML / PDF / PPTX / MP4 / ZIP など Skill 定義に沿ってエクスポートし、必要ならエディタ/Code Agent へ manifest 付きで引き渡す。

Prompt stack

プロダクトの中核は「プロンプトスタック」。発見質問と設計哲学を最優先に置き、その後ろへ Design System・Skill・プラグイン指示・デッキ用フレームワークを重ねる。

DISCOVERY directives
  + identity and workflow charter
  + active DESIGN.md
  + active SKILL.md
  + plugin scenario / open-design.json
  + project metadata
  + skill side files
  + deck framework directive
5 — アーキテクチャ

Web App

Next.js 16 + React。Lexical コンポーザー、Questions タブ、ステージドプレビュー、artifact tree、サンドボックス iframe、エクスポート導線を担う。

Desktop shell

macOS / Windows 向けネイティブシェル。GUI 起動時の PATH 問題を吸収し、daemon と一体で配布される。

Local daemon

デフォルト localhost:7456。エージェント検出、Skill / プラグイン登録、SSE チャット、ファイル保存、エクスポートを担当。

packages/

contracts・plugin-runtime・registry-protocol・sidecar に加え、0.10 で terminals / community / social-share 契約が拡張される。

Sandbox runtime

プロジェクトルートを閉じた実行基盤。run スコープ MCP ツール束、export manifest、contained preview URL で本番引き渡しを支える。

Agent adapters

各 CLI の検出と起動引数を吸収。構造化ストリーム対応 CLI は typed events、その他は line-buffered 出力で扱う。

Artifact store

./.od/artifacts/ にプレーンファイルで保存。artifact.json と history.jsonl でメタデータと履歴を Git レビュー可能に保つ。

Topology構成用途
A — Fully localブラウザ → Next.js (:3000) → daemon (:7456) → ローカル CLIデフォルト。アカウント不要。
B — Vercel + daemonホスト済み Web → トンネル経由で手元 daemon秘密情報は daemon 側に留める。
C — Direct APIホスト済み Web → BYOK API（ブラウザ保存）CLI なしの試用。機能は制限される。
公開向けファイルマップ 
open-design/
├── apps/
│   ├── web/             Next.js UI, prompt composer, artifact preview
│   ├── daemon/          Node API, agent spawning, export pipeline
│   ├── desktop/         native shell (macOS / Windows)
│   └── packaged/        release packaging
├── packages/
│   ├── contracts/       shared API, terminals, community contracts
│   ├── plugin-runtime/  plugin loading and scenario execution
│   └── registry-protocol/ marketplace manifests
├── skills/              SKILL.md bundles (+ reference-design-contract)
├── design-systems/      DESIGN.md catalog (150 systems)
├── design-templates/  curated template scenarios
├── plugins/
│   ├── _official/       bundled first-party plugins
│   ├── community/       community plugin sources
│   └── registry/        marketplace JSON manifests
└── docs/                spec, architecture, modes, protocol
6 — カタログ（Skills / Design Systems / Plugins）
Skill — 成果物の型

skills/ は「何を作るか」「どの順番で作るか」を定義する。SKILL.md、テンプレート、参照ファイル、チェックリストを 1 フォルダに閉じる。ランディング、ダッシュボード、モバイル、HTML デッキ、HyperFrames、画像生成など用途別に増やせる。

web-prototype html-ppt live-dashboard hyperframes imagegen brandkit

Design System — 見た目の言語

design-systems/ は 9 セクションの DESIGN.md で色・タイポ・余白・コンポーネント・声のトーンを規定。Linear、Stripe、Notion、Apple、Cursor などプロダクト風システムが同梱される。

DESIGN.md color typography spacing components voice

Plugin — ワークフロー拡張

プラグインは portable な Skill フォルダに、任意の open-design.json サイドカーを載せた単位。公式 (plugins/_official/) は daemon 起動時に登録され、コミュニティ版はレジストリ経由でインストールする。入力フォーム、プレビュー型、パイプライン、信頼境界のヒントをマーケットプレイスメタデータとして UI に伝える。

軸役割体験への効き
SKILL.md生成手順・成果物種別・テンプレート・チェックリストデッキとダッシュボードで出力の型を固定する
DESIGN.mdブランド級トークンと禁止事項同一 Skill でも Linear 風 / Editorial 風に切り替える
open-design.jsonプラグインの marketplace メタデータフォーム・プレビュー型・シナリオをアプリが解釈する
od: frontmattermode・preview・inputs・parameters・capabilitiesコメント編集可否やスライダー UI の有無を決める
7 — エージェント連携
21 CLI + MCP + BYOK

Open Design は Skill・CLI・MCP サーバーを同梱する。インストール後、od mcp install <agent> で各エージェントの MCP 設定へサーバーを配線し、IDE 内から同じツール面を呼べる。0.10 では run スコープ MCP ツール束と sandbox 連携で、Studio から本番エディタ/Code Agent への引き渡しが強化される。

od mcp install claude
od mcp install codex
od mcp install cursor
od mcp install copilot
od mcp install opencode
od mcp install --help   # 全エージェント一覧
エージェント / プラットフォーム状態MCP インストール
Claude Code対応od mcp install claude
Codex CLI対応od mcp install codex
Cursor対応od mcp install cursor
GitHub Copilot / Copilot CLI対応od mcp install copilot
Gemini CLI対応od mcp install gemini
OpenCode対応od mcp install opencode
OpenClaw対応od mcp install openclaw
Pi Agent対応od mcp install pi
Hermes Agent対応od mcp install hermes
その他（Antigravity, Cline, Trae, Kimi, Vibe など）対応od mcp install --help で確認
ドメイン用語: MCP がプロジェクト未指定で呼ばれたときは Active Project を対象にする。エージェントが通常のファイル成果物を作る場合は Normal Artifact（artifact.json + エントリファイル）。データ更新型は Live Artifact として別管理する。
8 — 成果物タイプ
カテゴリ作るもの代表的な流れ
PrototypeWeb / デスクトップ / モバイルの単一 HTMLSkill 選択 → brief → sandbox iframe → HTML / PDF / ZIP
Live artifactKPI 壁・意思決定ルームなど更新可能なダッシュボードtweaks パネルでパラメータ変更 → iframe 再描画
DeckHTML スライド / PPTX 中間成果物枚数・アウトライン決定 → deck framework へ流し込み → PPTX / PDF
HyperFrameHTML ベースのモーショングラフィックスGSAP タイムラインで合成 → MP4（例: 1920×1080 · 30fps）
Image / Video / Audioブランド準拠のメディア生成Home の Composer Surface から 14 media providers へルーティング
Design System再利用可能な DESIGN.mdスクリーンショット・URL・brief から 9 セクションを生成
Template完成テンプレートの内容差し替え構造固定のままコピーとブランド要素だけ更新（20–40 秒級）
組み合わせ: Design System を先に作ると Prototype・Deck・Template が同じ視覚言語を共有する。本質は「成果物タイプ × Skill × Design System × Plugin」の直積にある。
9 — 品質ゲート
AI-slop を減らす仕掛け
  • Turn 1 では Questions タブの質問フォームで未確定の設計判断を固定し、いきなり HTML を書かせない。
  • ブランド未指定なら視覚方向を選ばせ、パレットとフォントを deterministic に束ねる。
  • Skill / テンプレート参照を事前に読ませ、毎回ゼロから CSS を発明させない。
  • craft/anti-ai-slop.md などの品質方針と P0/P1/P2 チェックリストで自己批評する。
セキュリティと診断
  • プレビューは <iframe sandbox="allow-scripts"> でホスト UI から隔離する（allow-same-origin なし）。
  • 秘密情報は利用者の daemon またはブラウザ側に留まり、Open Design ホストへ預けない前提。
  • Skill / プラグインは強力な指示ファイルなので、インストール時に信頼境界を意識する。
  • Sandbox runtime はプロジェクトルートとホスト探索を閉じ、BYOK プロキシは SSRF 対策で内部 IP / link-local を遮断する。
  • 0.10 では生成失敗の識別可能な原因、Langfuse 相関、prompt-stack 診断、safe-retry 契約でトレース可能にする。
Source and lineage