open-design/README.ja-JP.md

Open Design

Claude Design のオープンソース代替。 ローカルファースト、Vercel デプロイ可能、あらゆるレイヤーで BYOK（Bring Your Own Key） — PATH 上で自動検出される 10 種類の coding-agent CLI（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、GitHub Copilot CLI、Hermes、Kimi、Pi）がデザインエンジンとなり、31 個の組み合わせ可能な Skill と 72 種のブランドグレード Design System で駆動されます。CLI が未インストールでも、OpenAI 互換の BYOK プロキシ /api/proxy/stream で同じループを spawn なしで実行できます。

English · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська

---

なぜこれを作ったのか

Anthropic の Claude Design（2026-04-17 リリース、Opus 4.7 搭載）は、LLM が文章を書くのをやめてデザイン成果物を直接出力し始めたらどうなるかを世に示しました。瞬く間にバズり — そしてクローズドソース、有料限定、クラウド限定、Anthropic のモデルと Anthropic の Skill に縛られたままでした。checkout もセルフホストも Vercel デプロイも、エージェントの差し替えもできません。

Open Design（OD）はそのオープンソース代替です。 同じループ、同じ「artifact-first」のメンタルモデル、しかしロックインなし。私たちはエージェントを同梱しません — あなたのノートパソコンにある最強の coding agent がすでにインストール済みです。それを Skill 駆動のデザインワークフローに接続するのが私たちの仕事です。ローカルでは pnpm tools-dev で完結し、Web レイヤーは Vercel にデプロイ可能で、すべてのレイヤーが BYOK です。

「雑誌風のシードラウンド pitch deck を作って」と入力してください。モデルが最初の 1 ピクセルを描く前に、初期化質問フォームがポップアップします。エージェントは 5 つの厳選されたビジュアルディレクションから 1 つを選びます。ライブの TodoWrite 計画カードが UI にストリーミングされます。Daemon がディスク上に実際のプロジェクトフォルダを構築し、seed テンプレート、レイアウトライブラリ、セルフチェック用チェックリストを配置します。エージェントはそれらをpre-flight で強制的に読み取り、自身の出力に対して五次元評価を実行し、数秒後に <artifact> を 1 つ出力してサンドボックス iframe にレンダリングします。

これは「AI がデザインを試みる」ではありません。プロンプトスタックによって、使えるファイルシステムと、決定論的なカラーパレットライブラリと、チェックリスト文化を持つシニアデザイナーのように振る舞うよう訓練された AI です — まさに Claude Design が設定した水準そのもの、ただしオープンで、あなたのものです。

OD は 4 つのオープンソースプロジェクトの上に立っています：

• alchaincyf/huashu-design（花叔の画術） — デザイン哲学の羅針盤。Junior-Designer ワークフロー、5 ステップのブランドアセットプロトコル、anti-AI-slop チェックリスト、五次元セルフ評価、そしてディレクションピッカーの背後にある「5 流派 × 20 のデザイン哲学」のアイデア — すべて apps/web/src/prompts/discovery.ts に蒸留されています。
• op7418/guizang-ppt-skill（歸藏の雑誌風 PPT Skill） — Deck モード。skills/guizang-ppt/ 以下にオリジナルのまま同梱、元の LICENSE を保持。雑誌レイアウト、WebGL hero、P0/P1/P2 チェックリスト。
• OpenCoworkAI/open-codesign — UX の北極星であり、最も近い同類プロジェクト。初のオープンソース Claude-Design 代替。ストリーミング artifact ループ、サンドボックス iframe プレビュー（React 18 + Babel 同梱）、ライブエージェントパネル（todo + tool calls + 中断可能な生成）、5 種類のエクスポート形式リスト（HTML / PDF / PPTX / ZIP / Markdown）を借用。形態では意図的に分岐しています — 彼らは pi-ai を同梱するデスクトップ Electron アプリ、私たちは既存の CLI に委任する Web アプリ + ローカル daemon です。
• multica-ai/multica — Daemon とランタイムのアーキテクチャ。PATH スキャンによるエージェント検出、ローカル daemon を唯一の特権プロセスとする思想、agent-as-teammate の世界観。

概要

	提供される機能
Coding-agent CLI（10 種類）	Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes（ACP）· Kimi CLI（ACP）· Pi（RPC）— PATH 上で自動検出、ピッカーでワンクリック切り替え
BYOK フォールバック	OpenAI 互換プロキシ /api/proxy/stream — baseUrl + apiKey + model を貼れば、任意のベンダー（Anthropic-via-OpenAI、DeepSeek、Groq、MiMo、OpenRouter、セルフホスト vLLM、その他の OpenAI 互換プロバイダ）がエンジンになります。daemon 側で loopback / link-local / RFC1918 を拒否し SSRF を防御。
組み込み Design System	72 種 — 2 つの手書きスターター + awesome-design-md からインポートした 70 のプロダクトシステム（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小紅書…）
組み込み Skill	31 個 — prototype モード 27 個（web-prototype、saas-landing、dashboard、mobile-app、gamified-app、social-carousel、magazine-poster、dating-web、sprite-animation、motion-frames、critique、tweaks、wireframe-sketch、pm-spec、eng-runbook、finance-report、hr-onboarding、invoice、kanban-board、team-okrs…）+ deck モード 4 個（guizang-ppt · simple-deck · replit-deck · weekly-update）。ピッカーは scenario でグループ化：design / marketing / operation / engineering / product / finance / hr / sale / personal。
メディア生成	画像 · 動画 · 音声サーフェスがデザインループと並走。gpt-image-2（Azure / OpenAI）でポスター・アバター・インフォグラフィック・イラスト都市マップ · Seedance 2.0（ByteDance）で 15 秒のシネマティック text-to-video / image-to-video · HyperFrames（heygen-com/hyperframes）で HTML→MP4 のモーショングラフィック（プロダクトリビール、キネティックタイポグラフィ、データチャート、ソーシャルオーバーレイ、ロゴアウトロ）。93 件のすぐ複製できる prompt ギャラリー — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames、すべて prompt-templates/ にプレビュー画像と出典付きで配置。Chat の入口はコードと同じ；実体の .mp4 / .png がプロジェクトワークスペースに chip として落ちます。
ビジュアルディレクション	5 つの厳選流派（Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental）— 各々に OKLch パレット + フォントスタック付き（apps/web/src/prompts/directions.ts）
デバイスフレーム	iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — ピクセル単位で正確、Skill 間で共有、assets/frames/ に集約
エージェントランタイム	ローカル daemon がプロジェクトフォルダ内で CLI を spawn — エージェントは実際のディスク上で Read / Write / Bash / WebFetch を使用。各 adapter に Windows ENAMETOOLONG フォールバック（stdin / 一時 prompt ファイル）あり
インポート	Claude Design のエクスポート ZIP をウェルカムダイアログにドロップ — POST /api/import/claude-design が実プロジェクトとして展開し、Anthropic の中断箇所からエージェントが編集を続行
永続化	SQLite（.od/app.sqlite）：projects · conversations · messages · tabs · ユーザー templates。翌日開いても、todo カードと開いていたファイルはそのまま。
ライフサイクル	唯一のエントリポイント pnpm tools-dev（start / stop / run / status / logs / inspect / check）— 型付き sidecar stamp で daemon + web（+ desktop）を起動
デスクトップ	オプションの Electron シェル：サンドボックスレンダラ + sidecar IPC（STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN）— 同じチャネルで tools-dev inspect desktop screenshot を駆動、E2E テスト対応
デプロイ先	ローカル（pnpm tools-dev）· Vercel Web レイヤー · パッケージ版 Electron（apps/packaged/ プレースホルダー）
ライセンス	Apache-2.0

