⚡ OpenDesign Cloud——公式モデルサービス。 一度のチャージで、OpenDesign 内のエージェントモデルと画像モデルを利用できます。エージェントには GPT、Claude、DeepSeek、画像には GPT Image 2.0、Seedream 5.0 Pro、Nano Banana 2.0 を提供します。
🚀 DeepSeek V4 Flash と V4 Pro が利用可能になりました。 プロトタイプ、スライド、デザインシステム、日常的なエージェントタスクに最先端の知能を活用できます。OpenDesign メンバーは、アプリ内で両モデルを 2 週間無制限に利用できます。
🧩 DeepSeek Harness に対応しました。 DeepSeek 公式の
dshAgent Harness を OpenDesign のネイティブランタイムとして接続できます。構造化思考、ツール呼び出し、モデル検出、キャンセル、セッション再開に対応し、生成ファイルはライブプレビューと納品のため OpenDesign のワークフロー内に保持されます。
ウェブサイト · ダウンロード · OpenDesign Cloud · Discord · @OpenDesignHQ をフォロー
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย
🎨 ローカルファーストでオープンソースの Claude Design 代替ツール。 🖥️ macOS と Windows 向けのネイティブデスクトップアプリ。 ⚡ 100 種類以上の機能スキル + 独立したレンダリングテンプレートカタログ · ✨ 151 のデザインシステムパッケージ · 📦 277 のすぐ使えるプラグイン。 🖼️ ウェブ · デスクトップ · モバイルのプロトタイプ、ライブダッシュボード／アーティファクト、スライド、画像、動画、さらに HyperFrames のモーショングラフィックスを生成。🔒 サンドボックス化された iframe プレビュー · HTML / PDF / PPTX / MP4 エクスポート。 🤖 25 種類のローカル CLI 実行ファイル上で動作、もしくは BYOK 経由で任意の OpenAI 互換エンドポイント上でも動作します。
OpenDesign は、そのループをエージェントが読み書きできる 機能スキル・レンダリングデザインテンプレート・デザインシステム・プラグインのファイルシステム にします。
これはまた、エージェント時代の Figma 代替ツールでもあります——キャンバス上でピクセルを動かす代わりに、本物の CSS、本物のフォント、本物のコンポーネントによる単一ページのアーティファクトを納品し、HTML / PDF / PPTX / MP4 へ直接エクスポートします。すでにあなたのデザインシステムによって形づくられ、すでに日常的に使うエージェントの中で実行可能です。
OpenDesign の中核ワークフローを手早く紹介します。Home でブリーフを入力し、Plugins で再利用可能なスキルを探し、ブランドの参考資料を Design System に変換します。その後、プロジェクトの Studio でプロトタイプ、スライド、モバイルアプリ、画像、ドキュメント、HyperFrame を一か所で作成・改善できます。
 Home — アーティファクトの種類を選び、ブリーフを入力し、開始前にデザインシステム、作業ディレクトリ、モデルを設定します。 |
 Plugins — 公式スキルをカテゴリ別に閲覧し、カタログを検索して Try it からワークフローを開始します。
|
 Design System — ブランドのビジュアル言語を抽出・調整し、結果をプレビューして、同じワークスペースでそのまま制作を続けます。 |
