Open Design — すでに持っているエージェントをデザインエンジンに変える
Open Design のなかで、ほとんどのチュートリアルが飛ばす部分——背後のモデルを選び、入れ替えること——に絞った実践ガイド。あなたのコーディングエージェントがエンジンであり、そこに向けるモデルが品質のつまみです。インストールし、Gemini CLI または Claude をつなぎ、モデルを仕事に合わせる方法を学びましょう。Codedigipt の実演に基づきます。
本ガイドは、ほとんどの解説がさらりと流す部分、すなわちエンジンに焦点を当てます。Open Design 自体はデザインの場にすぎず、実際の生成はあなたが向けたコーディングエージェントとモデルが行います。そしてその選択こそ、出力品質を左右する最大のレバーです。本稿は Codedigipt が実演で使っている構成にならい、現行リリースに合わせて書き直し・更新したものです。実際の動きは上の動画で、文章版は以下でご覧ください。
Open Design のワークスペース：作りたいものを記述し、モードを選べば、あとはエージェントが仕上げます。
Open Design とは？
Open Design は、あなたがすでに使っているコーディングエージェントの上で動く、オープンソースかつローカルファーストのデザインプラットフォームです。独自のモデルは積んでおらず、マシン上にすでにある CLI（Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、ほか数十種）をスキャンし、そのエージェントをデザインエンジンとして使います。だから作業は、すでに持っているサブスクや無料クレジットで動き、デザイン用の二重請求は発生しません。
- オープンソース、Apache-2.0 — クローンし、セルフホストし、すべての行を読めます。
- ローカルで動作 — プロジェクトは自分のマシン上のフォルダーです。
- エンジンは持ち込み — 対応するどの CLI でも、あるいは自分の API キーでも。
- デザインシステムとスキルの厚いライブラリを内蔵し、白紙のキャンバスから始めずに済みます。
- プロトタイプにとどまらない — プロトタイプ、スライド、画像生成、そして動画。
核心となる考え：モデルこそが品質のつまみ
これが Codedigipt がたどり着いたメンタルモデルであり、最も身につける価値のある一点です。Open Design の出力品質は、選んだモデルに追随する。Open Design は構造——スキル、デザインシステム、ディスカバリーの流れ——を提供しますが、実際のデザイン判断はエンジンから生まれます。速くて安いモデルで動かせば速くて安い下書きが、トップティアのモデルで動かせば、同じプロンプトとデザインシステムからはるかに洗練された結果が得られます。
これは制約ではなく機能です。プロジェクトごとにコストと品質を天秤にかけて調整でき、いつでもエンジンを入れ替えられるということです。
ステップ 1 — Open Design をインストールする
入り口は三つ：
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読みたい・改変したい開発者 | Node ~24、pnpm 10.33.x |
| 自分のエージェントに組み込む | ターミナルで暮らす人 | 既存のコーディングエージェント CLI |
最速の入り口は open-design.ai/download からのデスクトップアプリです — インストール済みのエージェント CLI を自動検出します。ソースから実行する場合（Codedigipt のやり方）：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web表示されたローカル URL を開きます — 動的なポートを解決するので、ハードコードしないでください。Codedigipt が経験から指摘する落とし穴：Node 24 が必要です。Node 22 では彼の環境で起動しませんでした。先に Node 24 LTS を入れてください。Corepack が固定された pnpm のバージョンを選びます。
ステップ 2 — エンジンを選ぶ
ここが肝心なステップです。設定（実行モードの構成）を開き、Open Design がマシン上で検出した CLI のなかから、生成を駆動するエージェントを選びます。インストールされていないものは無効として表示されます。
- Gemini CLI — デザイン段階での Codedigipt の一押し：デザイン勘が鋭く、無料枠のクレジットも長持ちします。生成はそのクレジットで走ります。
- Claude Code — デザインに強いモデル（Sonnet または Opus）に向ければ、最高の忠実度の出力が得られます。
- OpenCode — 有能なデフォルトモデル（例：MiniMax、GLM）を標準装備。何も設定したくない人向けです。
- Anthropic API（BYOK） — CLI がない？API キーを入れてモデルを直接選ぶだけ。これにより、別途 Claude Design のサブスクなしで Claude 品質の出力が使えます — あなたがキーを、Open Design がデザインの場を持ち込みます。
ステップ 3 — まず生成し、エンジンで判断する
プロジェクトを作り、名前を付け、高忠実度を選んで、要件を書きます（Codedigipt は「auth-as-a-service」API のランディングページを作ります）。何かを書き出す前に、Open Design は短いディスカバリーフォーム——出力形式、主たる画面、想定読者、ビジュアルのトーン、ブランドの方向性——を返し、エージェントが推測ではなく正しい方向を固定できるようにします。それに答え、ビジュアルの方向を選べば、構築が始まります。
プレビューに表示された実際の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。
速いモデルでの結果（Codedigipt は Gemini flash プレビューを使用）は、数秒でできる、きれいで使える初稿です。彼が繰り返す正直な但し書き：出力は、選んだモデルの水準で返ってくる。Opus 級の洗練が欲しい？エンジンを Opus 上の Claude に切り替え、同じ要件で再実行を——同じスキル、同じデザインシステムで、より鋭い結果に。
プラグインライブラリ：レジストリから直接スキルをインストールできます——anti-slop なデザインスキルも含みます。
満足したら、共有メニューから PDF、PPTX、単体の HTML、または ZIP に書き出せます——あるいは Vercel へ直接デプロイも。プラグインライブラリの全体は open-design.ai/plugins で見られます。
ヒント
- モデルを仕事に合わせる。素早い下書きや反復には安くて速いモデルを、クライアント向けの最終稿にはトップティアのモデルを。
- ローカル CLI を使うと、生成がすでに持っているサブスクや無料クレジットで走ります。
- Claude Design プランなしで Claude 品質を得るには BYOK — Anthropic キーを設定に入れ、モデルを選びます。
- 弱いモデルの責任を道具に転嫁しない。良いデザインシステムも弱いエンジンは救えません。出力が薄く見えたら、プロンプトを書き直す前にモデルをアップグレードを。
- ディスカバリーフォームは余さず答える — それがエンジンを一発で方向づけるやり方です。
よくある質問
選ぶモデルで、出力はそんなに変わるのですか？ はい——それが最大のレバーです。Open Design はスキルとデザインシステムを提供しますが、デザイン判断はエンジンから生まれます。同じ要件でも、Opus と速いプレビューモデルとでは、洗練度に目に見える差が出ます。
Claude Design に課金せず、Claude 級の品質を使えますか？ はい。Open Design を Claude Code に向けるか、Anthropic の API キーを設定に入れ（BYOK）、モデルを選びます。別途 Claude Design のサブスクなしで、その出力が得られます。
プロジェクトの途中でモデルを切り替えられますか？ はい——設定でエージェント／モデルを変えて再実行するだけ。同じスキルとデザインシステムで、背後のエンジンだけが変わります。
無料ですか？ アプリは Apache-2.0 のもとオープンソースで、ローカル実行は無料です。料金がかかるのは、接続したエージェントのモデル／クレジットの分だけです。
この文章版ガイドは Codedigipt の実演に基づいています。上の動画を最後までご覧いただき、実用的な AI ツールの構成をもっと知りたい方は Codedigipt をチャンネル登録してください。