Open Design: オープンソースの Claude Design 代替ツール

🔥 Open Design 0.13.0 — Stay in Flow が登場。 長いデザインセッションは、これまで中断のたびに途切れていました——実行は現在地を見失い、モデルピッカーは推測を強い、エクスポートはもうひと手間の遠回りを求めました。0.13.0 はセッションを生かし続けます：Codex / OpenCode / Pi / Open Design Cloud の実行をターンをまたいで再開し、適切なモデルをより速く選び、スクリーンショット付きの PPTX / PDF をアプリを離れずに受け渡せます。0.13.0 をダウンロード · リリースノート

⚡ Open Design Cloud——公式モデルサービス。 一度のチャージで、Open Design の中で GPT、Claude、Gemini、DeepSeek をそのまま利用可能。20+ のフラッグシップモデル、設定ゼロ、実トークン使用量ベースの課金。Open Design Cloud を試す

🏅 Open Design Fellow プログラムの募集を開始しました。 あなたもデザインはオープンであるべきだと信じるなら——Open Design Fellow となり、コアチームとともにプロダクトを形づくり、より多くの人がデザインの未来を定義することに参加できるよう手助けしてください。詳細 → MAINTAINERS.md と Discord。

ウェブサイト · ダウンロード · Open Design Cloud · Discord · @OpenDesignHQ をフォロー

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

Open Design とは

🎨 ローカルファーストでオープンソースの Claude Design 代替ツール。 🖥️ macOS と Windows 向けのネイティブデスクトップアプリ。 ⚡ 100 種類以上のスキル · ✨ 150 のブランドグレード DESIGN.md システム · 📦 261 のすぐ使えるプラグイン。 🖼️ ウェブ · デスクトップ · モバイルのプロトタイプ、ライブダッシュボード／アーティファクト、スライド、画像、動画、さらに HyperFrames のモーショングラフィックスを生成。🔒 サンドボックス化された iframe プレビュー · HTML / PDF / PPTX / MP4 エクスポート。 🤖 Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity および 21 のローカル CLI 上で動作、もしくは BYOK 経由で任意の OpenAI 互換エンドポイント上でも動作します。

Open Design は、Anthropic が Claude Design とともに送り出した エージェントネイティブなループ——ブリーフを探り、方向性を確定し、アーティファクトをストリーミングし、批評し、納品する——がクローズドであることをやめ、ラップトップにすでにあるコーディングエージェントが読み・書き・リミックスできる スキル・デザインシステム・プラグインのファイルシステム になったときに得られるものです。あなたの CLI がデザインエンジンに、ラップトップがスタジオに、そしてチームの DESIGN.md がブランドの契約書になります。

これはまた、エージェント時代の Figma 代替ツールでもあります——キャンバス上でピクセルを動かす代わりに、本物の CSS、本物のフォント、本物のコンポーネントによる単一ページのアーティファクトを納品し、HTML / PDF / PPTX / MP4 へ直接エクスポートします。すでにあなたのデザインシステムによって形づくられ、すでに日常的に使うエージェントの中で実行可能です。

プロダクトツアー

Open Design が何であり、何ができるのかを手早く見ていきましょう。Home から始め、Automation で繰り返しのワークフローをオーケストレーションし、Design System でブランドの契約書を抽出し、Plugins と 連携機能で拡張します。どのプロジェクトの Studio 内でも、同じデザインシステムがプロトタイプ、ライブアーティファクト、HyperFrames、スライド、画像をストリーミング出力します。

コアページ

_{Home — 概観のエントリーポイント。スキルとデザインシステムを選び、ブリーフを入力して、すべてを一か所から始められます。}

_{Automation — 繰り返しのデザインワークフローを、再利用可能でスケジュール可能な自動化へとオーケストレーションします。}	_{Design System — チームの DESIGN.md を、すべての出力を形づくるブランドの契約書へと抽出します。}
_{Plugin — ワークフロープラグインを閲覧・インストール・配布し、必要に応じて生成を拡張します。}	_{Integrations — 外部システムや MCP ツールを接続し、任意の IDE・スクリプト・自動化から Open Design を利用できます。}

Studio — 1 つのプロジェクトで多様なアーティファクトタイプを

プロジェクトの Studio 内では、同じデザインシステムが複数のアーティファクトタイプをストリーミング出力します。