デモ

エントリビュー — Skill を選び、Design System を選び、要件を入力。プロトタイプ、デッキ、モバイルアプリ、ダッシュボード、エディトリアルページ — すべて同じ画面で。	初期化質問フォーム — モデルが 1 ピクセルも描く前に、OD が要件をロック：surface、ターゲット、トーン、ブランドコンテキスト、規模。30 秒のラジオ選択が 30 分の手戻りを消し去ります。
ディレクションピッカー — ユーザーにブランドコンテキストがない場合、エージェントが 5 つの厳選ディレクション（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）を提示する 2 つ目のフォームを表示。ラジオ 1 クリックでパレット + フォントスタックが確定、フリースタイルの余地なし。	ライブ todo 進捗 — エージェントの計画がライブカードとして UI に流れ込みます。in_progress → completed がリアルタイムで更新。ユーザーは最小コストで途中介入・軌道修正が可能。
サンドボックスプレビュー — すべての <artifact> がクリーンな srcdoc iframe でレンダリングされます。ファイルワークスペースでその場編集可能。HTML / PDF / ZIP でダウンロード。	72 種 Design System ライブラリ — 各プロダクトシステムが 4 色のカラーカードを表示。クリックで完全な DESIGN.md、スウォッチグリッド、ライブショーケースを閲覧。
Deck モード（guizang-ppt） — 同梱の guizang-ppt-skill をそのまま統合。雑誌レイアウト、WebGL hero 背景、単一ファイル HTML 出力、PDF エクスポート対応。	モバイルプロトタイプ — ピクセル単位で正確な iPhone 15 Pro クローム（Dynamic Island、ステータスバー SVG、ホームインジケータ）。マルチスクリーンプロトタイプは /frames/ の共有アセットを再利用するため、エージェントが端末を描き直す必要は一切ありません。

組み込み Skill

31 個の Skill が同梱されています。 各 Skill は skills/ 配下のフォルダで、Claude Code の SKILL.md 規約に従いつつ、daemon がそのままパースする OD 拡張 od: frontmatter を持ちます — mode、platform、scenario、preview.type、design_system.requires、default_for、featured、fidelity、speaker_notes、animations、example_prompt（apps/daemon/src/skills.ts）。

2 つのトップレベル mode がカタログを構成します：prototype（27 個 — 雑誌風ランディングからモバイル画面、PM 仕様書まで、単一ページ artifact としてレンダリングされるすべて）と deck（4 個 — デッキフレームワーク付きの横スワイプ型プレゼンテーション）。scenario フィールドがピッカーのグループ化に使われます：design · marketing · operation · engineering · product · finance · hr · sale · personal。

ショーケース

ビジュアル的に最も特徴的で、最初に試す Skill として最適なものです。各 Skill には実際の example.html が付属しており、リポジトリから直接開いてエージェントの出力を確認できます — 認証もセットアップも不要。

dating-web · prototype コンシューマー向けマッチングダッシュボード — 左サイドバー、ティッカーバー、KPI、30 日間の相互マッチチャート、エディトリアルタイポグラフィ。	digital-eguide · template 2 見開きのデジタル e-guide — 表紙（タイトル、著者、TOC ティーザー）+ レッスン見開き（プルクオート + ステップリスト）。クリエイター / ライフスタイルトーン。
email-marketing · prototype ブランド新製品発売 HTML メール — ワードマーク、hero 画像、見出しロックアップ、CTA、スペックグリッド。中央揃え単一カラム + テーブルフォールバックでメールクライアント安全。	gamified-app · prototype ダークステージ上の 3 画面ゲーミフィケーションモバイルアプリプロトタイプ — カバー / 今日のクエスト（XP リボン + レベルバー）/ クエスト詳細。
mobile-onboarding · prototype 3 画面モバイルオンボーディングフロー — スプラッシュ、バリュープロポジション、サインイン。ステータスバー、スワイプドット、プライマリ CTA。	motion-frames · prototype ループ CSS アニメーション付きの単一フレームモーションデザイン hero — 回転タイプリング、地球、タイマー。HyperFrames 等へのハンドオフ対応。
social-carousel · prototype 1080×1080 の 3 枚 SNS カルーセル — シネマティックなパネル、シリーズを横断する大見出し、ブランドマーク、ループインジケータ。	sprite-animation · prototype ピクセル / 8-bit アニメーション解説スライド — クリーム地フルブリード、アニメーションピクセルマスコット、キネティックな日本語ディスプレイタイプ、ループ CSS keyframes。

デザイン & マーケティング系（prototype モード）

Skill	プラットフォーム	シナリオ	出力
web-prototype	デスクトップ	design	単一ページ HTML — ランディング、マーケティング、hero（prototype のデフォルト）
saas-landing	デスクトップ	marketing	hero / features / pricing / CTA マーケティングレイアウト
dashboard	デスクトップ	operation	サイドバー + データ密度の高い管理画面
pricing-page	デスクトップ	sale	単独料金ページ + 比較表
docs-page	デスクトップ	engineering	3 カラムドキュメントレイアウト
blog-post	デスクトップ	marketing	エディトリアル長文
mobile-app	モバイル	design	iPhone 15 Pro / Pixel フレーム付きアプリ画面
mobile-onboarding	モバイル	design	マルチスクリーンモバイルオンボーディング（スプラッシュ · バリュープロポジション · サインイン）
gamified-app	モバイル	personal	3 画面ゲーミフィケーションアプリプロトタイプ
email-marketing	デスクトップ	marketing	ブランド新製品発売メール（テーブルフォールバック対応）
social-carousel	デスクトップ	marketing	1080×1080 3 枚 SNS カルーセル
magazine-poster	デスクトップ	marketing	単一ページ雑誌風ポスター
motion-frames	デスクトップ	marketing	CSS ループアニメーション付きモーション hero
sprite-animation	デスクトップ	marketing	ピクセル / 8-bit アニメーション解説
dating-web	デスクトップ	personal	コンシューマー向けマッチングダッシュボード
digital-eguide	デスクトップ	marketing	2 見開きデジタル e-guide（表紙 + レッスン見開き）
wireframe-sketch	デスクトップ	design	手描きスケッチ風ワイヤーフレーム — 「まず目に見えるものを早く出す」初期パス
critique	デスクトップ	design	五次元セルフ評価スコアシート（Philosophy · Hierarchy · Detail · Function · Innovation）
tweaks	デスクトップ	design	AI が出力する tweaks パネル — モデル自身が調整すべきパラメータを提示

