Open Design：Claude DesignのOSS代替、151デザインシステム×26AIエージェント対応

Anthropicが提供するUIプロトタイプ生成ツール「Claude Design」は手軽で強力だが、クローズドサービスのためベンダーロックインとコストが課題だ。その代替として2026年4月28日に公開されたOpen Designは、公開からわずか3日で8,000スターを超え、2026-08-21時点では89,736スター（3か月半で約11倍）まで伸びた。100以上の機能スキル・151のデザインシステム・26種のコーディングエージェントCLI連携をローカル環境で実行でき、Anti-AI-slop機構による品質チェックも備える。Apache 2.0ライセンスで商用利用も可能だ。

この記事では nexu-io/open-design を「Claude Designの代替として選べるか」という観点で解説します。デザインシステムそのものの考え方は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 をご覧ください。

Open Designとは：Claude Designのローカルファーストなオープン代替

Open DesignはAnthropicの「Claude Design」に触発されたOSSプロジェクトで、開発元のnexu-ioが「Local-first, open-source alternative to Anthropic’s Claude Design」と説明している。

Claude Designとの最大の違いはベンダーロックインの有無だ。Claude Designは月額サブスクリプションが必要で、生成したプロトタイプはAnthropicのサーバー上で処理される。Open Designはすべてのデータをローカルの.od/app.sqliteに保存し、AIエージェントも自分が使いたいツールを選べる。

Claude Designそのものの機能・料金については Claude DesignとClaude Codeの違いとは｜料金・使用量上限・Figma比較も解説 で詳しく解説している。

なお当サイトにはOpen Designの記事がもう1本ある。Open Design（nexu-io）とは｜手元のコーディングエージェントが回すOSSデザイン工房【動画解説】 は公式動画をもとに「実際に触るとどう動くか」を追った記事で、本記事は「Claude Designの代替として成立するか」を機能・データ・ライセンスの軸で比較する内容だ。導入を決める前の比較検討なら本記事、手を動かす段になったら動画解説側が読みやすい。

コンポーザブルスキル：プロトタイプからデッキまで

Open Designのコアはスキルだ（初出時31種、2026-08-21時点で100種以上の機能スキル＋別建ての描画テンプレートカタログ＋277プラグイン）。スキルはプロジェクト要件に合わせて組み合わせて使う「コンポーザブル」な設計になっており、大きく2モードに分かれる。

Prototypeモード（27スキル）

UIプロトタイプを生成するメインモードだ。

Deckモード（4スキル）

プレゼンテーション資料の生成モード。OSSプロジェクトguizang-ppt-skillをバンドルしており、スライド形式の成果物も出力できる。

151のデザインシステム：Linear・Stripe・Vercelをポータブルに

Open Designが同梱するデザインシステムは、著名なプロダクトのデザイン言語をポータブルなMarkdownファイルとして収録している点がユニークだ。初出時の72種から151種（2026-08-21実測）まで倍増している。

主なデザインシステムの例：

• テック系: Linear、Vercel、Notion、GitHub、Stripe、Figma
• ビッグテック: Apple、Google、Microsoft、Tesla
• スタートアップ: Airbnb、Loom、Superhuman、Anthropic

これらはプロジェクトディレクトリ内のMarkdownファイルとして管理されるため、プロジェクト途中でも差し替えが可能だ。「最初はLinearスタイルで作ったが、クライアントからStripeライクに変えてほしいと言われた」というケースも再生成なしで対応できる。

# プロジェクトのデザインシステムを確認・変更
ls .od/design-systems/
# linear.md  stripe.md  vercel.md  apple.md  notion.md ...

# 使用するデザインシステムをUIから選択、またはCLIで指定
pnpm tools-dev run web -- --design-system=stripe

Anti-AI-slop機構：5次元スコアリングで品質を担保

Open Designの最も差別化されたポイントがAnti-AI-slop機構だ。「AI-slop」とはAIが量産しがちな、表面的にそれらしく見えるが実用性の低い成果物を指す。

2段階の品質フィルタ

ステップ1：質問フォームによるブリーフのロック

生成前に必ず「何を作るのか」「誰のためか」「何を達成したいのか」を入力させる。このフォームに回答しないと生成が始まらない設計で、曖昧な指示から始まるslop生成を構造的に防ぐ。

ステップ2：5次元自己批評スコアリング

生成した成果物に対して、AIが次の5つの観点で自己評価を行い、スコアが閾値を下回る場合は再生成する。

加えて、グラデーション乱用禁止・架空メトリクス禁止のルールをハードコードしており、「それっぽいグラフ」や「100万ユーザー突破！」のような根拠のない数字が生成されない。

// .od/config.json のスコアリング設定例
{
  "anti_slop": {
    "enabled": true,
    "min_scores": {
      "philosophy": 7,
      "hierarchy": 7,
      "detail": 6,
      "function": 8,
      "innovation": 5
    },
    "prohibit_fake_metrics": true,
    "prohibit_gradient_overuse": true
  }
}

