Open Design はすべてのバイブコーダーの夢
Open Design のためのバイブコーダー向け実践ガイド——自分のエージェントを持ち込み、AI スロップを排除するデザインシステムを選び、コンバージョンする構造をプロンプトで指示し、ラフな PRD をランディングページ、モバイルアプリ、デスクトップアプリへと数分で仕上げる。Sean Kochel の実演デモに基づく。
このガイドは、Open Design のためのバイブコーダー向け実践ガイドです。すでに使っているエージェントを持ち込み、アウトプットが「AI 生成丸出し」にならないようデザインシステムを選び、実際にコンバージョンする構造をプロンプトで指示し、あとは会話で反復していきます。本記事は Sean Kochel が実演デモで立て続けに行う 3 つのビルド——ランディングページ、モバイルアプリ、デスクトップアプリ——を、最新リリースに合わせて書き直し、文章としてまとめたものです。ライブの実演は上の動画で、テキスト版は以下でご覧ください。
Open Design のワークスペース——プロトタイプ、スライドデッキ、画像、動画が、落ち着いた使い慣れた一つのキャンバスに集約されている。
Open Design とは?
Open Design は、すでに使っているコーディングエージェントの上で動く、オープンソースかつローカルファーストのデザインプラットフォームです。マシンにすでにある CLI——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そしてさらに数十種類——を検出し、そのエージェントに生成を担わせます。Sean の言葉を借りれば、エージェントを設定する CLI レイヤーがあり、品質を引き出すシステムプロンプトがあり、そしてそれを価値あるものにする部分——スキルのサポートと、デザインシステムの豊富なライブラリ——があります。アウトプットは本物の HTML ファイルなので、作ったものはそのまま実際のプロジェクトに組み込めます。
バイブコーダーが注目する理由:
- 自分のエージェントとキーを持ち込める——2 つ目のサブスクリプションも、プロバイダーのロックインもなし。
- ローカルで動く——アウトプットはそのままコードベースに引き上げられる HTML。
- デザインシステムが AI スロップ感を排除する——白紙のキャンバスではなく、本物のブランドから始められる。
- スキルはカスタマイズ可能——独自のコピーライティングルール、UX パラダイム、プロセスを組み込める。
- オープンソース、Apache-2.0——読んで、フォークして、クライアントワークに使える。
どのバイブビルドでもぶつかる 2 つの問題
Sean はワークフロー全体を 2 つの失敗パターンを軸に組み立てています。残りの実践ガイドはこれらをどう避けるかの話なので、ここで名前を付けておく価値があります:
- AI スロップに見える。ありきたりなグラデーション、いつもの同じセリフフォント、コンテナの寄せ集め——自分でも気に入らない。
- 役割を果たすように構造化されていない。コンバージョンしないランディングページ、フローが意味をなさないアプリ。
デザインシステムが問題その 1 を解決します。本物の構造を備えた意図的なプロンプトが問題その 2 を解決します。以下のどのビルドでも、この両方を念頭に置いてください。
ステップ 1 — インストールしてエージェントを選ぶ
入り口は 3 通りあります:
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人——設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで生活する人 | 既存のコーディングエージェント CLI |
最速の入り口はデスクトップアプリです——open-design.ai/download から入手しましょう。すでに PATH 上にあるエージェント CLI を自動検出します。代わりにソースから実行するには:
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 に指定するか、自分の API キーを持ち込みます。
ステップ 2 — コンバージョンするランディングページを作る
これは Sean の最初のデモで、それ以外すべてのテンプレートになります:
- デザインシステムを選ぶ。デモでは彼は Anthropic のものを選びます。これがアンチスロップのガードレールです——エージェントはそのブランドのパレット、タイポグラフィ、コンポーネント言語を継承します。
デザインシステムライブラリ:各エントリは本物のブランドを、再利用できるパレット、タイポグラフィ、コンポーネント、ビジュアルの雰囲気へと分解している。
- 雰囲気だけでなく構造をプロンプトする。Sean はどのセクションを作るかを正確に指示し——11 個——そして自分の PRD からエグゼクティブサマリー(プロダクトビジョン、課題定義、ターゲットユーザー、提案するソリューション、主要機能)を貼り付けて、コピーが本物の文脈から書き起こせるようにします。
- ディスカバリーの質問に答える。Claude Design と同様に、Open Design は書き始める前に明確化のための質問をします。ここではそれを実行するために SaaS ランディングページスキルを呼び出します——そしてスキルは単なるファイルなので、代わりに自分のコピーライティングガイドラインやセクション構造をスキルとして読み込ませることもできます。
- 実行させる。約 5 分後、彼はプロ品質のファーストパスを手にします——本物のコンバージョン志向の構造、すっきりした比較表、きれいにスタイリングされたケーススタディカード、しっかりした FAQ。
別のテイストが欲しい? Sean はまったく同じブリーフを、エディトリアルではなくブルータリストなトーンで再実行し、明らかに違うデザインを得ます——同じ構造、違う皮。デザインシステムが重い仕事を引き受けているからです。
ステップ 3 — モバイルアプリを画面ごとに作る
モバイルのデモでは、Sean は一度に 1 画面ずつ作業します。同じ Anthropic のデザインシステムを保ったまま、各画面ごとに PRD から組み立てたプロンプトを貼り付けます——ホームフィード、「ギャップを埋める」レコメンド画面、その場で記録するフードログ。エージェントは明確化のための質問をし、iOS のレイアウトをモックアップし、3 つの画面すべてで選んだデザインシステムを守ります。
得られる教訓は:UX をどうプロンプトするかが結果のほとんどを決める。同じアプリをチャットファーストのコーチングインターフェースとして再構成すると、まったく違う——それでも一貫した——画面群が得られます。デザインシステムがブランドの統一を保ち、プロンプトがパラダイムを決めます。
テンプレートライブラリ:プロトタイプ、スライド、画像、動画の出発点。種類でフィルタリングし、フォークして始められる。
ステップ 4 — マルチモーダルへ:画面からデスクトップアプリへ
最後のデモはマルチモーダルの妙技を見せます。Sean は3 つのモバイル画面のスクリーンショットを撮り、新しいチャットにドロップし、オープンエンドな依頼をします:「このコア機能のウェブアプリ版をモックアップして」。5 分後、彼はすっきりした 3 ペインのデスクトップ版を手にします——左にナビゲーション、中央に作業キャンバス、右に進捗ビュー——スラッシュコマンドのインタラクションもモックアップ済みです。
曖昧なプロンプトでも、参照画像を添えれば使える出発点が得られます。きちんとした仕様があればさらにシャープになりますが、要点は変わりません:サーフェス間を自在に行き来できるのです。
ヒント
- 常にデザインシステムから始める。AI スロップ感に対抗する最大の一手だ。
- 構造を明示的にプロンプトする。セクションや画面を列挙し、PRD から本物の文脈を貼り付けてコピーが空疎にならないようにする。
- スキルを活用し——自分でも書く。スキルは単なるファイル。自分のコピーライティングルールや UX パラダイムをそのままワークフローに読み込ませよう。
- 会話で反復する。UX のフレーミングが違えば結果も大きく変わる。それは機能なので、いくつか試してみよう。
- 参照画像を使う。既存の画面をスクリーンショットしてドロップし、サーフェスをまたいで変換しよう。
- アウトプットは HTML だと覚えておく。すでに始めているプロジェクトに組み込めるように作られている。
FAQ
特定のモデルを使わなければなりませんか? いいえ。Open Design は設定したエージェント——Claude Code、Codex、Cursor、Gemini、OpenCode など——や自分の API キーで動きます。プロバイダーのロックインはありません。
Claude Design とどう違うのですか? 使い慣れた感覚は同じですが、無料で、オープンソースで、ローカルファーストで、モデル非依存で、はるかにカスタマイズ性が高い——独自のスキルやプロセスを追加できます。さらに、単一プロバイダーのツールでは得られない画像生成と動画生成も。
作ったものを既存のアプリにマージできますか? はい——アウトプットは HTML ファイルなので、すでに始めているプロジェクトに組み込めるように作られています。Sean は仕様駆動のマージワークフローを別の動画で扱っています。
無料ですか? アプリは Apache-2.0 のオープンソースで、ローカルで無料で実行できます。料金がかかるのは、接続したエージェントとプロバイダーのモデルとメディアの使用分だけです。
この記事は Sean Kochel の実演デモに基づいています。上のフル動画をご覧になり、AI ビルドのワークフローをもっと知りたい方は Sean Kochel をチャンネル登録してください。