Deck 系（deck モード）

Skill	デフォルト	出力
guizang-ppt	deck のデフォルト	雑誌風 Web PPT — op7418/guizang-ppt-skill からそのまま同梱、元の LICENSE 保持
simple-deck	—	ミニマル横スワイプデッキ
replit-deck	—	プロダクトウォークスルーデッキ（Replit スタイル）
weekly-update	—	チーム週次報告デッキ（進捗 · ブロッカー · 次のステップ）

ドキュメント & 業務系（prototype モード、ドキュメント系シナリオ）

Skill	シナリオ	出力
pm-spec	product	PM 仕様書 + 目次 + 意思決定ログ
team-okrs	product	OKR スコアシート
meeting-notes	operation	会議議事録
kanban-board	operation	カンバンボードスナップショット
eng-runbook	engineering	インシデント Runbook
finance-report	finance	経営層向け財務サマリー
invoice	finance	単一ページ請求書
hr-onboarding	hr	職位オンボーディング計画

Skill の追加はフォルダ 1 つで完了します。拡張 frontmatter の詳細は docs/skills-protocol.md を参照し、既存の Skill を fork して daemon を再起動すればピッカーに表示されます。カタログエンドポイントは GET /api/skills、個別 Skill の seed 組み立て（テンプレート + 副ファイル）は GET /api/skills/:id/example です。

6 つの基本設計思想

1 · エージェントは同梱しない — あなたのもので十分

Daemon は起動時に PATH を走査し、claude、codex、cursor-agent、gemini、opencode、qwen、copilot、hermes、kimi、pi を検索します。見つかったものすべてが候補デザインエンジンになります — stdio 経由で CLI ごとに 1 つの adapter を持ち、モデルピッカーからワンクリックで切り替え可能。multica と cc-switch に着想を得ています。CLI が 1 つもない？POST /api/proxy/stream が spawn を除いた同じパイプラインです — 任意の OpenAI 互換 baseUrl + apiKey を貼れば、daemon が SSE チャンクをブラウザに転送し、loopback / link-local / RFC1918 はエッジで拒否されます。

2 · Skill はファイルであり、プラグインではない

Claude Code の SKILL.md 規約に従い、各 Skill は SKILL.md + assets/ + references/ です。skills/ にフォルダを入れて daemon を再起動すれば、ピッカーに表示されます。同梱の magazine-web-ppt は op7418/guizang-ppt-skill をそのまま同梱 — 元の LICENSE 保持、元の帰属表示保持。

3 · Design System は移植可能な Markdown であり、theme JSON ではない

VoltAgent/awesome-design-md の 9 セクション DESIGN.md スキーマ — color、typography、spacing、layout、components、motion、voice、brand、anti-patterns。すべての artifact はアクティブなシステムからトークンを読み取ります。システムを切り替えれば、次のレンダリングは新しいトークンを使用します。ドロップダウンには Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic、Cursor、Supabase、Figma、Resend、Raycast、Lovable、Cohere、Mistral、ElevenLabs、X.AI、Spotify、Webflow、Sanity、PostHog、Sentry、MongoDB、ClickHouse、Cal、Replicate、Clay、Composio、小紅書… — 全 72 種が揃っています。

4 · 初期化質問フォームが手戻りの 80% を解消

OD のプロンプトスタックは RULE 1 をハードコードしています：新しいデザイン要件はすべて <question-form id="discovery"> で始まり、コードではありません。Surface · ターゲット · トーン · ブランドコンテキスト · 規模 · 制約。長い要件でもデザイン上の判断は残ります — ビジュアルトーン、カラースタンス、スケール — まさにフォームが 30 秒のラジオ選択で確定させるポイントです。方向を間違えたコストは 1 往復のチャットであり、完成済みのデッキではありません。

これは huashu-design から蒸留された Junior-Designer モードです：着手前に質問を一括で済ませ、早い段階で何か目に見えるもの（グレーブロックのワイヤーフレームでも可）を提示し、ユーザーが最小コストで軌道修正できるようにします。ブランドアセットプロトコル（特定 · ダウンロード · grep hex · brand-spec.md 作成 · 復唱）と組み合わせることで、出力が「AI のフリースタイル」から「資料を見てから描くデザイナー」に変わる最大の要因です。

5 · Daemon がエージェントをあなたのノートパソコン上に感じさせる — 実際にそこにいるから

Daemon は CLI を spawn する際、cwd を .od/projects/<id>/ 配下のプロジェクト artifact フォルダに設定します。エージェントが使う Read / Write / Bash / WebFetch は実際のファイルシステムに作用する本物のツールです。Skill の assets/template.html を Read し、CSS から grep で hex 値を取得し、brand-spec.md を作成し、生成画像を配置し、.pptx / .zip / .pdf を出力できます — これらのファイルはターン終了時にファイルワークスペース上のダウンロードチップとして表示されます。セッション、会話、メッセージ、タブはすべてローカル SQLite に永続化されます — 翌日プロジェクトを開けば、エージェントの todo カードは昨日閉じた場所にそのまま残っています。

6 · プロンプトスタック自体がプロダクト

送信時に組み立てられるのは「system + user」ではありません。以下の構成です：