_{Prototype — あなたのデザインシステムを読み取り、サンドボックス化された iframe にレンダリングされる単一ページの HTML アーティファクト。即座にプレビューでき、ソースとしてダウンロード可能です。}	_{HyperFrame — プログラムによるモーションとアニメーショングラフィックスを、本物の MP4 にレンダリングします（例: 1920×1080 · 30fps）。}
_{Deck — ページ送りでき、キーボードで操作でき、PPTX / PDF にエクスポートできるピッチデック。}	_{Image — 高解像度の生成とダウンロードに対応した、ブランドグレードの画像とビジュアルアセット。}

プラットフォーム互換性

Open Design は、主流のコーディングエージェントがネイティブに利用する スキル、CLI、MCP サーバーとして提供されます。OD をインストールすれば、od mcp install <agent> 一発で MCP サーバーがそのエージェントの設定に組み込まれ、どのエージェントの内部からでも同じツールを呼び出せます。

コーディングエージェント／プラットフォーム	ステータス	MCP サーバーのワンラインインストール
Claude Code	✅ 対応済み	`od mcp install claude`
Codex CLI	✅ 対応済み	`od mcp install codex`
Cursor	✅ 対応済み	`od mcp install cursor`
VS Code + GitHub Copilot	✅ 対応済み	`od mcp install copilot`
GitHub Copilot CLI	✅ 対応済み	`od mcp install copilot`
Gemini CLI	✅ 対応済み	`od mcp install gemini`
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`
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 をデーモンのエッジでブロックします。

アダプターの契約とストリームパーサーは apps/daemon/src/agents.ts にあります。新しい CLI の追加はエントリー 1 つだけです——docs/agent-adapters.md を参照してください。

デモ

4 つのコアプロダクトカテゴリーは、すべてあなたのラップトップ上で動作するコーディングエージェントによってレンダリングされています。サムネイルをクリックすると、実際の例を確認できます。

1 · プロトタイプ — ウェブ · デスクトップ · モバイル

デフォルトの出力サーフェス。あなたの DESIGN.md を読み取り、サンドボックス化された iframe にレンダリングされる単一ページの HTML アーティファクトです。

_{エントリービュー — スキルを選び、デザインシステムを選び、ブリーフを入力します。プロトタイプ、ダッシュボード、スライド、モバイルアプリ、雑誌風ページのための単一のサーフェスです。}	_{モバイルプロトタイプ — ピクセル精度の iPhone 15 Pro のクロームと、マルチスクリーンのフロー。エージェントは決して電話のフレームを描き直しません。共有されるデバイスフレームは assets/frames/ にあります。}
_{ウェブプロトタイプ — スクロールバー、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 のオープンソースでエージェントネイティブな動画フレームワークであり、Open Design に第一級の存在として統合されています。エージェントが 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/ に詳しく記載されています。

なぜ Open Design なのか

2026 年 4 月、Anthropic は Claude Design をリリースしました——LLM が散文を書くのをやめ、デザインアーティファクトを直接納品し始めた初めての出来事でした。これは一気に広まりました。しかし、それはクローズドソースのまま、有料のみ、クラウドのみで、Anthropic のモデル、Anthropic のスキル、Anthropic のサーフェスに縛られていました。チェックアウトもなく、セルフホストもなく、Vercel デプロイもなく、自前のエージェントへの差し替えもできません。

Open Design (OD) はそのオープンソースの代替ツールです。同じループ、同じアーティファクトファーストのメンタルモデル、ロックインは一切なし:

🤖 エージェントネイティブ、モデル非依存。 私たちはエージェントを同梱しません。すでにあなたの PATH にある claude / codex / cursor-agent / copilot / hermes / kimi がデザインエンジンです。ワンクリックで差し替えられます。
🧠 デフォルトでブランドグレード。 すべてのレンダリングはアクティブな DESIGN.md を読み取ります——パレット、タイポグラフィ、スペーシング、モーション、ボイス、アンチパターンをカバーする 9 セクションのスキーマです。150 のシステムがリポジトリに同梱されています（Linear、Stripe、Vercel、Airbnb、Apple、Tesla、Notion、Anthropic、Cursor、Supabase、Figma…）。フォルダをドロップすれば、ピッカーがそれを見つけます。
🖥️ ローカルファースト、あらゆるレイヤーで BYOK。 ネイティブデスクトップアプリはクラウドへの往復なしにローカルファーストのままです。デーモンデータパスを説明する前に、ルートの AGENTS.md にある Daemon data directory contract を必ず読んでください。
🌍 3 つの平面で組み合わせ可能。 プラグインは実行可能なワークフローを運び · スキルはエージェントのデザインの審美眼を運び · デザインシステムはブランドを運びます。これら 3 つはすべて、誰もが作成・バージョン管理・公開できるプレーンファイルです。
🔁 既存のコードベースをリフレッシュ。 git リポジトリ + DESIGN.md をエージェントに渡せば、あなたの実際のコンポーネントをブランド仕様にリファクタリングします。専用のプラグインが Figma / Pencil のワークフローを React / Next.js / Vue のコードへと移行します。
🔒 信念としてのプライバシー。 すべてがあなたのデータのある場所——あなたのラップトップ、チームのサーバー、Vercel プロジェクト——で動作します。ネットワークが必要なときも、BYOK プロキシは SSRF からガードされています。

比較

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
オープンソース	❌	❌	❌	✅ Apache-2.0
セルフホスト／デスクトップ	❌	❌	❌	✅ macOS + Windows + Vercel
エージェントネイティブ（あなたの CLI で動作）	Anthropic のみ	❌	クラウドエージェントのみ	✅ 21 CLI + BYOK
ブランドグレードの `DESIGN.md`	プロプライエタリ	テーマ JSON	限定的なトークン	✅ 150 システム同梱
スキル／プラグイン／テンプレート	クローズド	プラグインストア	クローズド	✅ 100 種類以上のスキル · 261 プラグイン
HyperFrames（HTML→MP4）	❌	❌	❌	✅ 第一級対応
既存リポジトリをブランドにリフレッシュ	❌	❌	❌	✅ エージェント + `DESIGN.md` 経由
最低限の課金	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · 任意の互換エンドポイント

クイックスタート

🖥️ デスクトップアプリをダウンロード（推奨——設定ゼロ）

Open Design を使う最も速い方法。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 種類以上のスキルと 150 のデザインシステムを読み込み、エントリービューでブリーフを入力できるようにします。

🤖 コーディングエージェントにインストール（UI なし）

GUI を一度も開くことなく Open Design を使えます——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 | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

そして、エージェントの内部で:

> Use open-design to generate a landing page with the Linear design system

エージェントは skills/ を読み取り、適切な SKILL.md を選び、あなたが指定した DESIGN.md をバインドし、http://localhost:7456 でプレビューできる <artifact> を発行します。

🐳 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 テンプレートは、公開済みの Open Design 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

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 に体系化します。
エージェントが最初の <artifact> を発行します。 プラグイン + スキル + DESIGN.md がバインドされます。それはサンドボックス化された iframe にストリーミングされ、その場で編集可能です——「ゼロから再生成」ではありません。
エンジニアリングへ引き渡します。 アーティファクトは本物の HTML/CSS です——Cursor、Codex、または Claude Code にドロップして、コードとして開発を続けられます。あるいは PPTX / PDF / MP4 をマーケティングへ直接エクスポートできます。
Open Design は使うほど賢くなります。 あなたのスクリーンショット、フォント、パレット、確定したアーティファクトは、次回のセッションのデフォルトとして蓄積されます。やり直しは減り、ブレも減ります。

コーディングエージェントから Open Design を使う

Open Design は stdio MCP サーバーとエージェントごとのインストールスクリプトを提供します。別のリポジトリにある MCP 互換のエージェントは、あなたのローカルの Open Design プロジェクトからファイル——トークン CSS、JSX コンポーネント、エントリー HTML——を、名前で問い合わせ可能な構造化 API として直接読み取れます。エージェントは常に、古いエクスポートではなくライブのファイルを見ます。

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

なぜ 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/ 配下のフォルダで、Claude Code の SKILL.md 規約に従い、od: フロントマター（mode、platform、scenario、preview.type、design_system.requires、default_for、fidelity、example_prompt）で拡張されています。フォルダをドロップしてデーモンを再起動すれば、ピッカーに表示されます。

2 つのモードがカタログの軸になります: prototype（ウェブ／モバイル／デスクトップの単一ページアーティファクト）と deck（横スワイプのプレゼンテーション）。さらに image、video、audio、template、design-system、utility の各モードもあります。scenario フィールドは、それらを対象者ごとにグループ化します: design · marketing · operation · engineering · product · finance · hr · sale · personal。

スキル	モード	シナリオ	生成するもの
`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。