26のAIエージェント連携：Claude Code・Cursor・Gemini CLIに対応

Open Designは起動時に PATH 上のコーディングエージェントCLIを自動検出し、利用可能なものを識別する。特定のエージェントに縛られないこの設計が「ベンダーロックインなし」の実装上の核心だ。対応数は初出時の10種から、2026-08-21時点で26種のローカルCLI実行ファイルまで広がった（DeepSeek Harness・Claude Code・Codex・OpenCode・Hermes・Antigravity・Vela・Grok Build・Kimi・Cursor Agent・Qwen・Qoder・GitHub Copilot・Pi・Kiro・Kilo・Mistral Vibe・DeepSeek・Reasonix・Aider・Amp・CodeBuddy・Mimo・AtomCode・Devin・Trae）。OpenAI互換エンドポイントであればBYOKでも接続できる。

対応エージェント（自動検出順）：

初出時（10種）
1. Claude Code      5. OpenCode
2. GitHub Copilot   6. Qwen
3. Cursor Agent     7. Hermes
4. Gemini CLI       8. Kimi
                    9. Pi
                   10. OpenAI互換プロキシ（BYOK）

連携の方式は2系統に整理されている。OpenDesignを消費する側のエージェントにはスキル・CLI・MCPを提供し、OpenDesignが起動する側のエージェントにはネイティブランタイムアダプタを用意する。後者の第一級市民がDeepSeekの公式ハーネス dsh で、構造化ストリーミング・モデル探索・キャンセル・セッション再開まで対応する。

10番目のOpenAI互換プロキシは、ローカルのOllamaやAnythingLLMなど任意のエンドポイントを指定できる。SSRFプロテクション付きの/api/proxy/streamエンドポイントが用意されており、プライベートネットワーク内のLLMサーバーにも安全に接続できる。

インストールと基本的な使い方

必要な環境はNode.js 24以上とpnpmだ。

# 1. リポジトリをクローン
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 2. パッケージマネージャの有効化（corepack経由でpnpm自動インストール）
corepack enable

# 3. 依存パッケージのインストール
pnpm install

# 4. 開発サーバーの起動
pnpm tools-dev run web

起動後はブラウザでhttp://localhost:3000を開く。初回起動時にAIエージェントの自動検出が走り、利用可能なエージェントが表示される。

基本的なワークフロー

1. 新規プロジェクト作成
   → プロジェクト名・説明を入力

2. デザインシステム選択
   → 72種から1つ選択（後から変更可）

3. スキル選択
   → Prototypeモード or Deckモードを選択

4. 質問フォームへの回答（必須）
   → 目的・ターゲット・主要機能を入力

5. ビジュアルディレクション選択（5種）
   → Editorial Monocle / Modern Minimal / Warm Soft / Tech Utility / Brutalist

6. 生成開始 → Anti-AI-slopチェック → プレビュー

7. エクスポート（HTML / PDF / PPTX / ZIP / Markdown）

プロジェクト構造

.od/
├── app.sqlite          # 全プロジェクト・会話データ
├── projects/
│   └── my-project/
│       ├── brief.md    # ロックされたブリーフ
│       ├── design.md   # 選択したデザインシステム
│       └── outputs/    # 生成された成果物
├── design-systems/     # 72のデザインシステムMD
└── skills/             # 31のスキル定義

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

生成前に選べる5つのビジュアルスタイルは、単なる配色テーマではなくデザイン思想の違いだ。

他のUI生成ツールとの比較：v0・Figma AI・Lovableとどう違うのか

Claude Designと並んで人気のUI生成ツールと比較してみる。

v0はReact/Next.jsコードの品質が高く、そのまま実装に使えるのが強み。一方Open DesignはコードではなくHTML/PDF/PPTXの成果物にフォーカスしており、エンジニア以外のステークホルダーへの共有に向いている。Figma AIはデザイナーチームが既にFigmaを使っている場合に選択肢に入るが、プロトタイプ生成の速度ではOpen Designが上回る。

CI/CDやチーム運用での活用パターン

Open Designのローカルファースト設計は、チーム運用にも向いている。.od/app.sqliteはGit管理可能で、デザインシステムのMarkdownファイルもリポジトリに含めることができる。

デザインシステムのバージョン管理

# デザインシステムをチームで共有する場合
git add .od/design-systems/
git commit -m "デザインシステムをStripeスタイルに更新"

# 別のメンバーがチェックアウトした際、同じデザインシステムで作業できる
git pull
pnpm tools-dev run web  # 同じ design-systems/ が適用される

GitHub Actionsでのプロトタイプ自動生成

# .github/workflows/prototype.yml
name: Generate Prototype

