Akira

Posted on May 21 • Originally published at apidog.com

Claude Designを無料で使う方法

Claude Designの登場は注目を集めました。文章で要件を入力するだけで、ピッチデッキ、ランディングページ、モバイルモックアップのようなデザインアーティファクトを数秒で生成できます。一方で、Claude Designは有料・クラウド前提・Anthropicスタック依存です。「Claude Designを無料で使う方法」を探しても、実際にはそのまま無料利用できるわけではありません。

今すぐApidogを試す

Open Designは、このアーティファクト優先のデザインワークフローをオープンソースで再現するプロジェクトです。ローカルまたは自己ホスト環境で動作し、インストール自体に費用はかかりません。この記事では、Open Designの仕組み、3つのセットアップ方法、既存のAIエージェントへの接続、さらに生成したプロトタイプをAPIと接続して実用化する流れを説明します。

💡 このデモではスキップされがちな工程も扱います。デザインツールはインターフェースを作れますが、ApidogのようなAPIプラットフォームと組み合わせることで、そのUIに実データやモックデータを接続でき、無料プロトタイプを動作する製品に近づけられます。

TL;DR: Claude Designを無料で使う現実的な方法

Claude Designそのものは、Anthropicの有料かつクローズドソースのデザインツールです。

同じような体験を無料で試したい場合は、Apache-2.0ライセンスのオープンソース代替である Open Design を使います。

Open Designは次の特徴を持ちます。

アーティファクト優先のデザインワークフローを再現
ローカルまたは自己ホストで実行可能
Claude Code、Codex、Gemini CLI、Cursor Agentなどの既存CLIエージェントをデザインエンジンとして利用
ソフトウェア自体は無料
すでに契約済みのAIエージェントを使えば追加コストなしで利用可能
Ollamaなどのローカルモデルを使えば、API料金なしでオフライン実行も可能

「Claude Designを無料で」に注意が必要な理由

まず、前提を明確にします。

Claude Design はAnthropicが提供する製品です。公開されている情報を見る限り、有料サブスクリプションで提供され、Anthropicのクラウド上で動作し、ソースコードは公開されていません。

つまり、次のような使い方はできません。

Claude Design本体を無料で完全利用する
Claude Designを自己ホストする
内部モデルを自由に差し替える
ソースコードを変更して運用する

そのため、「Claude Designを無料で使う」と言う場合、実際には次のどちらかを指すことになります。

文章でデザインを指示し、完成度の高いアーティファクトを得るワークフローを無料で使いたい
モデル、データ、ホスティングを自分で管理したい

Open Designは、この2つのニーズに対応するオープンソース代替です。

Open Designとは？

Open Design、通称ODは、ローカルファーストのオープンソースデザイン環境です。

GitHubリポジトリでは、Claude Designに対する「オープンでエージェントネイティブな代替」と説明されています。

Open Designのアーキテクチャは、大きく3層です。

1. Webフロントエンド

Next.jsで構築されたチャットとキャンバスのUIです。

ブラウザで操作し、次のような指示を入力します。

開発者向けAPI管理ツールのSaaSランディングページを作成してください。
トーンは信頼感があり、価格ページへの導線を強くしてください。

2. ローカルデーモン

SQLiteデータベースを持つ小さなNode.jsサーバーです。

主な役割は次の通りです。

プロジェクト管理
会話履歴の保存
生成アーティファクトの管理
システムにインストール済みのコーディングエージェントの検出

3. エージェントランタイム

Open Designは独自のAIモデルを同梱していません。

代わりに、ローカル環境にインストール済みのCLIエージェントを起動し、それをデザインエンジンとして使います。

対応対象には、次のようなエージェントがあります。

Claude Code
Codex
Cursor Agent
Gemini CLI
OpenCode
Qwen
GitHub Copilot CLI
Kimi

デーモンは PATH 上にあるエージェントを自動検出します。

Claude Codeのようなエージェントがどのように動くかを深掘りしたい場合は、Claude Codeエージェントハーネスアーキテクチャの解説も参考になります。

Open Designが品質を上げる仕組み

Open Designは、単にプロンプトをAIに渡すだけではありません。

生成前に、次の2種類のコンテキストをエージェントに読み込ませます。

スキル

スキルは、作成対象ごとのテンプレートやチェックリストです。

