トークンを浪費せずに Claude Design 並みの品質でデザインする
コストを最優先にした Open Design ガイド。すでに料金を払っているエージェント（または自分のキー）でデザインを動かしてトークンの上限から抜け出し、完全なランディングページを作り、動画まで生成して、デプロイする。さらに「どんなときにどのツールを使うか」という率直な判断も。Roy Shavit のウォークスルーに基づく。
このガイドはコストの観点に正面から切り込む。クローズドなクラウド型デザインツールを使ったことがあるなら、その魔法はわかるはずだ——そして、トークンがあっという間に尽きることも。Open Design なら、作業をあなたが使いたい任意のモデルで動かせるので、同等の品質でデザインできる——すでに料金を払っているエージェントでも、自分のキーでもいい——だから、別枠のデザイン予算をやりくりする必要がない。Roy Shavit が彼のウォークスルーで実演している構築の流れを、英語で書き直し、現行リリースに合わせて最新化したものだ。ライブの実演は上の動画を、文章版は以下を読み進めてほしい。
HyperFrames ギャラリー：コード駆動のモーションや動画作品を、フォークしてリミックスできます。
Open Design とは？
Open Design は、オープンソースでローカルファーストのデザインプラットフォームだ。あのクローズドなクラウド型ツールと同じく、プロンプトを与えると本物の成果物——ランディングページ、アプリ、デッキ——が、VS Code や自分のエディタで作業を続けられる編集可能な HTML として返ってくる。これを際立たせる点が 3 つあり、最初の 2 つが、より低コストで動かせる理由だ：
- オープンソースである（Apache-2.0）——コードを読み、フォークし、セルフホストできる。
- 自分のコンピュータ上で動く——ファイルは自分のマシンに留まり、サードパーティのクラウドには何も送られない。
- 使いたい任意のモデルを使える——既存の CLI 経由で Codex、Claude、あるいは 15 種類以上の他のモデルを、または自分の API キー（BYOK）を。
コストの話：トークンのやりくりをやめよう
Roy の言い方はストレートで、それこそが核心だ。クローズドなクラウド型デザインツールは割り当てられたトークンを非常に速く使い切るので、結局はデザイン作業を切り詰めることになる。Open Design はその上限を取り払う。なぜなら生成は、すでに持っているエージェント／サブスクリプション、あるいは自分が管理するキーを通して動くからだ。コストと品質のトレードオフはプロジェクトごとに自分で決める——下書きには安いモデル、最終仕上げにはトップモデル——他人の別枠のデザイン上限で計量されるのではなく。セルフホストはまた、作業が自分のマシン上で行われることを意味し、それが全体をスリムに保つ。
ステップ 1——インストールしてモデルを検出する
いちばん簡単なのはデスクトップアプリだ：open-design.ai/download にアクセスし、OS を選び、ダウンロードして、ドラッグして入れる。ソースから入れたいなら：
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 はローカルにインストールされたモデルを即座に認識する——Roy は Codex と Claude を入れていて、OpenCode やその他も拾い上げるはずだ。デフォルトを設定するか、任意のプロバイダーから自分のキーを持ち込めば、CLI をインストールする必要すらない。これこそが独自性だ：ひとつのベンダーに縛られない。
スライドデッキモード：デッキのカテゴリを選び、サンプルをフォークして出発点にします。
ステップ 2——ランディングページを作り、安く反復する
Roy はゲームストリーミングサービスのランディングページを作る。要件を送ると、Open Design はディスカバリーフォーム（出力タイプ、ターゲット層、ブランドの方向性、スコープ、モーションの度合い）を返してくる。彼が回答すると、それを構築する——ここでは Claude Opus で動いている。彼の CLI がそう設定されているからだ。結果は、しっかりした初版だ：ヒーロー、デモの数字、対応プラットフォーム、料金ページ、利用者の声、FAQ——デスクトップ、タブレット、スマホにレスポンシブ対応している。
反復ツールは変更のコストを低く抑える：範囲を選んでメモを添える、コメントを残す、あるいはインライン編集でテキストを直接書き換える。コードビューに切り替えれば、生成された HTML とデザインファイルが見られる。満足したら、共有ボタンで PDF に書き出すか、Vercel または Cloudflare Pages に直接デプロイする（トークンを入れればサイトが公開される）。あるいはソースへ進んで、VS Code、Cursor、または自分のエディタで作業を続ける。
プレビューに表示された実際の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。
ステップ 3——ページを超えて：動画を生成する
Open Design は静的なデザインに限られない。Roy は hyperframes のモーションスキルを使って、ニューヨーク・タイムズ風のアニメーション棒グラフを生成する——数分で本物の MP4 ができ、長めの動画に入れたり、ブランド入りのスニペットとして使ったりできる。選べるデザインシステムプラグインも 170 種類以上ある（Apple、PlayStation など）。そしてライブラリはオープンなので、コミュニティが追加を続けている。
どんなときにどちらを使うか（率直な判断）
Roy はそこをフェアに語る。モデルの柔軟性、より低いコスト、あるいはセルフホストが欲しいときは Open Design に手を伸ばそう——作業は自分のマシンに留まり、選んだ任意のモデル（サードパーティ製を含む）で動く。最小限でインストール不要のセットアップと、始めるまでの手間が最も少ないことを求めるなら、クローズドなクラウド型ツールに手を伸ばそう——そして、こちらは依然として最初から少しだけ洗練されている点に留意してほしい。同じ内容でも、あちらの方が仕上がりがわずかに高い。こちらは、はるかに高いコントロールと低い運用コストがある。
ヒント
- すでに料金を払っているエージェントで動かす（または BYOK）ことで、別枠のトークン上限から抜け出す。
- 下書きは安いモデルで、仕上げは強力なモデルで——コストと品質のダイヤルをプロジェクトごとに自分で握る。
- インライン編集と範囲コメントを使う——全体を再生成するのではなく、安く外科的な変更を。
- コードに書き出すか、Vercel／Cloudflare にデプロイする——終わったら共有から直接。
- hyperframes スキルを試す——静的なページだけでなく、モーションや動画が必要なときに。
FAQ
クローズドなクラウド型ツールと比べて、これはどうやってトークンを節約するの？ 生成は自分のエージェント／サブスクリプション、または自分の API キーを通して動くので、使い切るべき別枠の計量されたデザイン予算がない——モデルもコストも自分で選ぶ。
出力を自分のエディタで作業し続けられる？ はい——出力は編集可能な HTML／ファイルだ。ソースへ進んで VS Code、Cursor、または任意のエディタで続けるか、Vercel／Cloudflare Pages にデプロイできる。
ウェブページ以外も作れる？ はい——プロトタイプ、デッキ、画像、動画（hyperframes のモーションスキル経由）、加えて大規模なデザインシステムのライブラリ。
無料なの？ アプリは Apache-2.0 のもとでオープンソースであり、ローカルでの実行は無料だ。接続したエージェントとキーの、モデルとメディアの利用分だけを支払う。
この文章ガイドは Roy Shavit のウォークスルーに基づいている。上のフル動画を見て、より実践的な AI 構築コンテンツのために Roy Shavit をフォローしてほしい。