Open Design で既存ブランドに合わせたサイトをデザインする
Open Design の目玉テクニックを扱う実践ガイド——公開中の自社サイトに向けると、エージェントがフォント・配色・トーンをスクレイピングしてブランド仕様に落とし込み、あなたの声でデザインします。ワンクリックのデスクトップ版インストールと、Claude Design の利用上限についての率直な見解も収録。Brendan O'Connell のウォークスルーに基づく。
このガイドは Open Design の目玉テクニックに焦点を当てます。既存のサイトに向けると、エージェントがあなたの本物のブランド——フォント・配色・トーン——を仕様に取り込み、あなたの声でデザインします。ワンクリックのデスクトップ版インストールと、なぜオープンな代替を選ぶ価値があるのかについての率直な解説も扱います。本記事は Brendan O'Connell がウォークスルーで実演する実践ビルドに沿っており、現行リリースに合わせて書き直し・更新しています。ライブ操作は上の動画を、文章版は以下をご覧ください。
プレビューに表示された実際の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。
Open Design とは？
Open Design はオープンソースでローカルファーストのデザインプラットフォームで、あなたがすでに使っているコーディングエージェントの上で動きます——Claude Code、Codex、Cursor、Gemini、OpenCode など——あるいは自前の API キーでも。本質的には Claude-Design 風のワークスペースを自分のマシン上で動かすもので、特定ベンダーのクラウドに縛られることも、そのツールの利用上限に縛られることもありません。Apache-2.0 で、スキルとデザインシステムの充実したライブラリを同梱し、その上にメディア生成（画像・動画・音声）を加えています。
なぜオープンな代替を選ぶのか
Brendan の動機は具体的で、繰り返す価値があります。多くの人にとってこれが決め手だからです。彼はクローズドなクラウドツールでたった一つのデザインシステムを生成しただけで、週あたりの上限のおよそ 75% を消費してしまい——翌週まで身動きが取れなくなりました。この上限は通常のプラン枠とは別枠で、本格的な反復作業をするにはこのワークフローがほぼ使い物にならないと感じさせます。自分の Claude Code（あるいは任意の）サブスクリプションで動かせば、その壁はなくなります。別枠のデザイン上限にぶつからず、一つのエコシステムに縛られることもありません。
ステップ 1——インストール（ワンクリックの道）
最も簡単な経路で、Brendan が勧めるのはデスクトップアプリです。open-design.ai/download にアクセスして macOS または Windows 用の実行ファイルを入手します。アプリは短時間で起動し、マシンにすでにあるエージェントの CLI を自動検出します——Brendan は何も設定しませんでした。彼の Claude Code サブスクリプションを拾い上げ、すぐに使える状態になりました。
ターミナル派ですか？ソースから：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web表示されるローカル URL を開きます（ポートは動的です——固定値で書かないこと）。右側に設定があります。検出されたエージェントに加え、メディアプロバイダー（画像は OpenAI、動画は MiniMax、音声は ElevenLabs）、コネクター（Composio MCP）、さらにはデスクトップペットまで。どのプロバイダーでも自前のキーを持ち込めます。
ステップ 2——既存ブランドからデザインする
これこそ入場料に見合うテクニックです。プロジェクトを作り、ハイフィデリティを選び、ブリーフで既存のサイト向けにデザインするよう伝えます。エージェントにはウェブ取得ツールがあるので、公開中のサイトを読みに行き、そこからブランド仕様を導き出します。
動画では Brendan が自分のサイトに向けると、Open Design は：
- ページを取得し、本物のコンテンツをスクレイピングします。
brand-spec.mdを書き出し、実際のフォント（Fig Tree を正しく拾いました）、配色、デザイン上の選択——「ピル型ボタンなし、完全な角丸カードなし、アクセントカラーは控えめに、余白はたっぷり」——に加え、トーン（「息せき切ったマーケティング調はなし」）を捉えます。DESIGN.mdを生成し、その声でページを構築して、既存ブランドとよりすっきりしたレイアウトを融合させます。
Open Design のワークスペース：作りたいものを記述し、モードを選べば、あとはエージェントが仕上げます。
構築の前に、Open Design は短いディスカバリーフォームを実行します（単一ページか数ページか？ ビジュアルの方向性は？ 現在のサイトに合わせる？ 現実的なプレースホルダーは？）。これで正しい方向を確定します。結果は彼のタグライン、青、フォントを保ちつつ、より鋭いレイアウトを上に重ねます——クリックして見て回れる複数ページの出力です。
ステップ 3——アンチスロップのセルフチェックを確認してエクスポート
仕上げに、Open Design はアンチスロップのセルフチェックを実行します——Brendan は「絵文字なし、書体は一つ、決定的なあしらいが一つ、全体を通して本物のポジショニング文言」と確認されるのを見ます。これが、出力をいかにも生成物っぽく見えさせないためのガードレールです。
HyperFrames ギャラリー：コード駆動のモーションや動画作品を、フォークしてリミックスできます。
例とデザインシステムのタブを見て出発点を探し（各デザインシステムは完全に編集可能な DESIGN.md を提供します）、満足したら成果物を HTML、PDF、または ZIP としてエクスポートします。すべてが自分のエージェント上でローカルに動くので、反復している間に別枠のデザイン上限にぶつかることはありません。
ヒント
- 公開中のサイトに向けると、本物のフォント・配色・トーンを引き継げます——オンブランドな出力への最速ルートです。
- ゼロ設定の道にはデスクトップアプリを使う。エージェントを自動検出します。
- 自分の CLI サブスクリプションで動かすことで、クローズドツールの別枠の週次デザイン上限を回避できます。
- 生成された
brand-spec.md/DESIGN.mdを読む——編集可能なファイルなので、スクレイプが取り違えた箇所はどこでも直せます。 - プロンプトに少し手をかける——内容の濃いブリーフは、初稿を目に見えて良くします。
よくある質問
本当に既存のサイトからデザインできますか？
はい——エージェントにはウェブ取得ツールがあります。自分のサイト向けにデザインするよう伝えれば、フォント・配色・レイアウトの選択・トーンを brand-spec.md にスクレイピングし、その声でデザインします。
エージェントを設定する必要はありますか？ 通常は不要です。デスクトップアプリはすでにインストール済みのエージェント CLI（Claude Code、Codex、Gemini など）を自動検出します。自前のキーを持ち込むこともできます。
あのクローズドツールのような利用上限はありますか？ 別枠のデザイン上限はありません——生成は接続したエージェント／サブスクリプションに乗るので、デザインを一つ作っただけでブロックされることはありません。
無料ですか？ このアプリは Apache-2.0 のもとでのオープンソースで、ローカルで動かすのは無料です。支払うのは、接続したエージェントとプロバイダーのモデルおよびメディアの利用分だけです。
この文章ガイドは Brendan O'Connell のウォークスルーに基づいています。上の完全な動画をご覧になり、さらなるオープンソースツールの解説についてはBrendan O'Connell をチャンネル登録してください。