例：

Webプロトタイプ
ダッシュボード
モバイルアプリ
SaaSランディングページ
メールレイアウト
ソーシャルカルーセル
プレゼンテーションデッキ

デザインシステム

Open Designには、実在ブランドを参考にしたデザインシステムのカタログがあります。

例：

Linear
Stripe
Vercel
Notion
Apple

各デザインシステムは、色、タイポグラフィ、余白、モーション、トーンなどをMarkdownで記述したものです。

この考え方は、AIエージェントに設計ガイドラインを渡すコーディングエージェント用のDESIGN.mdファイルと近いパターンです。

Open Designは、Web、デスクトップ、モバイルのプロトタイプ、スライドデッキ、画像、短い動画を生成できます。生成物はサンドボックス化されたiframeでプレビューでき、HTML、PDF、PPTX、ZIP、Markdown、MP4としてエクスポートできます。

Open Designをインストールする3つの方法

Open Designの導入方法は3つあります。

目的に応じて選んでください。

方法	向いているユーザー
デスクトップアプリ	最速で試したい人
Docker	サーバーや共有環境で動かしたい人
ソースから実行	最新機能やカスタマイズを使いたい人

オプション1：デスクトップアプリでインストールする

最短で始めるなら、ビルド済みデスクトップアプリを使います。

Open DesignはmacOSとWindows向けのバイナリを公開しています。

手順：

open-design.ai または GitHub Releases にアクセス
自分のOSに合うビルドをダウンロード
通常のアプリと同じようにインストール
アプリを起動

初回起動時に、Open Designは次を自動で実行します。

ローカルのコーディングエージェントをスキャン
スキルを読み込み
デザインシステムを読み込み
プロジェクト用ランタイムフォルダを作成

ターミナル操作やビルドは不要です。

デザイナー、PM、非CLIユーザーが最初に試すなら、この方法が最も簡単です。

オプション2：Dockerで実行する

Open Designをコンテナとして実行したい場合は、Dockerを使います。

ホームサーバー、共有マシン、検証環境で再現性を重視する場合に便利です。

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

起動後、ブラウザで次のURLを開きます。

http://localhost:7456

Dockerを使うメリットは次の通りです。

ホスト環境を汚しにくい
セットアップを再現しやすい
アップグレードや削除が簡単
チーム内で同じ環境を共有しやすい

Docker Composeに慣れていない場合は、公式の Dockerドキュメントを確認してください。

オプション3：ソースから実行する

最新のコードを使いたい場合や、スキルやデザインシステムを編集したい場合は、ソースから実行します。

必要なもの：

Node.js 24前後
pnpm 10.33.x

セットアップ手順：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version    # 10.33.x であることを確認
pnpm install
pnpm tools-dev run web

pnpm tools-dev run web は、デーモンとWebフロントエンドをフォアグラウンドで起動します。

よく使うコマンドは次の通りです。

コマンド	機能
`pnpm tools-dev run web`	デーモンとWebをフォアグラウンドで起動
`pnpm tools-dev start web`	デーモンとWebをバックグラウンドで起動
`pnpm tools-dev status`	実行中のサービスを表示
`pnpm tools-dev logs`	デーモンとWebのログを追跡
`pnpm tools-dev stop`	すべて停止

pnpm に慣れていない場合でも、corepack enable によりバージョン固定が処理されるため、パッケージマネージャーの差異で詰まりにくくなります。

初回実行：AIエンジンを接続する

Open Designを起動したら、次にデザイン生成用のAIエンジンを接続します。

方法は2つです。

パスA：CLIエージェントを使う

推奨は、既存のCLIエージェントを使う方法です。

サポートされているエージェントがインストールされ、PATH に含まれていることを確認します。

例：

which claude
which gemini
which cursor

Claude Designに近い体験をしたい場合は、Claude Codeを使うのが自然です。Claude CodeはAnthropicのモデルで動作するため、Claude Designに近い生成傾向を期待できます。

Open Designは、CLIエージェントを自動検出するため、通常は設定ファイルを編集する必要はありません。

Claude Codeの設定については、Claude Agent SDKとClaudeプラン設定ガイドも参考になります。

パスB：BYOKプロキシを使う

CLIエージェントを使わない場合は、BYOK、つまりBring Your Own Key方式でAPIキーを接続できます。