DISCOVERY ディレクティブ     （turn-1 フォーム、turn-2 ブランド分岐、TodoWrite、五次元評価）
  + アイデンティティ憲章      （OFFICIAL_DESIGNER_PROMPT、anti-AI-slop、Junior Designer モード）
  + アクティブな DESIGN.md    （72 種から選択）
  + アクティブな SKILL.md     （31 個から選択）
  + プロジェクトメタデータ     （kind、fidelity、speakerNotes、animations、インスピレーション system id）
  + Skill 副ファイル         （自動注入 pre-flight：assets/template.html + references/*.md を先読み）
  + （deck kind かつ Skill seed なし時） DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）

すべてのレイヤーが組み合わせ可能で、すべてのレイヤーが編集可能なファイルです。実際の契約は apps/web/src/prompts/system.ts と apps/web/src/prompts/discovery.ts で確認できます。

アーキテクチャ

┌───────────────── ブラウザ（Next.js 16）─────────────────────────┐
│  chat · ファイルワークスペース · iframe プレビュー · 設定 · インポート │
└──────────────┬──────────────────────────────────┬──────────────┘
               │ /api/*（dev は rewrites 経由）     │
               ▼                                   ▼
   ┌──────────────────────────────────┐  /api/proxy/stream (SSE)
   │  ローカル daemon（Express + SQLite）│  ─→ 任意の OpenAI 互換
   │                                   │      エンドポイント（BYOK）
   │  /api/agents         /api/skills  │      SSRF 防御付き
   │  /api/design-systems /api/projects/…
   │  /api/chat (SSE)     /api/proxy/stream (SSE)
   │  /api/templates      /api/import/claude-design
   │  /api/artifacts/save /api/artifacts/lint
   │  /api/upload         /api/projects/:id/files…
   │  /artifacts (静的)   /frames (静的)
   │
   │  オプション sidecar IPC：/tmp/open-design/ipc/<ns>/<app>.sock
   │  （STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN）
   └─────────┬───────────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · gemini · opencode · cursor-agent · qwen        │
   │  copilot · hermes (ACP) · kimi (ACP) · pi (RPC)                  │
   │  SKILL.md + DESIGN.md を読み、artifact をディスクに書き出す         │
   └──────────────────────────────────────────────────────────────────┘

レイヤー	技術スタック
フロントエンド	Next.js 16 App Router + React 18 + TypeScript、Vercel デプロイ可能
Daemon	Node 24 · Express · SSE ストリーミング · better-sqlite3；テーブル：projects · conversations · messages · tabs · templates
エージェント転送	child_process.spawn；Claude Code は claude-stream-json、Copilot は copilot-stream-json、Codex / Gemini / OpenCode / Cursor Agent は json-event-stream（CLI ごとのパーサー）、Hermes / Kimi は acp-json-rpc（Agent Client Protocol）、Pi は pi-rpc（stdio JSON-RPC）、Qwen Code は plain
BYOK プロキシ	POST /api/proxy/stream → OpenAI 互換 /v1/chat/completions SSE パススルー；daemon エッジで loopback / link-local / RFC1918 を拒否
ストレージ	プレーンファイル .od/projects/<id>/ + SQLite .od/app.sqlite（gitignore 済み、daemon 起動時に自動作成）。OD_DATA_DIR でルートを変更可能（テスト分離用）
プレビュー	サンドボックス iframe（srcdoc）+ Skill ごとの <artifact> パーサー（apps/web/src/artifacts/parser.ts）
エクスポート	HTML（インラインアセット）· PDF（ブラウザ印刷、デッキ対応）· PPTX（エージェント駆動、Skill 経由）· ZIP（archiver）· Markdown
ライフサイクル	pnpm tools-dev start | stop | run | status | logs | inspect | check；ポートは --daemon-port / --web-port、ネームスペースは --namespace
デスクトップ（オプション）	Electron シェル — sidecar IPC 経由で Web URL を取得、ポート推測なし；同じチャネル（STATUS/EVAL/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN）で tools-dev inspect desktop … を駆動し E2E 対応

クイックスタート

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # 10.33.2 と表示されるはず
pnpm install
pnpm tools-dev run web
# tools-dev が出力した Web URL を開く

環境要件：Node ~24、pnpm 10.33.x。nvm / fnm はあくまでオプションのヘルパーです。使用する場合は pnpm install の前に nvm install 24 && nvm use 24 または fnm install 24 && fnm use 24 を実行してください。

デスクトップ / バックグラウンド起動、固定ポート再起動、メディア生成ディスパッチャの確認（OD_BIN、OD_DAEMON_URL、apps/daemon/dist/cli.js）は QUICKSTART.md を参照。

初回ロード時：

1. PATH 上のエージェント CLI を検出し、自動的に 1 つを選択。
2. 31 個の Skill + 72 種の Design System をロード。
3. ウェルカムダイアログが表示され、Anthropic キーの貼り付けを促す（BYOK フォールバックパスのみ必要）。
4. ./.od/ を自動作成 — SQLite プロジェクト DB、プロジェクトごとの artifact、保存されたレンダリングを格納するローカルランタイムフォルダ。od init ステップは不要、daemon が起動時に必要なディレクトリをすべて mkdir します。

プロンプトを入力し、Send を押し、質問フォームの到着を確認、記入し、todo カードのストリーミングを見守り、artifact のレンダリングを確認。Save to disk をクリックするか、プロジェクト ZIP としてダウンロード。

初回起動時の状態（./.od/）

Daemon はリポジトリルートに 1 つの隠しフォルダを管理します。中身はすべて gitignore 済みのマシンローカルデータです — 絶対に commit しないでください。

.od/
├── app.sqlite                 ← プロジェクト · 会話 · メッセージ · 開いているタブ
├── artifacts/                 ← Save to disk の一回限りレンダリング（タイムスタンプ付き）
└── projects/<id>/             ← プロジェクトごとの作業ディレクトリ（エージェントの cwd）

やりたいこと	方法
中身を確認する	ls -la .od && sqlite3 .od/app.sqlite '.tables'
完全にリセット	pnpm tools-dev stop → rm -rf .od → pnpm tools-dev run web を再実行
別の場所に移動	未対応 — パスはリポジトリルートからの相対パスで固定

完全なファイルマップ、スクリプト、トラブルシューティング → QUICKSTART.md。

リポジトリ構成

open-design/
├── README.md                      ← 英語
├── README.zh-CN.md                ← 简体中文
├── README.ja-JP.md                ← 本ファイル
├── QUICKSTART.md                  ← 実行 / ビルド / デプロイガイド
├── package.json                   ← 単一 bin: od
│
├── apps/
│   ├── daemon/                    ← Node + Express、唯一のサーバー
│   │   ├── src/                   ← TypeScript daemon ソース
│   │   │   ├── cli.ts             ← `od` bin ソース、dist/cli.js にコンパイル
│   │   │   ├── server.ts          ← /api/* ルート（projects、chat、files、exports）
│   │   │   ├── agents.ts          ← PATH スキャナ + CLI ごとの argv ビルダー
│   │   │   ├── claude-stream.ts   ← Claude Code stdout ストリーミング JSON パーサー
│   │   │   ├── skills.ts          ← SKILL.md frontmatter ローダー
│   │   │   └── db.ts              ← SQLite スキーマ（projects/messages/templates/tabs）
│   │   ├── sidecar/               ← tools-dev daemon sidecar ラッパー
│   │   └── tests/                 ← daemon パッケージテスト
│   │
│   └── web/                       ← Next.js 16 App Router + React クライアント
│       ├── app/                   ← App Router エントリポイント
│       ├── next.config.ts         ← dev rewrites + 本番 out/ 静的エクスポート
│       └── src/                   ← React + TS クライアントモジュール
│           ├── App.tsx            ← ルーティング、ブートストラップ、設定
│           ├── components/        ← chat、composer、picker、preview、sketch…
│           ├── prompts/           ← system、discovery、directions、deck framework
│           ├── artifacts/         ← ストリーミング <artifact> パーサー + マニフェスト
│           ├── runtime/           ← iframe srcdoc、markdown、エクスポートヘルパー
│           ├── providers/         ← daemon SSE + BYOK API トランスポート
│           └── state/             ← localStorage + daemon バックドプロジェクト状態
│
├── e2e/                           ← Playwright UI + 外部統合/Vitest ハーネス
│
├── packages/
│   ├── contracts/                 ← web/daemon 共有アプリ contracts
│   ├── sidecar-proto/             ← Open Design sidecar プロトコル contract
│   ├── sidecar/                   ← 汎用 sidecar ランタイムプリミティブ
│   └── platform/                  ← 汎用 process/platform プリミティブ
│
├── skills/                        ← 31 個の SKILL.md Skill バンドル（27 prototype + 4 deck）
│   ├── web-prototype/             ← prototype のデフォルト
│   ├── saas-landing/  dashboard/  pricing-page/  docs-page/  blog-post/
│   ├── mobile-app/  mobile-onboarding/  gamified-app/
│   ├── email-marketing/  social-carousel/  magazine-poster/
│   ├── motion-frames/  sprite-animation/  digital-eguide/  dating-web/
│   ├── critique/  tweaks/  wireframe-sketch/
│   ├── pm-spec/  team-okrs/  meeting-notes/  kanban-board/
│   ├── eng-runbook/  finance-report/  invoice/  hr-onboarding/
│   ├── simple-deck/  replit-deck/  weekly-update/   ← deck モード
│   └── guizang-ppt/               ← 同梱 magazine-web-ppt（deck のデフォルト）
│       ├── SKILL.md
│       ├── assets/template.html   ← seed
│       └── references/{themes,layouts,components,checklist}.md
│
├── design-systems/                ← 72 種の DESIGN.md
│   ├── default/                   ← Neutral Modern（スターター）
│   ├── warm-editorial/            ← Warm Editorial（スターター）
│   ├── linear-app/  vercel/  stripe/  airbnb/  notion/  cursor/  apple/  …
│   └── README.md
│
├── assets/
│   └── frames/                    ← Skill 間共有のデバイスフレーム
│       ├── iphone-15-pro.html
│       ├── android-pixel.html
│       ├── ipad-pro.html
│       ├── macbook.html
│       └── browser-chrome.html
│
├── templates/
│   └── deck-framework.html        ← デッキベースライン（nav / counter / print）
│
├── scripts/
│   └── sync-design-systems.ts     ← 上流 awesome-design-md tarball からの再インポート
│
├── docs/
│   ├── spec.md                    ← プロダクト定義、シナリオ、差別化
│   ├── architecture.md            ← トポロジ、データフロー、コンポーネント
│   ├── skills-protocol.md         ← SKILL.md 拡張 od: frontmatter
│   ├── agent-adapters.md          ← CLI ごとの検出 + ディスパッチ
│   ├── modes.md                   ← prototype / deck / template / design-system
│   ├── references.md              ← 詳細な出典・系譜
│   ├── roadmap.md                 ← フェーズ別デリバリー
│   ├── schemas/                   ← JSON スキーマ
│   └── examples/                  ← 標準 artifact サンプル
│
└── .od/                           ← ランタイムデータ、gitignore 済み、daemon 起動時に自動作成
    ├── app.sqlite                 ← プロジェクト / 会話 / メッセージ / タブ
    ├── projects/<id>/             ← プロジェクトごとの作業ディレクトリ（エージェントの cwd）
    └── artifacts/                 ← 一回限りのレンダリング保存

Design System

72 種がすぐ使えます。各システムは 1 つの DESIGN.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 · sentry · resend · spacex

スターター — default（Neutral Modern）· warm-editorial

ライブラリ全体は scripts/sync-design-systems.ts を通じて VoltAgent/awesome-design-md からインポートされています。再実行で更新可能。

ビジュアルディレクション

ユーザーにブランドアセットがない場合、エージェントは 5 つの厳選ディレクションを提示する 2 つ目のフォームを出力します — huashu-design の「デザインディレクション顧問 · 5 流派 × 20 のデザイン哲学」フォールバックを OD に適用したものです。各ディレクションは決定論的な仕様です — OKLch パレット、フォントスタック、レイアウトポスチャのヒント、リファレンス — エージェントはこれを seed テンプレートの :root にそのままバインドします。ラジオを 1 つクリックすれば、完全なビジュアルシステムが確定します。即興なし、AI slop なし。

ディレクション	ムード	リファレンス
Editorial — Monocle / FT	印刷雑誌、インク + クリーム + ウォームラスト	Monocle · FT Weekend · NYT Magazine
Modern minimal — Linear / Vercel	クール、構造的、ミニマルアクセント	Linear · Vercel · Stripe
Tech utility	情報密度、モノスペース、ターミナル風	Bloomberg · Bauhaus ツール
Brutalist	生々しい、巨大タイプ、シャドウなし、鮮烈なアクセント	Bloomberg Businessweek · Achtung
Soft warm	おおらか、低コントラスト、ピーチ系ニュートラル	Notion マーケティングページ · Apple Health

完全な仕様 → apps/web/src/prompts/directions.ts。

メディア生成

OD はコードで止まりません。<artifact> の HTML を生み出すのと同じ chat 入口が、画像・動画・音声の生成も駆動します — モデル adapter は daemon のメディアパイプライン（apps/daemon/src/media-models.ts、apps/web/src/media/models.ts）に組み込み済みです。各レンダリングはプロジェクトワークスペースに実ファイル（.png / .mp4）として落ち、ターン終了時にダウンロード chip として現れます。

主力は今のところこの 3 つのモデルファミリーです：

サーフェス	モデル	提供元	用途
画像	gpt-image-2	Azure / OpenAI	ポスター、プロフィールアバター、イラスト都市マップ、インフォグラフィック、雑誌風ソーシャルカード、写真修復、製品爆発図
動画	seedance-2.0	ByteDance Volcengine	15 秒のシネマティック t2v + i2v + 音声 — 物語ショート、人物クローズアップ、プロダクト映像、MV 振付
動画	hyperframes-html	HeyGen / OSS	HTML→MP4 モーショングラフィック — プロダクトリビール、キネティックタイポグラフィ、データチャート、ソーシャルオーバーレイ、ロゴアウトロ、カラオケキャプション付き縦型 TikTok

成長中の prompt ギャラリー は prompt-templates/ — 93 件のすぐ複製できる prompt が同梱：43 件の画像（prompt-templates/image/*.json）、39 件の Seedance（prompt-templates/video/*.json のうち hyperframes-* 以外）、11 件の HyperFrames（prompt-templates/video/hyperframes-*.json）。各エントリにプレビュー画像、prompt 本文、対象モデル、アスペクト比、ライセンス + 帰属を記録した source ブロックが付きます。daemon は GET /api/prompt-templates で配信し、Web アプリはエントリビューの Image templates / Video templates タブにカードグリッドとして表示。1 クリックで対応モデルが選択された状態の prompt が composer に流し込まれます。

gpt-image-2 — 画像ギャラリー（43 件中 5 件）

3D Stone Staircase Evolution Infographic 3 段構成・石材調インフォグラフィック

Illustrated City Food Map 編集級の手描き旅行ポスター

Cinematic Elevator Scene シネマティックなファッション 1 フレーム

Cyberpunk Anime Portrait プロフィールアバター — ネオン顔字

Glamorous Woman in Black Portrait 編集級スタジオポートレート

完全リスト → prompt-templates/image/。出典：多くは YouMind-OpenLab/awesome-gpt-image-prompts（CC-BY-4.0）から、テンプレート単位で作者帰属を保持。

Seedance 2.0 — 動画ギャラリー（39 件中 5 件）

Music Podcast & Guitar Technique 4K シネマティックスタジオ映像

Emotional Face Close-up シネマティック微表情研究

Luxury Supercar Cinematic 物語仕立てのプロダクト映像

Forbidden City Cat Satire スタイライズされた風刺ショート

Japanese Romance Short Film 15 秒の Seedance 2.0 物語

サムネイルをクリックすると実レンダリング MP4 が再生されます。完全リスト → prompt-templates/video/（*-seedance-* と Cinematic タグ付きエントリ）。出典：YouMind-OpenLab/awesome-seedance-2-prompts（CC-BY-4.0）、原ツイートリンクと作者ハンドルを保持。

HyperFrames — HTML→MP4 モーショングラフィック（11 件のすぐ複製できるテンプレート）

heygen-com/hyperframes は HeyGen がオープンソース化したエージェントネイティブな動画フレームワークです — あなた（あるいは agent）が HTML + CSS + GSAP を書くと、HyperFrames は headless Chrome + FFmpeg で確定的に MP4 にレンダリングします。Open Design は HyperFrames を一級の動画モデル（hyperframes-html）として daemon dispatch に接続し、さらに skills/hyperframes/ skill を同梱して timeline 規約・シーンタンスィション規則・オーディオリアクティブパターン・キャプション/TTS・カタログブロック（npx hyperframes add <slug>）を agent に教えます。

11 件の HyperFrames prompt は prompt-templates/video/hyperframes-*.json に置かれ、それぞれ特定アーキタイプを生む具体的な brief です：

5s ミニマルなプロダクトリビール · 16:9 · 押し込みタイトルカード + シェーダトランジション	30s SaaS プロダクト動画 · 16:9 · Linear/ClickUp 風 + UI 3D リビール	TikTok カラオケトーキングヘッド · 9:16 · TTS + 単語同期キャプション	30s ブランド sizzle リール · 16:9 · ビート同期キネティックタイポグラフィ、audio-reactive
アニメーション bar-chart race · 16:9 · NYT 風データインフォグラフィック	フライトマップ（出発 → 到着） · 16:9 · Apple 風シネマティック経路リビール	4s シネマティックロゴアウトロ · 16:9 · ピース単位のアセンブル + bloom	$0 → $10K マネーカウンター · 9:16 · Apple 風 hype + グリーンフラッシュ + バースト
3 端末アプリショーケース · 16:9 · 浮遊スマホ + 機能コールアウト	ソーシャルオーバーレイスタック · 9:16 · X · Reddit · Spotify · Instagram を順に	ウェブサイト→動画パイプライン · 16:9 · 3 ビューポート取得 + トランジション

パターンは他と同じです：テンプレートを選び、brief を編集し、送信。Agent は同梱の skills/hyperframes/SKILL.md（OD 専用のレンダリングフロー — composition のソースファイルは .hyperframes-cache/ に隔離してファイルワークスペースを汚さない、daemon が npx hyperframes render を肩代わりして macOS sandbox-exec / Puppeteer のハングを回避、最終 .mp4 だけがプロジェクトの chip として現れる）を読み、composition を書き、MP4 を出力します。カタログブロックのサムネイルは © HeyGen で同社 CDN から配信、OSS フレームワーク本体は Apache-2.0 です。

接続済みだがまだ prompt 化していないモデル： Kling 2.0 / 1.6 / 1.5、Veo 3 / Veo 2、Sora 2 / Sora 2-Pro（via Fal）、MiniMax video-01 — いずれも VIDEO_MODELS（apps/web/src/media/models.ts）にあります。Suno v5 / v4.5、Udio v2、Lyria 2（音楽）と gpt-4o-mini-tts、MiniMax TTS（音声）が音声サーフェスをカバー。これらの prompt テンプレートはオープンコントリビューションです — JSON を prompt-templates/video/ か prompt-templates/audio/ に置けば picker に出ます。

チャット以外に同梱されているもの

チャット / artifact ループが最も目立ちますが、OD を他と比較する前に把握しておく価値のある、目立たないが既に実装済みの機能がいくつかあります：

• Claude Design ZIP インポート。 claude.ai からのエクスポート ZIP をウェルカムダイアログにドロップ。POST /api/import/claude-design が .od/projects/<id>/ に展開し、エントリファイルをタブとして開き、ローカルエージェント向けに「Anthropic の中断箇所から編集を続行」するプロンプトを用意します。再プロンプティング不要、「モデルに作り直してもらう」必要なし。（apps/daemon/src/server.ts — /api/import/claude-design）
• OpenAI 互換 BYOK プロキシ。 POST /api/proxy/stream は { baseUrl, apiKey, model, messages } を受け取り、パスを正規化（…/v1/chat/completions）、SSE チャンクをブラウザに転送、loopback / link-local / RFC1918 を拒否して SSRF を防御。OpenAI chat スキーマを話す任意のベンダーが使えます — Anthropic-via-OpenAI shim、DeepSeek、Groq、MiMo、OpenRouter、セルフホスト vLLM。MiMo は自動的に tool_choice: 'none' が付加されます（tool スキーマがフリーフォーム生成と相性が悪いため）。
• ユーザー保存テンプレート。 レンダリング結果が気に入ったら、POST /api/templates で HTML + メタデータを SQLite templates テーブルにスナップショット。次のプロジェクトのピッカーに「あなたのテンプレート」行が追加されます — 同梱の 31 個と同じ選択画面で、ただしあなたのもの。
• タブ永続化。 各プロジェクトは開いているファイルとアクティブタブを tabs テーブルに記録。翌日開いてもワークスペースは昨日の状態そのまま。
• Artifact lint API。 POST /api/artifacts/lint は生成された artifact に対して構造チェックを実行（<artifact> フレーミングの破損、必須副ファイルの欠落、古いパレットトークン）し、エージェントが次のターンで読み返せる findings を返します。五次元セルフ評価はこれを使ってスコアを vibes ではなくエビデンスに基づかせます。
• Sidecar プロトコル + デスクトップ自動化。 Daemon、web、desktop プロセスは型付き 5 フィールドスタンプ（app · mode · namespace · ipc · source）を持ち、/tmp/open-design/ipc/<namespace>/<app>.sock に JSON-RPC IPC チャネルを公開。tools-dev inspect desktop status \| eval \| screenshot はこのチャネル上で動作するため、ヘッドレス E2E テストが実際の Electron シェルに対して、カスタムハーネスなしで実行可能（packages/sidecar-proto/、apps/desktop/src/main/）。
• Windows フレンドリーな spawn。 長いプロンプトで CreateProcess の約 32 KB argv 上限に達する adapter（Codex、Gemini、OpenCode、Cursor Agent、Qwen、Pi）はすべて stdin 経由でプロンプトを渡します。Claude Code と Copilot は -p を維持。stdin でも溢れる場合、daemon は一時 prompt ファイルにフォールバック。
• ネームスペースごとのランタイムデータ分離。 OD_DATA_DIR + --namespace で完全に分離された .od/ スタイルのディレクトリツリーを提供。Playwright、beta チャネル、本番プロジェクトが同一 SQLite ファイルを共有することはありません。

anti-AI-slop 機構

以下の機構はすべて huashu-design のプレイブックを OD のプロンプトスタックに移植し、Skill 副ファイルの pre-flight で各 Skill に適用可能にしたものです。実際の文言は apps/web/src/prompts/discovery.ts を参照：

• まずフォーム。 Turn 1 は <question-form> のみ — thinking 禁止、tools 禁止、ナレーション禁止。ユーザーはラジオの速度でデフォルトを選択。
• ブランドアセットプロトコル。 ユーザーがスクリーンショットや URL を添付した場合、エージェントは 5 ステップのプロトコル（特定 · ダウンロード · grep hex · brand-spec.md 作成 · 復唱）を実行してから CSS を書きます。記憶からブランドカラーを推測することは絶対にありません。
• 五次元評価。 <artifact> を出力する前に、エージェントはサイレントに 5 次元（哲学 / 階層 / 実行 / 具体性 / 抑制）で 1–5 点の自己評価を行います。いずれかが 3/5 未満なら退行と見なし、修正して再評価。2 パスが通常。
• P0/P1/P2 チェックリスト。 各 Skill には references/checklist.md が付属し、ハードな P0 ゲートを含みます。エージェントは P0 をすべてパスしてから emit 可能。
• Slop ブラックリスト。 攻撃的な紫グラデーション、汎用 emoji アイコン、左ボーダー付き角丸カード、手描き SVG 人物、Inter を display フォントとして使用、架空のメトリクス — すべてプロンプトで明示的に禁止。
• 正直なプレースホルダー > 偽データ。 エージェントが実数値を持たない場合は — またはラベル付きグレーブロックを書き、「10 倍高速」とは書きません。

比較

軸	Claude Design（Anthropic）	Open CoDesign	Open Design
ライセンス	クローズド	MIT	Apache-2.0
形態	Web (claude.ai)	デスクトップ (Electron)	Web アプリ + ローカル daemon
Vercel デプロイ	❌	❌	✅
エージェントランタイム	同梱 (Opus 4.7)	同梱 (pi-ai)	ユーザーの既存 CLI に委任
Skill	プロプライエタリ	12 個のカスタム TS モジュール + SKILL.md	31 個のファイルベース SKILL.md バンドル、ドロップイン
Design System	プロプライエタリ	DESIGN.md（v0.2 ロードマップ）	DESIGN.md × 72 種、すぐに利用可能
プロバイダ柔軟性	Anthropic のみ	7+（pi-ai）	10 種の CLI adapter + OpenAI 互換 BYOK プロキシ
初期化質問フォーム	❌	❌	✅ ハードルール、turn 1
ディレクションピッカー	❌	❌	✅ 5 つの決定論的ディレクション
ライブ todo 進捗 + tool ストリーム	❌	✅	✅（UX パターンは open-codesign 由来）
サンドボックス iframe プレビュー	❌	✅	✅（パターンは open-codesign 由来）
Claude Design ZIP インポート	n/a	❌	✅ POST /api/import/claude-design — Anthropic の中断箇所から編集続行
コメントモード精密編集	❌	✅	🚧 ロードマップ（open-codesign から移植予定）
AI 出力 tweaks パネル	❌	✅	🟡 部分的 — tweaks Skill は出荷済み、専用チャットサイドパネル UX はロードマップ
ファイルシステムレベルのワークスペース	❌	部分的（Electron サンドボックス）	✅ 実 cwd、実ツール、SQLite 永続化（projects · conversations · messages · tabs · templates）
五次元セルフ評価	❌	❌	✅ emit 前ゲート
Artifact lint	❌	❌	✅ POST /api/artifacts/lint — findings をエージェントにフィードバック
Sidecar IPC + ヘッドレスデスクトップ	❌	❌	✅ スタンプ付きプロセス + tools-dev inspect desktop status | eval | screenshot
エクスポート形式	限定的	HTML / PDF / PPTX / ZIP / Markdown	HTML / PDF / PPTX（エージェント駆動）/ ZIP / Markdown
PPT Skill 再利用	N/A	組み込み	guizang-ppt-skill がドロップイン（deck モードのデフォルト）
最低課金	Pro / Max / Team	BYOK	BYOK — 任意の OpenAI 互換 baseUrl を貼り付け

対応 Coding Agent

Daemon 起動時に PATH から自動検出。設定不要。ストリーミングディスパッチは apps/daemon/src/agents.ts の AGENT_DEFS に、CLI ごとのパーサーも同ディレクトリにあります。モデルリストは <bin> --list-models / <bin> models / ACP ハンドシェイクのいずれかで取得するか、CLI がリスト機能を持たない場合は厳選フォールバックリストを使用。

エージェント	バイナリ	ストリーム形式	argv 形態（組み立て済みプロンプトパス）
Claude Code	claude	claude-stream-json（型付きイベント）	claude -p <prompt> --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions
Codex CLI	codex	json-event-stream + codex パーサー	codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] -（プロンプトは stdin）
Gemini CLI	gemini	json-event-stream + gemini パーサー	GEMINI_CLI_TRUST_WORKSPACE=true gemini --output-format stream-json --yolo [--model …]（プロンプトは stdin）
OpenCode	opencode	json-event-stream + opencode パーサー	opencode run --format json --dangerously-skip-permissions [--model …] -（プロンプトは stdin）
Cursor Agent	cursor-agent	json-event-stream + cursor-agent パーサー	cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] -（プロンプトは stdin）
Qwen Code	qwen	plain（生 stdout チャンク）	qwen --yolo [--model …] -（プロンプトは stdin）
GitHub Copilot CLI	copilot	copilot-stream-json（型付きイベント）	copilot -p <prompt> --allow-all-tools --output-format json [--model …] [--add-dir …]
Hermes	hermes	acp-json-rpc（Agent Client Protocol）	hermes acp --accept-hooks
Kimi CLI	kimi	acp-json-rpc	kimi acp
Pi	pi	pi-rpc（stdio JSON-RPC）	pi --mode rpc --no-session [--model …] [--thinking …]（プロンプトは RPC prompt コマンドで送信）
OpenAI 互換 BYOK	n/a	SSE パススルー	POST /api/proxy/stream → <baseUrl>/v1/chat/completions；loopback / link-local / RFC1918 を拒否

新しい CLI の追加 = apps/daemon/src/agents.ts にエントリを 1 つ追加。ストリーム形式は claude-stream-json / copilot-stream-json / json-event-stream（CLI ごとの eventParser 付き）/ acp-json-rpc / pi-rpc / plain から選択。

参考文献 & 系譜

本リポジトリが参考にしたすべての外部プロジェクト。各リンクからソースを確認できます。

プロジェクト	本リポジトリでの役割
Claude Design	本リポジトリがオープンソース代替を提供するクローズドソースプロダクト。
alchaincyf/huashu-design（花叔の画術）	デザイン哲学のコア。Junior-Designer ワークフロー、5 ステップブランドアセットプロトコル、anti-AI-slop チェックリスト、五次元セルフ評価、ディレクションピッカーの背後にある「5 流派 × 20 のデザイン哲学」ライブラリ — すべて apps/web/src/prompts/discovery.ts と apps/web/src/prompts/directions.ts に蒸留。
op7418/guizang-ppt-skill（歸藏）	Magazine-web-PPT Skill を skills/guizang-ppt/ にそのまま同梱、元の LICENSE 保持。Deck モードのデフォルト。P0/P1/P2 チェックリスト文化を他のすべての Skill に波及。
multica-ai/multica	Daemon + adapter アーキテクチャ。PATH スキャンによるエージェント検出、ローカル daemon を唯一の特権プロセスとする思想、agent-as-teammate の世界観。モデルを採用、コードは vendor せず。
OpenCoworkAI/open-codesign	初のオープンソース Claude-Design 代替、最も近い同類。採用済み UX パターン：ストリーミング artifact ループ、サンドボックス iframe プレビュー（React 18 + Babel 同梱）、ライブエージェントパネル（todo + tool calls + 中断可能）、5 種エクスポート形式リスト（HTML/PDF/PPTX/ZIP/Markdown）、ローカルファーストストレージハブ、SKILL.md テイスト注入。ロードマップ上の UX パターン：コメントモード精密編集、AI 出力 tweaks パネル。pi-ai は意図的に vendor していません — open-codesign はそれをエージェントランタイムとして同梱していますが、私たちはユーザーの既存 CLI に委任します。
VoltAgent/awesome-claude-design / awesome-design-md	9 セクション DESIGN.md スキーマのソース。69 のプロダクトシステムが scripts/sync-design-systems.ts 経由でインポート。
farion1231/cc-switch	複数エージェント CLI 間の symlink ベース Skill 配布のインスピレーション源。
Claude Code skills	SKILL.md 規約をそのまま採用 — 任意の Claude Code Skill を skills/ に入れれば daemon が認識。

詳細な系譜（各プロジェクトから何を採用し、何を意図的に採用しなかったか）は docs/references.md にあります。

ロードマップ

• Daemon + エージェント検出（10 種 CLI adapter）+ Skill レジストリ + Design System カタログ
• Web アプリ + チャット + 質問フォーム + 5 つのディレクションピッカー + todo 進捗 + サンドボックスプレビュー
• 31 個の Skill + 72 種の Design System + 5 つのビジュアルディレクション + 5 つのデバイスフレーム
• SQLite バックドの projects · conversations · messages · tabs · templates
• OpenAI 互換 BYOK プロキシ（/api/proxy/stream）SSRF 防御付き
• Claude Design ZIP インポート（/api/import/claude-design）
• Sidecar プロトコル + Electron デスクトップ + IPC 自動化（STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN）
• Artifact lint API + 五次元セルフ評価 emit 前ゲート
• コメントモード精密編集（要素をクリック → 指示 → パッチ）— パターンは open-codesign から
• AI 出力 tweaks パネル UX — ビルディングブロック（tweaks Skill）は出荷済み、チャット統合パネルは未完
• Vercel + トンネルデプロイレシピ（Topology B）
• ワンコマンド npx od init で DESIGN.md 付きプロジェクトをスキャフォールド
• Skill マーケットプレイス（od skills install <github-repo>）と od skill add | list | remove | test CLI サーフェス（docs/skills-protocol.md にドラフトあり、daemon 実装は未着手）
• apps/packaged/ からの配布可能 Electron ビルド

フェーズ別デリバリー計画 → docs/roadmap.md。

プロジェクトの状態

これは初期実装です — クローズドループ（検出 → Skill + Design System を選択 → チャット → <artifact> をパース → プレビュー → 保存）はエンドツーエンドで動作しています。プロンプトスタックと Skill ライブラリが最も価値の大きい部分であり、安定しています。コンポーネントレベルの UI は日々更新中です。

Star をお願いします

30 分の時間を節約できたなら、★ をお願いします。Star は家賃を払いませんが、次のデザイナー、エージェント、コントリビューターに「この実験は注目する価値がある」と伝えます。1 クリック、3 秒、リアルなシグナル：github.com/nexu-io/open-design。

コントリビューション

Issue、PR、新 Skill、新 Design System を歓迎します。最も効果の高いコントリビューションは通常、フォルダ 1 つ、Markdown ファイル 1 つ、または PR サイズの adapter です：

• Skill を追加 — skills/ にフォルダをドロップし、SKILL.md 規約に従う。
• Design System を追加 — design-systems/<brand>/ に 9 セクションスキーマの DESIGN.md をドロップ。
• 新しい coding-agent CLI を接続 — apps/daemon/src/agents.ts にエントリを 1 つ追加。

完全なワークフロー、マージ基準、コードスタイル、受け入れない PR の種類 → CONTRIBUTING.ja-JP.md（English · Deutsch · Français · 简体中文）。

コントリビューター

コード、ドキュメント、フィードバック、新 Skill、新 Design System、あるいは鋭い Issue — あらゆる形で Open Design を前進させてくださったすべての方に感謝します。すべての実質的なコントリビューションは大切であり、以下のウォールは最もシンプルな感謝の表明です。

初めての PR を送った方 — ようこそ。good-first-issue ラベルがエントリポイントです。

リポジトリ活動

上記の SVG は .github/workflows/metrics.yml が lowlighter/metrics を使って毎日自動再生成しています。すぐに更新したい場合は Actions タブから手動トリガーしてください。より充実したプラグイン（traffic、follow-up time など）を有効にするには、リポジトリシークレットに細粒度 PAT を METRICS_TOKEN として追加してください。

Star History

カーブが上向きなら — それが私たちの求めるシグナルです。★ で後押ししてください。

ライセンス

Apache-2.0。同梱の skills/guizang-ppt/ は元の LICENSE（MIT）と op7418 の帰属表示を保持しています。