Open Design：無料のオープンソース Claude Design 代替

Open Design はアイデアを、プロトタイプ、ウェブサイト、スライド、さらには HTML 動画へと変えます——すべてあなた自身のマシン上でローカルに動作します。このデモでは、Code A Program がデスクトップアプリをインストールし、コーディングエージェントを接続し、Draft という AI ライティングツールのための上質なランディングページを構築し、ワークスペースを離れることなく仕上げてデプロイします。実際の流れは Code A Program の動画でご覧いただくか、続けて下記の記事版をお読みください。

ローカルで動く Open Design：あなたが完全に制御できる、オープンソースでエージェントネイティブなデザインワークスペース——単一のモデルに縛られません。

Open Design とは？

Open Design はオープンソースでローカルファーストのデザインプラットフォーム——Claude Design と Figma の無料代替です。特定のモデルプロバイダーに縛りつけるのではなく、あなたがすでに使っているコーディングエージェント上で動作します。つまり自分のエージェントと自分の key を持ち込めます。

• オープンソース、Apache-2.0——一行残らず読み、セルフホストし、あるいは単にデスクトップアプリをダウンロード。
• ローカルで動作——プロジェクトは他人のクラウドではなく、あなたのマシン上の自分のフォルダーに存在します。
• エージェント持ち込み——Claude Code、Codex、Cursor、Gemini、OpenCode など 21 以上のコーディングエージェントに対応；どの CLI が生成を駆動するかはあなたが選びます。
• プロトタイプにとどまらない——ウェブサイト、プロトタイプ、スライド、画像生成、さらには HTML 動画まで、すべてひとつのワークスペースから。
• すぐ使える一式——129 の組み込みデザインシステムと 460 以上のプラグインで、白紙のキャンバスから始めることは決してありません。

Claude Design を使ったことがあれば、すぐに馴染むはずです——Open Design は同じ落ち着いた体験を保ちつつ、その上にあなたが選んだモデルを載せます。

ステップ 1 —— エージェントとモデルを選ぶ

open-design.ai からデスクトップアプリをダウンロードしてインストールし、短いオンボーディングの質問に答えます。それでメインのチャット画面に入ります。

右上で AI エージェントのプロバイダーを選びます。ローカル CLI プロバイダーとしては、Claude Code、Codex CLI、Gemini CLI（無料の利用枠があります）、OpenCode などを選べます。デモでは、Code A Program は OpenCode と GLM 5.2 モデルを使っています。フロントエンド作業で強さを見せてきたからです——ただ肝心なのはその柔軟さです。あなたはひとつのモデルやプラットフォームに縛られません。

ステップ 2 —— プロンプトを書く

チャットには参考資料用のファイル添付オプションと、プラグインのセクションがあります。Open Design にはビルド／テスト補助、3D モックアップ、モバイル・デスクトップのデバイスフレームなどをカバーする 460 以上のプラグインが付属します——だから 3D 要素やデバイスの外枠が必要なら、プロンプトと格闘するのではなくプラグインを追加すればいいのです。

プラグインライブラリ：ビルド、テスト、3D モックアップ、デバイスフレームなどのための 460 以上のプラグイン——デザインに必要なものを追加しましょう。

ではブリーフを貼り付けます。デモのプロンプトは、Draft という名の AI ライティングアシスタント向けの上質なランディングページを求めています。抑制の効いたスレートブラック、アイボリー、エレクトリックオレンジのパレット、ライブのテキスト生成アニメーションを備えた大胆なエディトリアルなヒーロー、インタラクティブなライティングキャンバス、3 ステップのワークフロー、結果セクション、2 段階の料金表、FAQ、そして力強い最後の行動喚起——一方で、カード、グラデーション、グラスモーフィズム、ありふれたロボットの画像は明確に避けます。

もうひとつ知っておく価値のあるレバーがあります：Apple、Airbnb、BMW、IBM、Spotify といったブランドの人気のデザインシステムを土台にできるのです。Code A Program は今回はスキップしていますが、特定の見た目に合わせたいときのために用意されています。

ステップ 3 —— ビルドとセルフチェックを見守る

プロンプトを送信すると、Open Design はプロジェクトの準備を始めます。約 1 分後、いくつかの追加質問をしてくることがあります——より良い結果のために答えるか、すべてスキップを押して続行させましょう。

デモでは、ランディングページ自体は約6 分で完成します。その後 Open Design は残りの時間をセルフチェックに費やします——構造を検証し、レイアウトを見直し、アニメーションを確認し、ビルド完了とする前に細かな問題を修正します。終わったら、プレゼンアイコンをクリックして新しいタブでサイトを開きます。