デザインシステム

150 のブランドグレード DESIGN.md システムがリポジトリに同梱されています——それぞれが 9 セクションのスキーマ（カラー、タイポグラフィ、スペーシング、レイアウト、コンポーネント、モーション、ボイス、ブランド、アンチパターン）を持つ単一の Markdown ファイルで、VoltAgent/awesome-design-md からのものです。システムを切り替える → 次のレンダリングは新しいトークンを使います。テーマ JSON は不要です。

完全なカタログ（クリックで展開）

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。

プラグイン

261 の公式プラグインが plugins/_official/ にあります。各プラグインはポータブルなエージェントスキルのフォルダです——SKILL.md（Agent Skills をサポートする任意のエージェントが読める）に加え、Open Design にマーケットプレイスのメタデータ、入力、プレビュー、パイプライン、機能宣言を与える任意の open-design.json マニフェストを備えています。カテゴリーに直接ジャンプ:

カテゴリー	数	内容
`scenarios/`	11	完全なデザインシナリオ — `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`
`image-templates/`	45	ワンショットの画像プロンプト — エディトリアル、シネマティック、プロダクト、ポートレート
`video-templates/`	50	HyperFrames / Seedance / Veo のモーションテンプレート
`design-systems/`	142	プラグインとしてラップされたブランド `DESIGN.md`
`atoms/`	13	再利用可能な UI フラグメント（ボタン、ヒーロー、KPI カード）
`examples/`	140	リミックス可能なリファレンス出力

