Open Design — 正直なファーストインプレッション（バグ、回避策、任意モデルのセットアップ）

本ガイドは Open Design に対するあえて率直なファーストインプレッションです。きちんと動く部分も、ぶつかるであろう粗削りな部分も、編集で隠さずそのまま見せています。さらに、OpenAI 互換プロバイダーを通じてあらゆるモデルを低コストで接続するという、本当に役立つテクニックも紹介します。内容は Sasha（ИИШНЫЙ）がウォークスルーで記録した実践レビューに基づき、本記事向けに再構成し、最新リリースに合わせて更新しています。実際の操作は上の動画でご覧いただくか、続けて記事版をお読みください。

Open Design のワークスペース：作りたいものを記述し、モードを選べば、あとは agent がやってくれる。

Open Design とは？

Open Design は、オープンソースかつローカルファーストのデザインプラットフォーム——Claude Design に対する agent ネイティブな代替です。「AI の紫色のスロップ」問題（生成される UI がどれも同じに見える）こそ、この種のツールが解こうとしているもので、Open Design の答えは独自のモデルを出荷するのではなく、あなたがすでに使っているコーディング agent の上で動くことです。マシン上の Claude Code、Codex、Cursor、Gemini、OpenCode などを検出し、それをエンジンとして使います。Sasha の見立てでは：無料・オープンで、特定のプロバイダーに縛られないからこそ、最初の一週間で数万の GitHub スターを集めたのです。

• オープンソース、Apache-2.0——クローンして、読んで、セルフホストできる。
• ローカルで動く——プロジェクトは自分のマシン上のフォルダー。
• 任意の agent、任意のモデル——任意の OpenAI 互換プロバイダー経由で自分の API key を使うことも含む。
• 充実したデザインスキルとデザインシステムのライブラリを内蔵。
• プロトタイプにとどまらない——スライドデッキ、画像、さらには動画まで。

ステップ 1 — インストールと設定

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

表示されたローカル URL を開きます（ポートは動的です——ハードコードしないこと）。セットアップ不要が良いですか？open-design.ai/download からデスクトップアプリを入手しましょう。初回起動時、設定ページがマシン上の agent CLI を検出し——Sasha は Codex を使用——デフォルトモデルの設定、メディアプロバイダー（MiniMax、OpenAI GPT Image など）の追加、データソースの接続、言語の切り替え、テーマの選択ができます。

ステップ 2 — OpenAI 互換プロバイダー経由で任意のモデルを使う

これが Sasha のレビューで最も役立つ要点です。検出された CLI のほかに、Open Design では任意の OpenAI 互換 API に自分の key を持ち込める——つまり OpenRouter のようなアグリゲーター経由でルーティングし、ほぼ任意のモデルを、しばしばより安価に使えるということです：

1. プロバイダーで API key を作成してコピーします。
2. Open Design の設定で、OpenAI プロバイダータイプを選びます（OpenRouter などのアグリゲーターは OpenAI API を話します）。
3. key を貼り付け、肝心なのは base URL を変更してプロバイダーのエンドポイント（例：OpenRouter の base URL）にし、使いたいモデルを選ぶことです。
4. 保存——これで生成はそのプロバイダー経由でルーティングされます。

Sasha がぶつかった落とし穴：モデル選択はプロジェクトごとではなくグローバルに切り替わります。なので切り替え後にメディア生成が壊れたら、それは画像プロバイダーがモデルの切り替えに追従したからです。メディアプロバイダーの key は明示的に設定してください。

ステップ 3 — プロトタイプを構築する（粗削りな部分も含めて）

プロジェクトを作成し、ブリーフを書き、ハイフィデリティを選んで送信します。Open Design はまずディスカバリーフォームを実行します——プロンプトに合わせて質問を調整し（対象プラットフォーム、誰向けか、トーン、アニメーション、制約）、続いてビジュアル方向のピッカー（タイポグラフィ＋パレット）、それから構築します。出力は、組み込みコントロール付きのライブでインタラクティブなプロトタイプです——Sasha が生成したアプリでは、ページ上で直接アニメーションを切り替えたり、アクセントカラーを差し替えたりできます。

