最高のモデルは必要ない — なぜ Open Design はどんなエンジンでも見栄えがするのか
「どんなモデルでも」という約束への誠実なテスト — Claude Opus が設計に優れているなら、誰もが任意のモデルを選べることに意味はあるのか？ Better Stack は低コストモデル（OpenCode 経由の GLM）で実在のアプリを再設計し、エンジンに関係なく Open Design のデザインシステム + スキルが成果物を支える理由を示す。Better Stack のレビューに基づく。
Open Design について、懐疑派から出される妥当な疑問がある。Claude Opus 4.7 はフロントエンド設計が本当に得意なのだから、誰もが任意のモデルを選べることに意味はあるのか — ほとんどのモデルは設計が下手なのではないか、と。本ガイドは低コストモデルをテストし、その結果が通用するかどうかを見ることでこの疑問に答える。Better Stack が彼らの動画で行ったレビューを踏襲し、現行リリースに合わせて書き直し・更新したものだ。上の動画を見るか、続けて文章版を読んでほしい。
Open Design ワークスペース：つくりたいものを記述し、モードを選べば、あとはエージェントがやってくれる。
Open Design とは？
Open Design は Claude Design のオープンソース版の代替で、すでに手元にある任意のエージェントやモデルを使って Web プロトタイプ、モバイルアプリ、HTML スライドデッキを生成できる。ブランドグレードのデザインシステムが一式組み込まれており、すべてのプロジェクトは自分のマシン上にとどまる（何もクラウドに送られない）。クローズドなツールは独占的で、クラウド専用、単一モデルに固定され、サブスクリプションでゲートされている。Open Design はこの4つの制約をすべて取り除く。
なぜモデルに関係なく成果物が良いのか
懐疑派の心配は、設計の思考をすべてモデルが行うことを前提としている。Better Stack の重要な洞察は、Open Design では2つのものが品質を支えており、素のモデルの重要性は思うほど大きくないという点だ。
- デザインシステム — タイポグラフィ、スペーシング、カラートークンを備えた完全なブランド仕様で、Linear、Stripe、Spotify といったブランドから引用されている。見た目はモデルが即興でつくるのではなく、システムが定義する。
- スキル — 出力タイプごとに1つ。デッキスキルはスライドの構成方法を知っており、ランディングページスキルはどんなセクションがあるかを知っている。すべてのプロンプトには反 AI 臭チェックリストまで組み込まれており、生成前にはあなたの対象読者、トーン、ブランドについて尋ねる。
つまりモデルは設計を自由気ままにつくっているのではなく、しっかり仕様化されたシステムを実行しているのだ。だからこそ、最上位ではないモデルでも、本当に見せられるものを生み出せる。
プラグインハブ：レジストリを閲覧し、プラグインをインポートして、チーム向けに準備する。
ステップ 1 — インストールして（低コストの）モデルを選ぶ
macOS/Windows 版をダウンロードするか、Docker でクローンして実行するか、ソースから実行する。起動したらローカル URL を開く。設定には検出されたエージェントハーネス — Claude Code、Codex、OpenCode — が表示される。Better Stack はあえて OpenCode を選び、モデルを低コストの選択肢（GLM）に切り替えて、「どんなモデルでも」という主張をストレステストする。（Codex では推論の度合いまで設定でき、GPT Image や ElevenLabs といったメディアプロバイダーも組み込める。）
プラグインライブラリ：レジストリから直接スキルをインストールできる — 反スロップなデザインスキルも含む。
ステップ 2 — ストレステスト：低コストモデルで実在のアプリを再設計する
デザインシステムを選び（Better Stack は Miro のものが気に入っている — トークンと DESIGN.md が表示される）、Prototype を選んで、実在のタスクを与える：既存のアプリを再設計せよ。Better Stack は稼働中のアプリの URL を渡し、より見栄えのするバージョンを求める。Open Design のエージェントはまず発見のための質問を実行し、続いてエージェントブラウザを使って実際にサイトを訪問し、入力欄とページを読み、本物のデータを取得する — 手作業のコピーは不要だ。約20分後（低コストモデルは最速ではない）、それは清潔でマルチページの再設計を生み出した — 高度なフィルター付きの検索ページ、本物のデータを使う結果ページ、お気に入りページ、非表示/アーカイブ状態 — すべてClaude ではない低コストモデル上でだ。結論：デザインシステム + スキルがそれを支えた。
ステップ 3 — 仕上げて出荷する
完了したら、デザインパッケージを仕上げて、すべて（トランスクリプト、デザインシステム、成果物）を単一の DESIGN.md に統合するか、Share でさまざまな形式にエクスポートする — 実際のプロジェクト用に Claude Code へ渡せるスタンドアロンの HTML として、または Vercel や Cloudflare Pages へデプロイして。
正直な評価
Better Stack は公平だ。すでに（Claude 以外の）コーディングエージェントに料金を払っていて、進みたい方向の大まかなイメージがあるなら、Open Design は迷う余地のない選択だ — デザインシステム＋スキルの組み合わせのおかげで、ハーネスやモデルに関係なくまともなものを生み出す。公平な但し書きとして、設計について少し知っていることを前提とし（最初にデザインシステムを選ぶよう求められる）、最も繊細な仕上げでは依然として最上位モデルが低コストモデルをわずかに上回る。だが核心の主張は成り立つ — 良い結果を得るのに最高のモデルは必要ない。
ヒント
- モデルに偏重しすぎないこと — デザインシステムとスキルを選ぶ。それらが見た目を支える。
- 低コストモデル（GLM/DeepSeek など）で十分、大半の設計作業には。最上位モデルは最終の仕上げに取っておく。
- URL を渡して、エージェントブラウザに実際のサイト/アプリを読ませて再設計させる。
- デザインパッケージを仕上げて、引き継ぎ用に清潔な
DESIGN.mdを1つ得る。 - HTML をエクスポートするか、Vercel/Cloudflare へデプロイして出荷する。
FAQ
設計に Claude 以外のモデルを使うことに意味はありますか？ あります — Open Design のデザインシステムとスキルが見た目と構造を定義するので、低コストモデルでも見せられる成果物を生み出します。最上位モデルが上回るのは最も繊細な仕上げの部分だけです。
既存のサイト/アプリを再設計できますか？ できます — URL を渡してください。エージェントブラウザがサイトを訪問し、ページとデータを読み、それをもとに再設計を構築します。
誰に最も向いていますか？ すでに（Claude 以外の）コーディングエージェントに料金を払っていて、望むデザインの方向性の大まかな感覚を持っている人です。
無料ですか？ アプリは Apache-2.0 のもとでオープンソースであり、ローカルで実行するのは無料です。あなたが接続するエージェントとプロバイダーのモデルおよびメディアの利用分のみ料金を支払います。
この文章ガイドは Better Stack のレビューに基づいています。上の完全な動画を見て、より実用的な AI ツールのテストについては Better Stack を購読してください。