1343f374c6
* docs: align README positioning and clarify service disclosures * docs: restore shipped migration and import contracts * docs: list task-kind values in condensed translations --------- Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>
59 KiB
OpenDesign：初の共同作業型AIデザインエージェントワークスペース
✨ GitHub 100K スター記念 — OpenDesign Go のクレジットが2倍に。初月わずか8米ドルで、対象の Design Plan モデルで毎月最大120米ドル分のクレジットをご利用いただけます。GPT-6 Luna、DeepSeek V4.1 Flash、GLM-5.3 Flash-X、MiMo V2.6 Flash など10種類以上のモデルに対応しています。 すべての個人プランには、Codex、Claude Code、DSH、OpenCode などで利用できる API アクセスが含まれます。
ウェブサイト · ダウンロード · OpenDesign Cloud · Discord · @OpenDesignHQ をフォロー
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย
OpenDesign とは
OpenDesign は初の共同作業型AIデザインエージェントワークスペースです。要件を入力し、普段使っているコーディングエージェントまたは OpenDesign Cloud で、デザインシステムに沿ったプロトタイプを作成します。チームと共有してフィードバックを集め、同じプロジェクト内でエージェントに改善を続けてもらえます。
このワークフローはオープンで拡張可能です。OpenDesign は Apache 2.0 ライセンスで公開され、スキル、デザインテンプレート、デザインシステム、プラグインをチームが調べて独自の工程に合わせて調整できます。
プロダクトツアー
コアページ
 Home — 要件またはサンプルから始めます。 |
 All projects — デザインシステム、メディア、プロトタイプをもう一度開きます。 |
 Design Systems — ブランド素材を確認し、エージェントと一緒に改善します。 |
 Plugins — スキルを探して Try it から起動します。 |
Studio — 1 つのプロジェクトで制作と改善
 Prototype — エージェントと対話しながら Web 体験を制作・改善し、ライブプレビューで確認します。 |
 Slides — スライドと発表者ノートを確認しながら資料を作り、完成したら書き出します。 |
 Image — 会話からビジュアル素材を生成し、結果を確認してダウンロードまたは開きます。 |
 HyperFrames — エージェントとモーショングラフィックスを作り、MP4 に書き出します。 動画を見る. |
プラットフォーム互換性
OpenDesign は、主流のコーディングエージェントがネイティブに利用する スキル、CLI、MCP サーバーとして提供されます。OD をインストールすれば、
od mcp install <agent>一発で MCP サーバーがそのエージェントの設定に組み込まれ、どのエージェントの内部からでも同じツールを呼び出せます。
| コーディングエージェント／プラットフォーム | ステータス | MCP サーバーのワンラインインストール |
|---|---|---|
| Claude Code | ✅ 対応済み | od mcp install claude |
| Codex CLI | ✅ 対応済み | od mcp install codex |
| DeepSeek Reasonix | ✅ 対応済み | od mcp install reasonix |
| Raven | ✅ 対応済み | od mcp install raven |
| Cursor | ✅ 対応済み | od mcp install cursor |
| VS Code + GitHub Copilot | ✅ 対応済み | od mcp install copilot |
| GitHub Copilot CLI | ✅ 対応済み | od mcp install copilot |
| OpenCode | ✅ 対応済み | od mcp install opencode |
| OpenClaw | ✅ 対応済み | od mcp install openclaw |
| Antigravity | ✅ 対応済み | od mcp install antigravity |
| Cline | ✅ 対応済み | od mcp install cline |
| Trae | ✅ 対応済み | od mcp install trae |
| Kimi CLI | ✅ 対応済み | od mcp install kimi |
| Kiro | ✅ 対応済み | od mcp install kiro |
| Pi Agent | ✅ 対応済み | od mcp install pi |
| Mistral Vibe CLI | ✅ 対応済み | od mcp install vibe |
| Hermes Agent | ✅ 対応済み | od mcp install hermes |
od mcp install <agent> --print でドライランのプレビュー · --uninstall で削除 · 完全な一覧は od mcp install --help で確認できます。
CLI を一つもインストールしていない場合は？ POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream の BYOK プロキシが同じループ（プロセスのスポーンなし）を提供します——baseUrl + apiKey + model を貼り付けるだけで、OpenAI、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM、または任意の OpenAI 互換エンドポイントに対応します。ターゲットごとの SSRF 保護が、内部 IP／リンクローカル／CGNAT をデーモンのエッジでブロックします。
Runtime 定義は apps/daemon/src/runtimes/defs/ に置き、runtimes/registry.ts に登録します。新しい parser が必要なのは新しい wire format の場合だけです——docs/agent-adapters.md を参照してください。
デモ
4 つのコアプロダクトカテゴリーは、すべてあなたのラップトップ上で動作するコーディングエージェントによってレンダリングされています。サムネイルをクリックすると、実際の例を確認できます。
1 · プロトタイプ — ウェブ · デスクトップ · モバイル
デフォルトの出力サーフェス。あなたの DESIGN.md を読み取り、サンドボックス化された iframe にレンダリングされる単一ページの HTML アーティファクトです。
 ウェブプロトタイプ — スクロールバー、KPI、チャートを備えたエディトリアルなダッシュボード。 design-templates/dating-web/ から直接レンダリングされています。