プレビューでレンダリングされた実際の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。

Sasha がカメラの前で見せた正直な注意点（とその対処法）：

• 間違ったスキルがデフォルトで選ばれることがある。モバイルアプリが欲しいのに「checkpoint/blog」を作り始めたら、明示的に伝えましょう：「mobile-app / front-end スキルを使って」。生成前にスキルを設定しておくこと。
• Inspect には data-oid タグが必要。キャンバス上の Inspect ツールは成果物にタグが付いている必要があります。要素を選べないと言われたら、agent に「data-oid タグ付きでプロトタイプを作り直して」と頼み、リロードします。
• まだ若く、リリースが速い。時折の不具合（編集後にナビゲーションが消えるなど）は想定しておきましょう——プロジェクトはほぼ毎日更新されるので、こまめに再プルしてください。

ステップ 4 — キャンバス上のツール（本当の見どころ）

タグ付けされれば、編集ループこそが目玉です。Inspect では任意の要素にホバーして、色・サイズ・スタイルを直接調整できます。Edit ではテキストをインラインで書き換えられます（一語の変更のためにチャットを往復しなくて済む）。Comment/picker では領域を選択し、描き込んで、agent にメモを送れます（「このメニューをプログレスバー付きのスクロールするカルーセルにして」）。これは、ターミナル内の素の agent では再現しづらい、速くてビジュアルなフィードバックループです。

プラグインハブ：レジストリを閲覧し、プラグインをインポートし、チーム向けに準備する。

完了したら、Share で PDF、PPTX、スタンドアロン HTML、または markdown にエクスポート——あるいはワンクリックで Vercel にデプロイできます。Sasha の正直な評価：プレゼンテーションやリードマグネットのページには、すでに便利なミニビルダーです。複雑なアプリ/サイトのプロトタイピングには、相応の反復が必要だと思っておきましょう。まだ一週間しか経っておらず絶えず更新されていることを踏まえれば、土台はしっかりしています。

ヒント

• より安価な、あるいは別のモデルを使うために OpenRouter（または任意の OpenAI 互換プロバイダー）を接続——base URL の変更を忘れずに。
• 間違ったテンプレートがデフォルトにならないよう、生成前にスキルを明示的に設定する。
• Inspect が要素を選べない場合は data-oid タグを要求し、リロードする。
• チャットで再プロンプトする代わりに、素早いビジュアル調整には Inspect/Edit/Comment を活用する。
• こまめに再プル——プロジェクトはほぼ毎日修正を出している。

FAQ

Claude 以外のモデルを使って、しかも安く済ませられますか？ はい。Open Design を任意の検出済み CLI に向けるか、任意の OpenAI 互換プロバイダー（例：OpenRouter）に key と base URL を設定して自分の key を持ち込めば——ほぼ任意のモデルが開けます。

Inspect/edit が要素を選べません——なぜ？ 成果物に data-oid タグが必要です。agent にそれを付けてプロトタイプを作り直してもらい、プレビューをリロードしてください。

本番運用に耐えますか？ まだ初期段階で、速く反復しています。デッキやリードマグネットのページにはすでに最適です。複雑なアプリでは、出力を磨き上げる前の出来の良い下書きとして扱いましょう。

無料ですか？ アプリは Apache-2.0 のもとでオープンソースで、ローカル実行は無料です。支払うのは、接続した agent とプロバイダーのモデルおよびメディア利用分だけです。

---

この文章ガイドは Sasha（ИИШНЫЙ）の実機レビューに基づいています。上の完全な動画をご覧いただき、より正直で未編集な AI ツールテストについては ИИШНЫЙ を購読してください。