プロジェクトの Studio では、会話、生成ファイル、ライブプレビューが 6 種類のアーティファクトを通じて一か所にまとまります。
 プロトタイプ — Web 体験を生成または再構築し、レンダリングされたページを確認しながら、その場でエージェントと反復します。 |
 スライド — 複数スライドのプレゼンテーションを作成し、サムネイルとスピーカーノートを確認して、完成したらエクスポートします。 |
 モバイルアプリ — デバイスプレビューでモバイル UI を生成・調整し、会話、出力ファイル、次の操作を横に表示したまま進めます。 |
 画像 — プロジェクトの会話からビジュアル素材を生成し、結果をフルサイズで確認してからダウンロードまたは開きます。 |
 ドキュメント — 洗練された複数ページのガイドや編集ドキュメントを作成し、レイアウトを確認して、完成したらエクスポートまたは共有します。 |
 HyperFrame — コード駆動のモーショングラフィックスを作成し、Studio 内でアニメーションをプレビューして、完成した動画をエクスポートします。 |
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 つのコアプロダクトカテゴリーは、すべてあなたのラップトップ上で動作するコーディングエージェントによってレンダリングされています。サムネイルをクリックすると、実際の例を確認できます。
デフォルトの出力サーフェス。あなたの DESIGN.md を読み取り、サンドボックス化された iframe にレンダリングされる単一ページの HTML アーティファクトです。
 ウェブプロトタイプ — スクロールバー、KPI、チャートを備えたエディトリアルなダッシュボード。 design-templates/dating-web/ から直接レンダリングされています。
|
 モバイルアプリのプロトタイプ — XP リボンとクエスト詳細を備えた 3 画面のゲーミフィケーションフロー。Cursor / Codex / Claude Code に直接引き渡して React/Next/Vue に変換できます。 |
ライブダッシュボード、意思決定ルーム、KPI ウォール——tweaks パネルを通じてデータを取り込み、その場で編集可能なまま保たれる単一ページのアーティファクトです。
 ライブダッシュボード — 編集可能な KPI ウォールで、その tweaks パネルが調整に値するパラメーターを浮かび上がらせます。エージェントがマニフェストを発行し、iframe はリロードなしで再レンダリングします。 |
 意思決定ルーム — プロダクト／リサーチ／オペレーションの会議向けの、マルチソースのブリーフィングアーティファクト。 |
 GitHub スタイルのダッシュボード — リポジトリのメトリクスをライブアーティファクトとして提示します。 |
 Flow ライブダッシュボードテンプレート — アクティブな DESIGN.md によってブランド化された、ドメイン特化型の KPI テンプレート。
|
 Deck モード (guizang-ppt) — 雑誌風レイアウト、WebGL ヒーロー、P0/P1/P2 チェックリスト。 op7418/guizang-ppt-skill からそのままバンドルされ、元のライセンスを保持しています。
|
 スイス・インターナショナルスタイルのスライド — グリッドに固定され、モノクロのアクセントを効かせています。 design-templates/html-ppt-*/ 配下の 15 のスライドテンプレートと 36 のテーマのうちの 1 つです。
|
すべてのスライドは、HTML（単一ファイル、アセットをインライン化）、PDF（ブラウザ印刷、スライド対応）、PPTX（エージェント駆動のスキル）、ZIP（アーカイブ）、または Markdown にエクスポートできます。
 イラスト調の都市グルメマップ 手描きのエディトリアルな旅行ポスター |
 シネマティックなエレベーターのシーン 単一フレームのエディトリアルな静止画 |
 サイバーパンクのポートレート プロフィールアバター——ネオンの顔のテキスト |
 3D の石の階段 削り出した石のインフォグラフィック |
 華やかなポートレート エディトリアルなスタジオ撮影 |