Open DesignはOpenAI互換のプロキシを提供し、次のようなプロバイダーに対応します。

Anthropic
OpenAI
Azure OpenAI
Google Gemini
Ollama
ローカルモデルサーバー

APIキーを貼り付けると、デーモンがリクエストをルーティングします。

ただし、AnthropicやOpenAIなどの従量課金APIを使う場合、トークンごとに費用が発生します。ソフトウェアは無料でも、API利用料は無料ではありません。

APIキーを扱う場合は、エディタ拡張機能のAPIキーセキュリティで説明されているような注意点も当てはまります。

完全無料に近づけるならOllamaを使う

Ollamaをローカルで動かし、Open Designから接続すると、生成ループ全体をオフラインで実行できます。

この構成なら、外部API料金は発生しません。

Open Design → BYOKプロキシ → ローカルOllamaモデル

「Claude Design的なワークフローを無料で試す」という意味では、これが最も文字通りの方法です。

最初のデザインアーティファクトを生成する

AIエンジンを接続したら、実際にアーティファクトを生成します。

基本フローは次の通りです。

1. スキルを選択する

まず、作りたい成果物の種類を選びます。

例：

SaaSランディングページ
ダッシュボード
モバイルアプリ画面
マーケティングメール
スライドデッキ

スキルは、エージェントがどのテンプレート、チェックリスト、出力形式を使うかを決めます。

2. デザインシステムを選択する

次に、デザインの方向性を選びます。

Linear風、Stripe風、Vercel風など、既存のデザインシステムを選ぶと、色、フォント、余白、コンポーネント設計のルールが生成に反映されます。

デザインシステムを指定しない場合、Open Designは次のような視覚的方向性を提供します。

Editorial
Modern Minimal
Tech Utility
Brutalist
Soft Warm

3. 概要を入力する

次に、自然文で要件を書きます。

例：

開発者向けAPIテストツールの価格ページを作成してください。
対象はスタートアップのCTOと開発チームです。
無料プラン、Proプラン、Enterpriseプランを比較し、
CTAは「無料で始める」にしてください。

別の例：

シードラウンド向けのピッチデッキを作成してください。
トーンは雑誌風で、プロダクトの将来性を強調してください。
スライドは10枚構成にしてください。

4. 発見フォームに回答する

Open Designは、生成前に短い質問フォームを表示します。

ここでは、次のような情報を入力します。

対象ユーザー
表示媒体
トーン
ブランド文脈
目的
必須セクション
避けたい表現

このステップは重要です。

多くのAIデザインツールは、最初のプロンプトだけで即座に生成を始めます。その結果、ユーザーは後から誤った仮定を修正することになります。

Open Designは生成前に前提を固定するため、最初のドラフトが目的に近くなります。

5. プランのストリームを見る

生成中、エージェントはライブのTODOリストをUIに表示します。

例：

- ユーザーペルソナを整理
- ページ構造を定義
- ヒーローセクションを作成
- 価格表コンポーネントを作成
- CTAとFAQを追加
- レスポンシブ表示を確認

単なるローディングスピナーではなく、進行状況を確認できます。

6. サンドボックスでプレビューする

完成したアーティファクトは、サンドボックス化されたiframe内でレンダリングされます。

サンドボックス化は重要です。生成されたコードをローカルシステムから隔離して実行できるためです。

この考え方は、AIエージェントにとってのCubeSandboxの意味でも扱われています。

7. エクスポートする

生成物は、次の形式でエクスポートできます。

HTML
PDF
PPTX
ZIP
Markdown
MP4

また、アーティファクトはプロジェクトフォルダ内にも保存されるため、ファイルを直接開いて編集できます。

スキルとデザインシステムをカスタマイズする

Open Designを実務で使うなら、スキルとデザインシステムのカスタマイズが重要です。

スキルを編集する

各スキルは、SKILL.md と関連アセットを含むフォルダです。

たとえば、自社のランディングページ生成ルールを追加できます。

# SaaS Landing Page Skill

## Required Sections

- Hero
- Problem
- Product Demo
- API Integration
- Pricing
- FAQ
- Final CTA

## Rules

- Use concise developer-focused copy
- Include code snippets when relevant
- Avoid vague marketing claims
- Prefer technical proof over buzzwords