|
 モバイルアプリのプロトタイプ — XP リボンとクエスト詳細を備えた 3 画面のゲーミフィケーションフロー。Cursor / Codex / Claude Code に直接引き渡して React/Next/Vue に変換できます。 |
2 · ライブアーティファクトとダッシュボード
ライブダッシュボード、意思決定ルーム、KPI ウォール——tweaks パネルを通じてデータを取り込み、その場で編集可能なまま保たれる単一ページのアーティファクトです。
 ライブダッシュボード — 編集可能な KPI ウォールで、その tweaks パネルが調整に値するパラメーターを浮かび上がらせます。エージェントがマニフェストを発行し、iframe はリロードなしで再レンダリングします。 |
 意思決定ルーム — プロダクト／リサーチ／オペレーションの会議向けの、マルチソースのブリーフィングアーティファクト。 |
 GitHub スタイルのダッシュボード — リポジトリのメトリクスをライブアーティファクトとして提示します。 |
 Flow ライブダッシュボードテンプレート — アクティブな DESIGN.md によってブランド化された、ドメイン特化型の KPI テンプレート。
|
3 · スライド — 雑誌風スライド、週次アップデート、ピッチ
 Deck モード (guizang-ppt) — 雑誌風レイアウト、WebGL ヒーロー、P0/P1/P2 チェックリスト。 op7418/guizang-ppt-skill からそのままバンドルされ、元のライセンスを保持しています。
|
 スイス・インターナショナルスタイルのスライド — グリッドに固定され、モノクロのアクセントを効かせています。 design-templates/html-ppt-*/ 配下の 15 のスライドテンプレートと 36 のテーマのうちの 1 つです。
|
すべてのスライドは、HTML（単一ファイル、アセットをインライン化）、PDF（ブラウザ印刷、スライド対応）、PPTX（エージェント駆動のスキル）、ZIP（アーカイブ）、または Markdown にエクスポートできます。
4 · 画像 — gpt-image-2、ImageRouter、カスタム API
 イラスト調の都市グルメマップ 手描きのエディトリアルな旅行ポスター |
 シネマティックなエレベーターのシーン 単一フレームのエディトリアルな静止画 |
 サイバーパンクのポートレート プロフィールアバター——ネオンの顔のテキスト |
 3D の石の階段 削り出した石のインフォグラフィック |
 華やかなポートレート エディトリアルなスタジオ撮影 |
93 のすぐに再現できるプロンプトが prompt-templates/ にあります——プレビューサムネイル、プロンプト全文、対象モデル、アスペクト比、出典の帰属付きです。ワンクリックでブリーフをコンポーザーに投入できます。
5 · 動画と HyperFrames — エージェントネイティブなモーショングラフィックス
HyperFrames は HeyGen のオープンソースでエージェントネイティブな動画フレームワークであり、OpenDesign に第一級の存在として統合されています。エージェントが HTML + CSS + GSAP を書き、HyperFrames がそれをヘッドレス Chrome + FFmpeg を通じて決定論的な MP4 にレンダリングします。シネマティックな t2v / i2v のための Seedance 2.0、ルーティングされたモデルバリアントのための Veo 3 / Sora 2 / Kling 2、そしてオーディオレイヤーのための Suno v5 / Lyria 2 と組み合わせられます。
 30 秒の SaaS プロダクトプロモ · 16:9 · UI の 3D リビール |
 TikTok カラオケのトーキングヘッド · 9:16 · TTS + 単語同期の字幕 |
 30 秒のブランドシズルリール · 16:9 · オーディオに反応するキネティックタイプ |
 バーチャートレース · 16:9 · NYT 風のデータインフォグラフィック |
 フライトマップ · 16:9 · Apple 風のルートリビール |