on:
  push:
    paths:
      - 'design-brief.md'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '24'
      - run: corepack enable && pnpm install
      - run: pnpm tools-dev run headless --brief=design-brief.md --output=dist/
      - uses: actions/upload-artifact@v4
        with:
          name: prototype
          path: dist/

プロジェクト管理との連携

デザインブリーフをMarkdownで管理し、GitHubのIssueやNotionと連携するワークフローも組める。ブリーフが変更されるたびに自動でプロトタイプが再生成される仕組みを作ることで、「デザインが古い」という問題を防げる。

実際の使用フロー：ダッシュボードを生成してみる

具体的なユースケースとして、SaaSのAnalyticsダッシュボードを生成するフローを追ってみる。

ステップ1：プロジェクト作成

プロジェクト名: User Analytics Dashboard
説明: MAU・チャーン・LTVを表示するB2B SaaS向け管理画面

ステップ2：デザインシステム選択

LinearのデザインシステムはB2B SaaSとの相性が高く、ダッシュボード系の生成でよく使われる。Linear・Notionなどのデザインシステムには、データの密度とホワイトスペースのバランスに関するルールが詳細に記述されている。

ステップ3：質問フォーム（Anti-AI-slop機構）

Q: このUIの主要なアクションは何ですか？
A: ユーザーのチャーンリスクを早期発見し、CSチームがアクションを取れるようにする

Q: 主なユーザーペルソナは？
A: SaaSのCS担当者（非エンジニア）。Excelには慣れているがコードは書かない

Q: 使ってはいけない要素はありますか？
A: 架空のサンプルデータをそのまま表示するのはNG。空状態（empty state）を丁寧に作ること

ステップ4：スコアリング（自動）

生成後、Functionスコアが6.5/10で閾値（7）を下回った場合は自動再生成が走る。再生成時は前回の批評コメントをプロンプトに含めるため、同じ問題を繰り返さない。

ステップ5：エクスポート

完成したダッシュボードはPPTX形式でエクスポートし、経営会議のプレゼン資料としてそのまま使う、というユースケースは実用的だ。HTML出力はそのままステークホルダーに共有URLで渡せる。

3か月半で変わったこと — ★11倍と「公式モデルサービス」の登場

初出は公開3日後（2026-05-01）で、当時の観測点は「8,000スター・31スキル・72デザインシステム・10エージェント」だった。2026-08-21に一次ソースを取り直すと、規模も収益モデルも別物になっている。

出力できるものが「静止画」を超えた

初出時の出力はWeb/デスクトップ/モバイルのプロトタイプ、デッキ、HTML/PDF/PPTX/ZIPだった。現在はここに画像・動画・HyperFrames（モーショングラフィックス）が加わり、エクスポートにMP4が入っている。プレビューはサンドボックス化されたiframeで行われる。

「Cloud」という有料レイヤが増えた

DeepSeek Harness がネイティブランタイムとして入った

エージェント連携の方式も2系統に整理された。READMEの説明では、OpenDesignを「消費する側」のエージェント向けにスキル・CLI・MCPを出し、OpenDesignが「起動する側」のエージェント向けにネイティブランタイムアダプタを持つ。DeepSeekの公式ハーネス dsh は後者の第一級市民として扱われ、構造化ストリーミング・モデル探索・キャンセル・セッション再開に対応する。生成されたファイルはOpenDesignのワークフロー内に残り、そのままライブプレビューと納品に回せる。

初出時の「10エージェントから選べる」は、いまや「26のCLIを自動検出したうえで、一部は起動まで面倒を見る」に変わっている。

テレメトリの扱い

READMEは配布形態にも触れており、macOS（Apple Silicon＋Intel）とWindows（x64）のネイティブデスクトップアプリ、LinuxはオプションのリリースレーンでAppImageを配る。プロダクト分析とセッションリプレイは同意ゲート付き（consent-gated）だが、スクラブ済みの安全性・信頼性テレメトリは常時オンと明記されている。完全にオフラインで閉じたい場合は、この2種類が別扱いである点を前提に評価する必要がある。

まとめ：Claude Designの代替として完成度が高い

Open Designは公開後わずか3日で8,000スターを獲得した事実が、市場の需要を物語っている。Claude Designの使い勝手を再現しながら、ベンダーロックインなし・ローカルファースト・AIエージェント自由選択という3点で明確に差別化している。

Anti-AI-slop機構は「AIが生成したUIはそれっぽいけど使えない」という実務の課題に正面から向き合っており、プロトタイプを実際の開発に繋げたいチームには特に響く設計だ。

デザインシステムは DESIGN.md という1枚のMarkdownで表現され、READMEはこれを「チームのブランド契約（brand contract）」と呼ぶ。差し替え可能な151種が同梱される。

参照ソース

• nexu-io/open-design - GitHub
• guizang-ppt-skill - バンドルされたデッキスキル
• awesome-design-md - デザインシステムMD素材集
• open-codesign - UXパターン参照元