このように編集しておくと、次回以降の生成でエージェントが自社ルールを参照します。

デザインシステムをMarkdownで管理する

Open Designのデザインシステムは、アプリ内部に閉じたバイナリ形式ではなく、Markdownで管理できます。

記述できる内容の例：

カラートークン
タイプスケール
余白
コンポーネント
モーション
コピーのトーン
アクセシビリティ方針

自社ブランドガイドラインをMarkdown化して design-systems フォルダに置けば、以後の生成で再利用できます。

BYOKでモデルを切り替える

BYOKプロキシを使うと、用途に応じてモデルを切り替えられます。

例：

クライアント提出用：高性能なフロンティアモデル
ラフ案：安価なモデル
社内検証：ローカルモデル
オフライン作業：Ollama

単一ベンダーに固定されないことが、Open Designの強みです。

モデル選定の参考としては、Gemini 3.5 vs GPT-5.5 vs Opus 4.7の比較も確認できます。

MCPサーバーを使う

Open Designには Model Context Protocol サーバーが含まれています。

これにより、他のコーディングエージェントがOpen Designの生成物やデザインシステムを直接参照できます。

できることの例：

生成済みアーティファクトを別エージェントから参照
デザインシステムをコード生成エージェントに渡す
UI生成と実装作業を同じコンテキストで進める

Open Designを単体ツールではなく、AI開発ツールチェーンの一部として使えるようになります。

プロトタイプから製品へ：Open DesignとApidogを連携する

Open Designは、美しいフロントエンドを生成できます。

たとえば、次のようなUIです。

ランディングページ
管理ダッシュボード
請求画面
設定ページ
モバイルアプリ画面

しかし、ハードコードされたプレースホルダーデータだけでは製品にはなりません。

ユーザーがボタンを押し、グラフを読み込み、設定を保存するにはAPIが必要です。

ここで Apidog が役立ちます。

例：開発者ツールのダッシュボードを実用化する

Open Designで次のようなダッシュボードを生成したとします。

使用量グラフ
請求パネル
APIキー管理
チーム設定
通知設定

このUIを動かすには、次のようなエンドポイントが必要です。

GET /usage
GET /billing
GET /api-keys
POST /api-keys
GET /team/settings
PATCH /team/settings

Apidogを使うと、これらのAPIをスキーマファーストで設計できます。

例：

{
  "usage": {
    "requests": 128430,
    "limit": 500000,
    "period": "2026-05"
  },
  "billing": {
    "plan": "Pro",
    "amount": 49,
    "currency": "USD"
  }
}

Apidogのモックサーバーでプロトタイプを動かす

ラピッドプロトタイピングで特に有効なのが、Apidogのモック機能です。

ApidogはAPI設計からモックサーバーを自動生成できます。

つまり、バックエンド実装前でも、Open Designで生成したフロントエンドから実際のHTTPリクエストを送れます。

流れは次の通りです。

Open DesignでUIを生成
ApidogでAPIスキーマを設計
Apidogのモックサーバーを起動
フロントエンドのAPI呼び出し先をモックURLに向ける
実データに近いレスポンスでプロトタイプを検証

これにより、フロントエンドとバックエンドの作業を並行できます。

実装後はAPIテストに接続する

バックエンド実装が始まったら、ApidogでAPIテストも管理できます。

視覚的にテストシナリオを作成
スクリプトなしでアサーションを設定
CI/CDに組み込み
API仕様と実装の差分を検出

Apidogのspec-firstモードを使うと、API設計と実装の同期を保ちやすくなります。

また、ApidogはAIエージェント向けの機能も提供しており、エージェントがエンドポイントをどのように呼び出すかを確認する AIエージェントデバッガーも利用できます。

Open DesignでUIを設計し、Apidog でAPIを設計・モック・テストすれば、プロンプトから実用的なプロトタイプまでの流れを1つの開発ワークフローにできます。

Apidogをダウンロードすれば、Open Designが最初のアーティファクトを生成している間に、裏側のAPIモックも作成できます。

Open Design vs Claude Design vs Figma

3つのツールは用途が異なります。

