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

Anthropicが提供するUIプロトタイプ生成ツール「Claude Design」は手軽で強力だが、クローズドサービスのためベンダーロックインとコストが課題だ。その代替として2026年4月28日に公開されたOpen Designは、公開からわずか3日で8,000スターを超えた注目のOSSプロジェクトだ。31のコンポーザブルスキル・72のデザインシステム・10のAIエージェント連携をローカル環境で無料実行でき、Anti-AI-slop機構による品質チェックも備える。Apache 2.0ライセンスで商用利用も可能だ。

この記事では nexu-io/open-design の機能と使い方を解説します。デザインシステムのMarkdown活用についてはDESIGN.md入門：AIとデザインシステムを繋ぐMarkdownファイルの書き方をご覧ください。

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｜使い方・料金・v0/Figma比較で詳しく解説している。

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

Open Designのコアは31のスキルだ。スキルはプロジェクト要件に合わせて組み合わせて使う「コンポーザブル」な設計になっており、大きく2モードに分かれる。

Prototypeモード（27スキル）

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

Deckモード（4スキル）

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

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

Open Designが同梱する72のデザインシステムは、著名なプロダクトのデザイン言語をポータブルなMarkdownファイルとして収録している点がユニークだ。awesome-design-mdのコミュニティが蓄積してきた資産を直接活用している。

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

• テック系: 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
  }
}

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

Open Designは起動時に開発環境を自動検出し、利用可能なAIエージェントを識別する。特定のエージェントに縛られないこの設計が「ベンダーロックインなし」の実装上の核心だ。

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

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）

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つのビジュアルスタイルは、単なる配色テーマではなくデザイン思想の違いだ。

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

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

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

デザインシステムのMarkdown管理という文脈ではDESIGN.md入門：AIとデザインシステムを繋ぐMarkdownファイルの書き方と組み合わせることで、より体系的な運用が可能になる。また、72種のデザインシステムの元資産はawesome-design-mdプロジェクトからも参照できる。

他の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で渡せる。

FAQ

Q. Claude Codeを使っているチームがOpen Designを導入するメリットは？

Claude Codeは実装コードの生成に強く、UIプロトタイプのビジュアル出力は別途必要になることが多い。Open DesignはClaude Codeを自動検出して連携するため、「Claude Codeでロジックを実装、Open DesignでUIをプロトタイプ」という分業が自然に成立する。ブリーフをdesign-brief.mdとして管理し、Claude Codeのコンテキストに含めることで一貫性を保てる。

Q. ローカルLLMに対応していますか？

対応している。OpenAI互換APIエンドポイントを持つOllama・LM Studio・AnythingLLMなどのローカルLLMサーバーを指定できる。設定は.od/config.jsonのproxy.endpointに記述する。ただし、モデルのクオリティによってAnti-AI-slopスコアの通過率が下がる可能性があるため、品質重視の場合はClaude CodeやGemini CLIとの連携が推奨される。

Q. 生成されたHTMLはそのまま本番に使えますか？

原則として本番向けには不向きだ。Open Designが生成するHTMLはサンドボックス化されたiframe内でレンダリングするプロトタイプ用で、アクセシビリティ・パフォーマンス最適化・レスポンシブ対応が完全ではない場合がある。プロトタイプとして確認し、本番実装はReact/Next.jsなどのコードとして書き直す使い方を想定している。

Q. 72のデザインシステムは自作・追加できますか？

できる。.od/design-systems/ディレクトリにMarkdownファイルを追加するだけだ。フォーマットはawesome-design-mdの仕様に準拠しており、カラートークン・タイポグラフィ・コンポーネントルール・スペーシング原則を記述する。自社のデザインシステムをMarkdown化してチームで共有する使い方が最もスケールしやすい。

Q. Claude Designで作ったプロジェクトをOpen Designに移行できますか？

対応している。Claude DesignのZIPエクスポートをOpen DesignにインポートするUIが用意されており、デザインシステムとブリーフを引き継いで再生成が可能だ。ただし、Claude Designのプロプライエタリなスキルと完全に同じ出力にはならない点は注意が必要だ。

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

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

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

デザインシステムのMarkdown管理という文脈ではDESIGN.md入門：AIとデザインシステムを繋ぐMarkdownファイルの書き方と組み合わせることで、より体系的な運用が可能になる。また、72種のデザインシステムの元資産はawesome-design-mdプロジェクトからも参照できる。

参照ソース

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