生成された結果：ライブのタイピングアニメーション付きのエディトリアルなヒーロー、ワークフロー、結果、料金、FAQ、フッター——タブレットとモバイルにわたってレスポンシブ。

その結果には、AI タイピングアニメーション付きのヒーロー、なめらかなスクロール効果、インタラクティブなエディターセクション、ワークフローの帯、顧客の結果セクション、月額／年額の料金、FAQ、そしてすっきりしたフッターが備わっています。タブレットとモバイルのビューに切り替えて、レスポンシブなデザインが崩れないか確認しましょう。

ステップ 4 —— キャンバス上のツールバーで仕上げる

右側のツールバーは、些細な変更にトークンを浪費せずに磨き上げる場所です：

• Screenshot——サイトの画像を取得します。
• Comment——任意の要素（たとえばヒーローの見出し）を選び、ある単語をオレンジのテーマ色に塗り替えるといった変更を記述します。複数のコメントをまとめて一度に送るか、ひとつをそのままチャットへ送れます。
• Marker——ページの任意の領域をハイライトしてエージェントに共有します。
• Element edit——選択した要素のフォント、幅、色などを直接変更するので、簡単な微調整に完全な再生成は一切不要です。

ズームコントロールと、開いているすべてのコメントの一覧も使えます。デモでは、あの 「actually」 という文字が、そのままツールバー上でオレンジに塗り替えられます。

ステップ 5 —— エクスポートとデプロイ

ツールバーの上にはダウンロードオプションがあります——プロジェクトを PDF、画像、ZIP、または HTML としてエクスポートできます。さらにテンプレートとして保存もあり、このデザインを今後のプロジェクトの出発点として再利用できます。

面白いのは共有メニューです。そこから次のことができます：

• ワンクリックで Vercel にデプロイ——アクセストークンで Vercel アカウントを接続し、デプロイを押すだけ。
• 同じ要領で Cloudflare にデプロイ。
• Cursor や VS Code のようなエディターで開く、あるいは Gemini CLI、Codex、Claude Code といった CLI ツールで開く。Open Design は生成された HTML とその Skills フォルダーを手渡すので、そのデザインを Next.js プロジェクト——あるいはお好みのどんなフレームワークにも変換できます。

設定では、グローバルルール（たとえば「常に TypeScript を使う」）を追加し、Claude のメモリ機能のように役立つメモリを保存し、メディアプロバイダーを構成できます——音声とサウンド用の ElevenLabs key、そして画像生成用の Nano Banana、OpenAI、または OpenRouter です。さらにスキルの追加（ブラウザ操作を自動化する agent-browser スキルや、いくつかのフロントエンド系スキルがあります）、MCP サーバーの接続、デフォルトのプロジェクト保存場所の変更もできます。

もっと活用するためのヒント

• 始めるには無料モデルで十分です。デモサイト全体は無料の Gemini 枠で生成されましたが、それでも見栄えは抜群です；本番の仕事でより高い品質が欲しいときに有料モデルを使いましょう。
• プロンプトの前にプラグインを追加——3D モックアップやデバイスフレームが必要だと分かっているときは。
• 変更に合った正しいツールを使う——要素エディターとコメントは、完全な再ビルドなしに小さな微調整をこなします。
• うまくいったレイアウトはテンプレートとして保存——次のプロジェクトを一歩先から始められます。

FAQ

Open Design は無料ですか？ はい——Apache-2.0 のもとオープンソースで、ローカルでの実行は無料です。接続するエージェントとメディアプロバイダーのモデル／API 使用量にのみ料金が発生し、Gemini のような無料枠も利用できます。

どのコーディングエージェントに対応していますか？ Claude Code、Codex CLI、Cursor、Gemini CLI、OpenCode を含む 21 以上のエージェントです。プロバイダーは右上のメニューから選びます。

Claude Design とはどう違うのですか？ 馴染みのある手触りは同じですが、オープンソースでローカルファースト、そしてエージェント差し替え可能です——ひとつのモデルやプラットフォームに縛られず、プロジェクトを好きな方法でエクスポートやデプロイできます。

アプリを離れずにデプロイできますか？ はい——共有メニューがワンクリックで Vercel または Cloudflare にデプロイします（プロバイダーのアクセストークンはあなたが用意します）。あるいはコードを Cursor、VS Code、CLI エージェントに手渡します。

良い結果を得るには有料モデルを使わないといけませんか？ いいえ——ほとんどのランディングページやフロントエンドデザインには、無料モデルで十分に力を発揮します；より高度な結果が欲しいときにだけ有料モデルに切り替えましょう。

---

この記事ガイドは Code A Program のデモに基づいています。上の完全な動画をご覧になり、より多くの実践的な AI ツール動画のために Code A Program を購読してください。