要素	Open Design	Claude Design	Figma
価格	無料、Apache 2.0	有料サブスクリプション	無料ティアと有料プラン
ソースコード	オープン	クローズド	クローズド
ホスティング	ローカル、自己ホスト、Vercel	クラウドのみ	クラウド
AIエンジン	任意のエージェント、BYOK、ローカルモデル	Anthropicモデルのみ	手動、AI機能アドオン
出力	コードアーティファクト、デッキ、画像、動画	デザインアーティファクト	編集可能なデザインファイル
オフライン動作	ローカルモデル使用時は可能	不可	制限あり
向いている用途	制御したい開発者やチーム	最速のホスト型体験	手動のビジュアルデザイン

Claude Designは、ホスト型で手軽に使える点が強みです。

Figmaは、ピクセル単位の手動制御と成熟したコラボレーション機能を求めるデザイナーに向いています。

Open Designは、次のようなチームに向いています。

ローカル実行したい
自己ホストしたい
モデルを自由に選びたい
既存のCLIエージェントを活用したい
生成物をコードとして扱いたい
ブランドやデザインシステムをMarkdownで管理したい

よくある失敗と回避策

Open Designを初めて使うときに詰まりやすいポイントを整理します。

1. `PATH` にエージェントがない

Open Designは、インストールされていないCLIエージェントを検出できません。

確認コマンド：

which claude
which gemini
which cursor

エージェントが見つからない場合は、対象CLIをインストールするか、BYOKプロキシを使ってください。

2. Nodeまたはpnpmのバージョンが違う

ソースから実行する場合、Node.js 24前後とpnpm 10.33.xが必要です。

確認：

node -v
pnpm -v

pnpmのバージョンが合わない場合は、次を実行します。

corepack enable
corepack pnpm --version

3. 有料APIキーで完全無料だと思い込む

Open Designのソフトウェア自体は無料です。

しかし、Anthropic、OpenAI、Azure OpenAIなどの有料APIキーをBYOKで接続すると、トークン利用料が発生します。

追加コストを避けたい場合は、次のいずれかを使います。

すでに契約済みのCLIエージェント
無料枠のあるCLI
ローカルのOllamaモデル

4. 発見フォームを雑に埋める

発見フォームは、Open Designの生成精度を上げる重要なステップです。

短時間でよいので、次を具体的に書いてください。

誰向けか
何を達成したいか
どのようなトーンか
必須要素は何か
避けたい表現は何か

2分の入力で、後続の修正時間を大きく減らせます。

5. プレビューをそのまま本番コードとして扱う

Open Designの出力は、強力な出発点です。

ただし、完成済みの本番コードとして扱うべきではありません。

本番投入前に次を行ってください。

コードレビュー
リファクタリング
アクセシビリティ確認
セキュリティ確認
実APIへの接続
APIテストの追加

API品質を維持するには、APIテストと組み合わせるのが実用的です。

6. 古いリリースを使い続ける

Open Designは活発に開発されています。

ドキュメントにある機能が手元のビルドで見つからない場合、古いリリースを使っている可能性があります。

ソースユーザー：main ブランチをpull
デスクトップアプリユーザー：最新版を確認
Dockerユーザー：イメージとリポジトリを更新

まとめ

AnthropicのClaude Design製品そのものを無料で入手することはできません。

しかし、Claude Designが注目された理由である「自然文でデザインを記述し、完成度の高いアーティファクトを生成する」ワークフローは、Open Designで無料に近い形で再現できます。

重要なポイントは次の通りです。

Open DesignはClaude Design的なワークフローを再現するApache-2.0のオープンソース代替
デスクトップアプリ、Docker、ソース実行の3つの方法で導入可能
Claude Code、Codex、Gemini CLIなど既存CLIエージェントを利用可能
Ollamaを使えばオフラインかつAPI料金なしで実行可能
スキルとMarkdownベースのデザインシステムを編集できる
生成されたUIを製品化するにはAPIが必要
Apidog を使うと、API設計、モック、テストまで接続できる

次のステップはシンプルです。

Open Designをインストール
既存のAIエージェントまたはOllamaに接続
最初のアーティファクトを生成
Apidogをダウンロード
そのUIの背後にあるAPIを設計
モックサーバーでプロトタイプを動かす

Open DesignとApidogを組み合わせれば、アイデアから動作するプロトタイプまでを、開発者向けの実装可能なワークフローとして進められます。