93 のすぐに再現できるプロンプトが prompt-templates/ にあります——プレビューサムネイル、プロンプト全文、対象モデル、アスペクト比、出典の帰属付きです。ワンクリックでブリーフをコンポーザーに投入できます。
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/ に詳しく記載されています。
2026 年 4 月、Anthropic は Claude Design をリリースしました——LLM が散文を書くのをやめ、デザインアーティファクトを直接納品し始めた初めての出来事でした。 これは一気に広まりました。しかし、それはクローズドソースのまま、有料のみ、クラウドのみで、Anthropic のモデル、Anthropic のスキル、Anthropic のサーフェスに縛られていました。チェックアウトもなく、セルフホストもなく、Vercel デプロイもなく、自前のエージェントへの差し替えもできません。
OpenDesign (OD) はそのオープンソースの代替ツールです。同じループ、同じアーティファクトファーストのメンタルモデル、ロックインは一切なし:
- 🤖 エージェントネイティブ、モデル非依存。 私たちはエージェントを同梱しません。すでにあなたの
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をエージェントに渡せば、あなたの実際のコンポーネントをブランド仕様にリファクタリングします。専用のプラグインが Figma / Pencil のワークフローを React / Next.js / Vue のコードへと移行します。 - 🔒 信念としてのプライバシー。 すべてがあなたのデータのある場所——あなたのラップトップ、チームのサーバー、Vercel プロジェクト——で動作します。ネットワークが必要なときも、BYOK プロキシは SSRF からガードされています。
| Claude Design | Figma | Lovable / v0 / Bolt | OpenDesign | |
|---|---|---|---|---|
| オープンソース | ❌ | ❌ | ❌ | ✅ Apache-2.0 |
| セルフホスト／デスクトップ | ❌ | ❌ | ❌ | ✅ macOS + Windows + Docker |
| エージェントネイティブ（あなたの CLI で動作） | Anthropic のみ | ❌ | クラウドエージェントのみ | ✅ 25 CLI + BYOK |
ブランドグレードの DESIGN.md |
プロプライエタリ | テーマ JSON | 限定的なトークン | ✅ 151 システム同梱 |
| スキル／プラグイン／テンプレート | クローズド | プラグインストア | クローズド | ✅ 100 種類以上の機能スキル · 独立したレンダリングテンプレートカタログ · 277 プラグイン |
| HyperFrames（HTML→MP4） | ❌ | ❌ | ❌ | ✅ 第一級対応 |
| 既存リポジトリをブランドにリフレッシュ | ❌ | ❌ | ❌ | ✅ エージェント + DESIGN.md 経由 |
| 最低限の課金 | Pro / Max / Team | Pro / Org | Pro / Team | BYOK · 任意の互換エンドポイント |
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 のデザインシステムパッケージを読み込み、エントリービューでブリーフを入力できるようにします。
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 つ返します。
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 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 webtools-dev が表示した URL を開いてください。明示的なポートフラグがなければ、開発ポートは動的に割り当てられます。
Node ~24、pnpm 10.33.x。Windows ユーザーは docs/windows-troubleshooting.md を参照してください。完全なクイックスタート、環境変数、Nix flake、パッケージ化されたビルドフロー → QUICKSTART.ja-JP.md。
brief → plugin → direction → design system → artifact → handoff → memory
- PM がブリーフを提出します。 プラグインピッカーが、ランディングページ · ピッチデック · ダッシュボード · ソーシャル投稿 · PM スペック · OKR スコアカード… を提案します。
- デザイナー（またはエージェント）が方向性を確定します。 ブランドがない？ 5 つの厳選された方向性から選びます。ブランドがある？ スクリーンショット／URL をドロップ → エージェントが GitHub に接続し、Figma をインポートし、再利用可能な
DESIGN.mdに体系化します。 - エージェントが最初の成果物を作ります。 ファイルシステム対応 CLI は正規ファイルを書き、ファイルツールのない BYOK/API は完全な
<artifact>ブロックを返します。 - エンジニアリングへ引き渡します。 アーティファクトは本物の HTML/CSS です——Cursor、Codex、または Claude Code にドロップして、コードとして開発を続けられます。あるいは PPTX / PDF / MP4 をマーケティングへ直接エクスポートできます。
- 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 · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent
生産性 — notion · figma · 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-figma-migration # 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、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 を募集しています——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 秒、本物のシグナルです。
| プロジェクト | 役割 |
|---|---|
| Claude Design | このリポジトリがオープンソースの代替ツールとなっている、クローズドソースのプロダクト。 |
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 |
最初のオープンソース Claude Design 代替ツール。私たちが借用している 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）を保持しています。