Anthropicが提供するClaude Designと同等のUI生成ループが、自分のAPIキーとお気に入りのコーディングエージェントで動くようになった。

2026年4月28日、nexu-io/open-designがGitHubで公開された。Claude Design（2026年4月17日リリース）の機能を再現したローカルファーストのOSSプロジェクトで、公開からわずか1日で2,200件以上のスターを集めている。

この記事でわかること：

  • Open Designが解決する課題とClaude Designとの違い
  • 19種のスキルと71種のデザインシステムで何が作れるか
  • 3コマンドで動かす手順
  • Claude Code・Codex・Cursor・Gemini CLIへの対応方法

https://github.com/nexu-io/open-design

Claude DesignはなぜOSSでないのか

AnthropicのClaude Designは、Opus 4.7のリリースとともに公開された。プロンプトを入力するとデザイン成果物が届くワークフローは注目を集めたが、クローズドソース・有料・クラウド専用という制約がある。使えるモデルはAnthropicのもの限定で、セルフホストも、Vercelへのデプロイも、自前エージェントとの接続もできない。

Open Designはこの制約を丸ごと外した代替として設計されている。エージェントは同梱せず、すでにローカルにある Claude Code・Codex CLI・Cursor Agent・Gemini CLI・OpenCode・Qwen Code を検出して使う。APIキーはBYOK（Bring Your Own Key）で、データは.od/以下のローカルSQLiteに保存される。

何が作れるか

Open Designには19種のスキルが同梱されている。大きく「デザインサーフェス」と「ドキュメント・業務成果物」の2系統に分かれる。

デザインサーフェス系は、SaaSランディングページ・管理ダッシュボード・価格ページ・ドキュメントページ・ブログ記事・モバイルアプリプロトタイプ・スライドデッキなど9種。スライドデッキはOSSのop7418/guizang-ppt-skillをそのまま組み込んでおり、マガジン調のレイアウトとWebGLヒーロー背景を持つHTML出力が得られる。

ドキュメント系は、PM仕様書・週次アップデート・エンジニアリングランブック・財務サマリー・OKRスコアシート・請求書など10種。

デザインシステムは71種が同梱されている。Linear・Stripe・Vercel・Airbnb・Tesla・Notion・Anthropic・Apple・Cursor・Supabaseなど主要プロダクトのカラー・タイポグラフィ・スペーシング・コンポーネント規則がDESIGN.md形式でまとめられており、システムを切り替えると次の出力から即座にトークンが反映される。

出力と品質担保の仕組み

プロンプトを送るとまず「ディスカバリーフォーム」が表示される。サーフェス・対象ユーザー・トーン・ブランドコンテキスト・スケールなどを30秒で入力する形式で、モデルが勝手に視覚的方向性を決めることを防ぐ設計になっている。

ブランド指定がない場合は5つのビジュアル方向（Editorial Monocle・Modern Minimal・Tech Utility・Brutalist・Soft Warm）から選ぶフォームが追加で表示される。選んだ方向に対応するOKLchパレットとフォントスタックが自動でセットされ、モデルのフリースタイルには委ねない。

エージェントはローカルデーモン経由で実際のディスク上のプロジェクトフォルダにRead・Write・Bash・WebFetchを実行する。生成物はサンドボックスiframe内でリアルタイムプレビューされ、HTML・PDF・PPTX・ZIP・Markdownの5形式でエクスポートできる。

3コマンドで動かす手順

Node.jsとpnpmが入っていれば、追加インストールは不要だ。Claude Codeなど対応エージェントのCLIをあらかじめPATHに通しておく。

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm dev:all

pnpm dev:allでデーモン（ポート7456）とVite開発サーバー（ポート5173）が同時に起動する。ブラウザでhttp://localhost:5173を開くと初回ダイアログが表示され、AnthropicのAPIキーを貼り付ければBYOKフォールバックとして動く。対応エージェントがPATHにあれば自動検出して使う。

デーモンが起動時に.od/ディレクトリを自動生成する。app.sqlite（プロジェクト・会話・メッセージ）とartifacts/（保存した出力物）が置かれる。

Claude Designとの主な違い

項目 Claude Design Open Design
ライセンス クローズドソース Apache-2.0
動作環境 クラウドのみ ローカル / Vercel
モデル Anthropic限定 Claude Code・Codex・Cursor・Gemini CLI等
APIキー Anthropic管理 BYOK（自前キー）
スキル追加 不可 フォルダを追加するだけ

スキルの追加はskills/以下にSKILL.mdとassets/を含むフォルダを置いてデーモンを再起動するだけで反映される。Claude Codeのスキル規約に準拠した形式なので、既存のスキルファイルをそのまま流用できる。

まとめ

Open Designは、Anthropicのデザイン生成ループをローカルで再現するOSSプロジェクトだ。71種のデザインシステムと19種のスキルが最初から使え、Claude Code以外のエージェントでも動く。公開翌日に2,200超のスターを集めており、Claude Designに触れたが価格や制約で導入を断念したチームにとって試しやすい選択肢になる。