4 秒のシネマティックなロゴアウトロ · 16:9 · パーツごとの組み立て + ブルーム |
 $0 → $10K のマネーカウンター · 9:16 · Apple 風のハイプ |
 ウェブサイトから動画へ · 16:9 · サイトを 3 つのビューポートでキャプチャ |
11 の HyperFrames テンプレート + 39 の Seedance プロンプトがリポジトリに同梱されています。カタログのサムネイルは © HeyGen、フレームワークは Apache-2.0 です。OD 固有のレンダーワークフロー（コンポジションキャッシュ、sandbox-exec の回避策、MP4-as-chip）は design-templates/hyperframes/ に詳しく記載されています。
なぜ OpenDesign なのか
- 🤖 エージェントネイティブ、モデル非依存。 私たちはエージェントを同梱しません。すでにあなたの
PATHにあるclaude/codex/cursor-agent/copilot/hermes/kimiがデザインエンジンです。ワンクリックで差し替えられます。 - 🧠 デフォルトでブランドグレード。 すべてのレンダリングは、アクティブなパッケージの
DESIGN.mdを中核のブランド契約として読み取ります。151 のデザインシステムパッケージが同梱され、従来のパッケージはDESIGN.mdだけでも、新しいパッケージはmanifest.json、tokens.css、コンポーネント、アセット、出典情報を追加できます。フォルダをドロップすればピッカーが見つけます。 - 🖥️ ローカルファースト、あらゆるレイヤーで BYOK。 ネイティブデスクトップアプリはローカルファーストです。製品分析とセッションリプレイには同意が必要です。データを処理・除去した安全性と信頼性のテレメトリは常時有効です。デーモンデータパスを説明する前に、ルートの
AGENTS.mdにある Daemon data directory contract を必ず読んでください。 - 🌍 4 つの平面で組み合わせ可能。 プラグインはワークフロー、機能スキルはエージェント動作、デザインテンプレートはレンダリング設計図、デザインシステムはブランドを担います。
- 🔁 既存のコードベースをリフレッシュ。
gitリポジトリ +DESIGN.mdをエージェントに渡せば、あなたの実際のコンポーネントをブランド仕様にリファクタリングします。 - 🔒 信念としてのプライバシー。 プロジェクトはローカルまたは自分で管理する環境で実行できます。クラウドモデルや OpenDesign Cloud へのリクエストは、それぞれのサービスに送信されます。BYOK プロキシには SSRF 対策が含まれます。
クイックスタート
🖥️ デスクトップアプリをダウンロード（推奨——設定ゼロ）
OpenDesign を使う最も速い方法。Node も、pnpm も、クローンも不要です。
- macOS（Apple Silicon · Intel x64）→ open-design.ai または GitHub Releases
- Windows（x64）→ open-design.ai または GitHub Releases
- Linux（AppImage、オプションのレーン）→ GitHub Releases
インストール後: アプリはあなたの PATH 上のすべてのコーディングエージェント CLI を自動検出し、100 種類以上の機能スキル、独立したレンダリングテンプレートカタログ、151 のデザインシステムパッケージを読み込み、エントリービューでブリーフを入力できるようにします。
🤖 コーディングエージェントにインストール（UI なし）
GUI を一度も開くことなく OpenDesign を使えます——Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi などの内部で、スキル、プラグイン、または MCP サーバーとして呼び出せます。
# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
# | pi | vibe | hermes | cline | kimi | kiro | trae | opencode
そして、エージェントの内部で:
> Use open-design to generate a landing page with the Linear design system
ファイルシステム対応のローカル CLI 実行では、エージェントが選択した機能スキルまたはデザインテンプレートと DESIGN.md を合成し、正規プロジェクトファイルを書き、OpenDesign がそれをプレビューします。ファイルツールのない BYOK/API 実行は、完全な <artifact> ブロックを 1 つ返します。
🐳 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
🚀 Sealos にデプロイ
Sealos App Store テンプレートは、公開済みの OpenDesign Docker イメージを永続的なワークスペースストレージと公開プロキシの Basic Auth 付きで実行します。独自の公開または共有 Docker デプロイでは、deploy/README.md のリバースプロキシと OPEN_DESIGN_ALLOWED_ORIGINS の手順に従ってください。
🧑💻 ソースから実行
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web
tools-dev が表示した URL を開いてください。明示的なポートフラグがなければ、開発ポートは動的に割り当てられます。
Node ~24、pnpm 10.33.x。Windows ユーザーは docs/windows-troubleshooting.md を参照してください。完全なクイックスタート、環境変数、パッケージ化されたビルドフロー → QUICKSTART.ja-JP.md。
完全なワークフロー — ブリーフからアーティファクトまで
brief → plugin → direction → design system → artifact → handoff → memory
- PM がブリーフを提出します。 プラグインピッカーが、ランディングページ · ピッチデック · ダッシュボード · ソーシャル投稿 · PM スペック · OKR スコアカード… を提案します。
- デザイナー（またはエージェント）が方向性を確定します。 ブランドがない？ 5 つの厳選された方向性から選びます。ブランドがある？ スクリーンショット／URL をドロップ → エージェントが GitHub に接続し、再利用可能な
DESIGN.mdに体系化します。 - エージェントが最初の成果物を作ります。 ファイルシステム対応 CLI は正規ファイルを書き、ファイルツールのない BYOK/API は完全な
<artifact>ブロックを返します。 - エンジニアリングへ引き渡します。 アーティファクトは本物の HTML/CSS です——Cursor、Codex、または Claude Code にドロップして、コードとして開発を続けられます。あるいは PPTX / PDF / MP4 をマーケティングへ直接エクスポートできます。
- OpenDesign は使うほど賢くなります。 あなたのスクリーンショット、フォント、パレット、確定したアーティファクトは、次回のセッションのデフォルトとして蓄積されます。やり直しは減り、ブレも減ります。
コーディングエージェントから OpenDesign を使う
OpenDesign は stdio MCP サーバーとエージェントごとのインストールスクリプトを提供します。別のリポジトリにある MCP 互換のエージェントは、あなたのローカルの OpenDesign プロジェクトからファイル——トークン CSS、JSX コンポーネント、エントリー HTML——を、名前で問い合わせ可能な構造化 API として直接読み取れます。エージェントは常に、古いエクスポートではなくライブのファイルを見ます。
# One-line install (16+ CLIs supported):
od mcp install <agent>
# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json
なぜ MCP なのか？ イテレーションのたびに zip をエクスポートして再アタッチすると、フローが途切れます。MCP はデザインソースを直接公開します——エージェントは常にライブのファイルを見ます。
**ゼロから始めるエージェントのために、**インストーラーは ~/.config/<agent>/open-design.json（またはプラットフォーム相当のもの）と、コピー＆ペースト用の MCP スニペットを配置します。Cursor にはワンクリックのディープリンク、Claude Code には claude mcp add-json のワンライナー、その他すべてのエージェントには、その設定が期待するスキーマの JSON が提供されます。エージェントごとの完全なフロー → デスクトップアプリの Settings → MCP server、または docs/agent-adapters.md。
セキュリティモデル。 デフォルトで読み取り専用、デーモンは 127.0.0.1 にバインドし、SSRF はプロキシのエッジでブロックされます。LAN への公開には、明示的な OD_BIND_HOST と OD_ALLOWED_ORIGINS が必要です。コネクターの認証情報とライブアーティファクトのプレビュールートは、いずれにせよループバック専用のままです。
スキルとデザインテンプレート
100 種類以上の機能スキルは skills/ にあり、再利用可能なエージェント動作・参照・ツールを提供します。レンダリング可能なスターターは design-templates/ に分離され、機能スキルレジストリではなくテンプレートカタログに表示されます。
2 つのモードがテンプレートカタログの軸です: prototype と deck。ほかに image、video、audio、utility サーフェス向けテンプレートがあります。
| デザインテンプレート | モード | シナリオ | 生成するもの |
|---|---|---|---|
web-prototype |
prototype | design | デフォルトのランディングページ／ヒーロー |
saas-landing |
prototype | marketing | ヒーロー／機能／価格／CTA |
dashboard |
prototype | operation | 管理画面／アナリティクス（サイドバー付き） |
mobile-app |
prototype | design | iPhone 15 Pro / Pixel フレーム付きアプリ |
mobile-onboarding |
prototype | design | スプラッシュ · 価値提案 · サインインフロー |
social-carousel |
prototype | marketing | 3 カードの 1080×1080 カルーセル |
email-marketing |
prototype | marketing | テーブルフォールバック対応のブランドメール |
magazine-poster |
prototype | marketing | 単一ページの雑誌レイアウト |
motion-frames |
prototype | marketing | ループする CSS モーションヒーロー |
sprite-animation |
prototype | marketing | 8 ビットのピクセルアニメーション解説 |
pm-spec |
prototype | product | PM スペック文書（目次 + 意思決定ログ付き） |
team-okrs |
prototype | product | OKR スコアカード |
eng-runbook |
prototype | engineering | インシデントランブック |
finance-report |
prototype | finance | 経営向け財務サマリー |
hr-onboarding |
prototype | hr | 役割別オンボーディング計画 |
guizang-ppt |
deck | marketing | 雑誌風のウェブ PPT（deck のデフォルト） |
html-ppt-* |
deck | marketing | 15 のスライドテンプレート × 36 のテーマ（マスターテンプレートは design-templates/html-ppt/） |
hyperframes |
video | marketing | HTML → MP4 のモーショングラフィックス（HeyGen OSS フレームワーク） |
critique |
utility | design | 5 次元の自己批評スコアシート |
tweaks |
utility | design | AI が発行する tweaks パネルのマニフェスト |
プロトコルとディレクトリ分割 → docs/skills-protocol.md。機能スキルは GET /api/skills、テンプレートは GET /api/design-templates。
デザインシステム
DESIGN.md を中心とする 151 のデザインシステムパッケージを同梱します。旧パッケージは Markdown 契約のみの場合がありますが、新しいパッケージは manifest.json、コンパイル済み tokens.css、コンポーネント fixture、アセット、由来証拠も持てます。上流由来とプロジェクト独自の追加が混在し、design-systems/README.md が形と由来を記録します。
完全なカタログ（クリックで展開）
AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai
開発者ツール — cursor · vercel · linear-app · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent
生産性 — notion · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast
フィンテック — stripe · coinbase · binance · kraken · mastercard · revolut · wise
E コマース — shopify · airbnb · uber · nike · starbucks · pinterest
メディア — spotify · playstation · wired · theverge · meta
自動車 — tesla · bmw · ferrari · lamborghini · bugatti · renault
その他 — apple · ibm · nvidia · vodafone · resend · spacex
スターター — default（Neutral Modern） · warm-editorial
ライブラリの再インポートは scripts/sync-design-systems.ts で行えます。独自のブランドを追加する → design-systems/<brand>/ に DESIGN.md をドロップします。完全なガイド → design-systems/README.md。
プラグイン
277 の公式プラグインと 183 のリミックス可能な例が plugins/_official/ にあります。各エントリは open-design.json と型固有 payload を持つポータブルディレクトリです。workflow は SKILL.md、メディアテンプレートは template.json、デザインシステムは DESIGN.md を使います。
| カテゴリー | 数 | 内容 |
|---|---|---|
scenarios/ |
13 | 完全なデザインシナリオ — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring, od-share-to-community, od-web-effect-extractor |
image-templates/ |
45 | ワンショットの画像プロンプト — エディトリアル、シネマティック、プロダクト、ポートレート |
video-templates/ |
63 | HyperFrames / Seedance / Veo のモーションテンプレート |
design-systems/ |
143 | プラグインとしてラップされたブランド DESIGN.md |
atoms/ |
13 | 再利用可能な UI フラグメント（ボタン、ヒーロー、KPI カード） |
examples/ |
183 | リミックス可能なリファレンス出力 |
コミュニティプラグインは plugins/community/、公開フローは plugins/registry/ もご覧ください。
プラグインにできること
- 🤖 任意のコーディングエージェントで実行 — Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi… エージェントがすでに知っている同じスキルプロトコルを通じて。
- 🔁 Figma / Pencil のワークフローを移行 → React、Next.js、または Vue のソースへ。
od-figma-migrationを参照。 - 🛠️ 既存のコードベースをブランド仕様にリフレッシュ — プラグインを
gitリポジトリ +DESIGN.mdに向ければ、PR が得られます。od-code-migrationを参照。 - 💾 カスタムワークフローを永続化 — チームの再利用可能なテンプレートが、同梱されたものの隣に並びます。
プラグインを使う
プラグインは ウェブ UI と od CLI の間で完全に同等です——同じ /api/plugins エンドポイントなので、どちらでも合うほうを選べます。
デスクトップ／ウェブアプリで: Plugin ページを開いてマーケットプレイスを閲覧し、Install をクリックします。プロジェクトの Studio 内では、プラグインはクリックして適用するコンポーザーのチップとして（それらが宣言する入力とともに）表示されます。
コマンドラインで（UI なしで動作——これは外部エージェントが使うパスです）:
od plugin list # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page" # search by keyword
od plugin info od-default # inspect a plugin's metadata, inputs, capabilities
od plugin install od-default # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default # upgrade
od plugin uninstall od-default # uninstall
すべてのコマンドが --json をサポートしているため、jq / xargs を通じて自動化にパイプできます。
プラグインを作る
OpenDesign プラグインには open-design.json と型固有 payload が必要です。スキルとシナリオは SKILL.md も含み、ほかの型は独自 payload を使います:
my-plugin/
├── open-design.json ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md ← optional: usage, install, registry links
├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/ ← optional: concrete use cases
主要フィールドは specVersion、name、version、Agent Skill を公開する場合だけ任意の compat.agentSkills[].path、そして od.kind、od.taskKind (new-generation / figma-migration / code-migration / tune-collab)、od.mode、od.capabilities[]、od.inputs[] です。
ローカルでスキャフォールド + 検証:
od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton
od plugin validate ./my-plugin # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck
完全なフィールドセットとランタイム契約 → plugins/spec/SPEC.md。コーディングエージェントでプラグインを開発する → plugins/spec/AGENT-DEVELOPMENT.md。コピー＆ペースト用の最小テンプレート → plugins/spec/examples/。
プラグインを貢献する
- プラグインフォルダを
plugins/community/（サードパーティプラグイン）にドロップするか、または——OpenDesign に同梱して提供するには——plugins/_official/の該当するティアにドロップします。 - 検証を通過させます:
od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。 plugins/spec/CONTRIBUTING.mdのテンプレートを使って PR を記入します（ID、バージョン、レーン、モード、機能、トリガー例。ビジュアルプラグインにはスクリーンショット／プレビューを添付）。- 外部レジストリ（skills.sh / ClawHub / スタンドアロンの GitHub）に公開する →
plugins/spec/PUBLISHING-REGISTRIES.md。
プラグインレジストリのエンドポイント: GET /api/plugins。ディレクトリ概要 → plugins/README.md（简体中文）。
アーキテクチャ
┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│ chat · file workspace · iframe preview · settings · import · MCP │
└──────────────┬─────────────────────────────────────┬─────────────────┘
│ /api/* │
▼ ▼
┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE)
│ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK,
│ │ SSRF-guarded at the edge
│ /api/skills /api/design-templates /api/plugins │
│ /api/design-systems │
│ /api/chat (SSE) /api/proxy/* │
│ /api/projects/:id/files/... │
│ /api/artifacts/{save,lint} │
│ /api/import/claude-design │
│ MCP stdio server │
└─────────┬───────────────────────┘
│ spawn(cli, [...], { cwd: managed project cwd })
▼
┌──────────────────────────────────────────────────────────────────┐
│ Base registry: 26 runtime definitions (including byok-opencode), │
│ backed by 25 distinct local CLI executables because byok-opencode │
│ shares the OpenCode executable. │
│ Composes a functional skill or design template + DESIGN.md; writes files │
└──────────────────────────────────────────────────────────────────┘
| レイヤー | スタック |
|---|---|
| フロントエンド | Next.js 16 App Router + React 18 + TypeScript |
| デーモン | Node 24 · Express · SSE ストリーミング · better-sqlite3 |
| ストレージ | デーモンのストレージパスを変更または文書化する前に、ルートの AGENTS.md にある Daemon data directory contract を必ず読んでください。この README でそれを繰り返してはいけません。 |
| プレビュー | filesystem 実行は正規ファイルを描画し、BYOK/API は完全な <artifact> ブロックを sandbox srcdoc iframe に解析します |
| エクスポート | HTML（インライン化） · PDF（ブラウザ印刷） · PPTX（エージェント駆動） · ZIP · Markdown · MP4（HyperFrames） |
| デスクトップ | Electron シェル + サンドボックス化されたレンダラー + サイドカー IPC（STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN） |
| ライフサイクル | 単一のエントリーポイント: pnpm tools-dev（start / stop / run / status / logs / inspect / check） |
完全なアーキテクチャ → docs/architecture.md。スキルプロトコル → docs/skills-protocol.md。エージェントアダプターの契約 → docs/agent-adapters.md。
ロードマップ
- デーモン + 25 種類の CLI 実行ファイル上の 26 runtime 定義 + スキル/テンプレートレジストリ + デザインシステムカタログ
- ウェブアプリ + チャット + 質問フォーム + 5 方向ピッカー + todo 進捗 + サンドボックス化プレビュー
- 100 種類以上の機能スキル · 独立テンプレートカタログ · 151 のデザインシステムパッケージ · 5 つのビジュアル方向性 · 5 つのデバイスフレーム
- SQLite を裏に持つプロジェクト · 会話 · メッセージ · タブ · テンプレート
- マルチプロバイダー BYOK プロキシ（
/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）+ SSRF ガード - Claude Design ZIP インポート（
/api/import/claude-design） - サイドカープロトコル + Electron デスクトップ + IPC 自動化
- アーティファクト lint API + 5 次元の自己批評による発行前ゲート
- 0.8.0 — プラグインマーケットプレイスのインフラ（261 の公式プラグイン、マニフェスト仕様、エージェントごとのインストールスクリプト）
- 0.9.0 — OpenDesign Cloud（アプリに組み込まれた公式 Model Router: 設定ゼロ、ワンクリックのサインイン）
- パッケージ化された Electron ビルド — macOS（Apple Silicon + Intel） + Windows（x64） + Linux AppImage（オプションのレーン）
- コメントモードの外科的な編集 — 一部提供済み。信頼性の高いターゲット指定のパッチ適用は進行中
- AI が発行する tweaks パネルの UX — 未実装
npx od initでDESIGN.mdを備えたプロジェクトをスキャフォールド- プラグイン SDK +
od plugin {add,list,remove,test,publish}CLI - Figma / Pencil → React / Next / Vue の移行プラグイン（アルファ）
- 既存コードベースのリフレッシュプラグイン（git リポジトリ +
DESIGN.mdに向ける）
段階的なデリバリー → docs/roadmap.md。
コミュニティ
すべてのチャネルの裏側には、本物の人がいます。
- 💬 Discord — 日々のチャット、プラグインの共有、質問 → discord.gg/mHAjSMV6gz
- 🐦 X / Twitter — リリースノート、マイルストーン、舞台裏 → @OpenDesignHQ
- 🗣️ GitHub Discussions — 深い Q&A、RFC、「成果を見せて」 → Discussions
- 🐛 GitHub Issues — バグ報告、機能リクエスト → Issues
good-first-issue と help-wanted のラベルが、最も入りやすい入口です。
貢献
OpenDesign が動き続けるのは、貢献者——デザイナー、エンジニア、プロンプトの作者——が現れ続けるからです。最もよく使われるスキル、デザインシステム、プラグインの多くは、コアチームの外の人々によって書かれました。
🎯 どこから始めるか（最大のレバレッジ、最小の変更）
| 出したいもの… | 方法 | 場所 |
|---|---|---|
| 新しいスキル | SKILL.md + assets/ + references/ を備えたフォルダをドロップ |
skills/ · 仕様は docs/skills-protocol.md |
| 新しいデザインシステム | DESIGN.md を中心とするパッケージをドロップし、必要に応じて manifest.json、tokens.css、コンポーネント、アセット、出典情報を追加 |
design-systems/<brand>/ |
| 新しいプラグイン | カテゴリーフォルダの下に open-design.json + 種類固有のペイロードをドロップ |
plugins/community/ · 仕様は plugins/spec/SPEC.md · エージェント開発ガイドは plugins/spec/AGENT-DEVELOPMENT.md |
| 新しいコーディングエージェント CLI をサポート | Runtime 定義 + registry entry。新しい wire format のみ parser を追加 | apps/daemon/src/runtimes/defs/ |
| バグ修正や UI の磨き上げ | good-first-issue ラベルを閲覧 |
Issues → |
| ドキュメントを翻訳 | README.<lang>.md ファイルを更新 |
TRANSLATIONS.md |
🤖 エージェントとして貢献する
あなたがこれを読んでいるエージェントであるなら、最も速いパスは:
# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # create a branch and worktree
# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. Open the PR
gh pr create --fill
完全なエージェントフレンドリーな貢献フロー、コードスタイル、PR の基準 → English（Deutsch · Français · 简体中文 · 日本語 · Português）。
🏅 OpenDesign Fellow プログラム
私たちは世界中で OpenDesign Fellow を募集しています——Fellow はコアチームとともにプロダクトを形づくり、各地域で OpenDesign を公式に代表し、資金面のサポート（$1,000 / MR）、無料の LLM クレジット、直通のレビュートラックに支えられながら、ローカルでコミュニティを育てます。詳細 → MAINTAINERS.md と Discord のアナウンス。
メンテナー
彼らは多くの負担を担っています——日々のメンテナンス、レビュー、そしてコミュニティサポート。
 @Nagendhra-web Maintainer |
 @Sid-Qin Maintainer |
メンテナーのルール、昇格基準、退任プロトコル → MAINTAINERS.md（Deutsch · Français · 简体中文 · 日本語 · Português も）。
コントリビューター
参加してくださったすべての方に感謝します——コード、ドキュメント、フィードバック、鋭い issue、新しいスキル、新しいデザインシステム。
リポジトリのアクティビティ
上の SVG は、lowlighter/metrics を使って .github/workflows/metrics.yml によって毎日再生成されます。
スターをお願いします
これで 30 分を節約できたなら、★ を付けてください。スターは家賃を払ってはくれません——でも、次のデザイナー、エージェント、貢献者に、この実験が注目に値することを伝えてくれます。ワンクリック、3 秒、本物のシグナルです。
参考と系譜
| プロジェクト | 役割 |
|---|---|
alchaincyf/huashu-design |
デザイン哲学の羅針盤——ジュニアデザイナーのワークフロー、ブランドアセットのプロトコル、アンチ AI スロップのチェックリスト、5 次元の批評。 |
op7418/guizang-ppt-skill |
雑誌風のウェブ PPT スキルで、design-templates/guizang-ppt/ の下にそのままバンドルされています。deck モードのデフォルト。 |
lewislulu/html-ppt-skill |
HTML PPT Studio ファミリー——15 のスライドテンプレート、36 のテーマ、31 のページレイアウト、アニメーションランタイム、マグネティックカードのプレゼンターモード。 |
OpenCoworkAI/open-codesign |
私たちが借用している UX パターン（ストリーミングアーティファクトのループ、サンドボックス化された iframe、ライブエージェントパネル）。 |
multica-ai/multica |
デーモン + アダプターのアーキテクチャ——PATH スキャンによるエージェント検出、唯一の特権プロセスとしてのローカルデーモン。 |
VoltAgent/awesome-design-md |
当初の 9 セクション DESIGN.md スキーマと upstream 由来 70 システムの歴史的な出典。現在のパッケージはこの基盤を拡張できます。 |
bergside/awesome-design-skills |
design-systems/ の下に追加された 57 のデザインスキルの出典。 |
heygen-com/hyperframes |
HTML→MP4 のモーショングラフィックスフレームワークで、OpenDesign に第一級の hyperframes-html として統合されています。 |
| Claude Code skills | 私たちがそのまま採用している SKILL.md 規約。 |
詳細な来歴 → docs/references.md。
ライセンス
Apache-2.0。同梱の design-templates/guizang-ppt/ は元の LICENSE（MIT、@op7418）を保持しています。同梱の design-templates/html-ppt/ は元の LICENSE（MIT、@lewislulu）を保持しています。