コミュニティプラグインは 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 を通じて自動化にパイプできます。

プラグインを作る

プラグインは 最低限 SKILL.md が 1 つあれば成り立ちます。Open Design のマーケットプレイスに掲載するには open-design.json を追加します:

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

open-design.json の主要フィールド: specVersion（現在は 1.0.0）、name（安定した ID）、version（semver）、compat.agentSkills[].path（./SKILL.md を指す）、od.kind（skill / scenario / atom / bundle）、od.taskKind（new-generation / figma-migration / code-migration / tune-collab）、od.mode（出力サーフェス、例: prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario）、od.capabilities[]（最小限を宣言する——制限付きインストールはデフォルトで prompt:inject のみを付与します）、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/（サードパーティプラグイン）にドロップするか、または——Open Design に同梱して提供するには——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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

レイヤー	スタック
フロントエンド	Next.js 16 App Router + React 18 + TypeScript
デーモン	Node 24 · Express · SSE ストリーミング · `better-sqlite3`
ストレージ	デーモンのストレージパスを変更または文書化する前に、ルートの `AGENTS.md` にある Daemon data directory contract を必ず読んでください。この README でそれを繰り返してはいけません。
プレビュー	サンドボックス化された `srcdoc` iframe + ストリーミング `<artifact>` パーサー
エクスポート	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。

ロードマップ

段階的なデリバリー → docs/roadmap.md。

コミュニティ

すべてのチャネルの裏側には、本物の人がいます。

💬 Discord — 日々のチャット、プラグインの共有、質問 → discord.gg/mHAjSMV6gz
🐦 X / Twitter — リリースノート、マイルストーン、舞台裏 → @OpenDesignHQ
🗣️ GitHub Discussions — 深い Q&A、RFC、「成果を見せて」 → Discussions
🐛 GitHub Issues — バグ報告、機能リクエスト → Issues

good-first-issue と help-wanted のラベルが、最も入りやすい入口です。

貢献

Open Design が動き続けるのは、貢献者——デザイナー、エンジニア、プロンプトの作者——が現れ続けるからです。最もよく使われるスキル、デザインシステム、プラグインの多くは、コアチームの外の人々によって書かれました。

🎯 どこから始めるか（最大のレバレッジ、最小の変更）

出したいもの…	方法	場所
新しいスキル	`SKILL.md` + `assets/` + `references/` を備えたフォルダをドロップ	`skills/` · 仕様は `docs/skills-protocol.md`
新しいデザインシステム	9 セクションのスキーマを使った `DESIGN.md` をドロップ	`design-systems/<brand>/`
新しいプラグイン	カテゴリーフォルダの下に `open-design.json` + マニフェストをドロップ	`plugins/community/` · 仕様は `plugins/spec/SPEC.md` · エージェント開発ガイドは `plugins/spec/AGENT-DEVELOPMENT.md`
新しいコーディングエージェント CLI をサポート	アダプターエントリー 1 つ + ストリームパーサー	`apps/daemon/src/agents.ts`
バグ修正や 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）。

🏅 Open Design Fellow プログラム

私たちは世界中で Open Design Fellow を募集しています——Fellow はコアチームとともにプロダクトを形づくり、各地域で Open Design を公式に代表し、資金面のサポート（$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` スキーマと 70 のプロダクトシステムの出典。
`bergside/awesome-design-skills`	`design-systems/` の下に追加された 57 のデザインスキルの出典。
`heygen-com/hyperframes`	HTML→MP4 のモーショングラフィックスフレームワークで、Open Design に第一級の `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）を保持しています。

FilesExpand file tree

README.ja-JP.md

Latest commit

History