プロンプトから公開 URL へ —— Open Design で編集・検査・ワンクリックデプロイ

本ガイドは、ひとつのプロトタイプをプロンプトから公開 URL まで一気に仕上げます。デザインシステムを選び、生成し、キャンバス上の Edit と Inspect ツールで微調整し、そのまま Vercel または Cloudflare Pages へデプロイ——すべて Open Design を離れずに行います。内容は 01Coder がウォークスルーで実演したデモに基づき、本記事向けに再構成し、最新リリースに合わせて更新しています。実際の操作は上の動画でご覧いただくか、続けて記事版をお読みください。

Open Design ワークスペース：作りたいものを説明し、モードを選べば、あとはエージェントがやってくれます。

Open Design とは？

Open Design はオープンソースでローカルファーストのデザインプラットフォームで、あなたがすでに使っているコーディングエージェント上で動作します——Claude Code、Codex、Gemini、Hermes など——あるいはあなた自身の API key でも構いません。デスクトップアプリとして提供され（コンパイル不要）、豊富なスキルライブラリと豊富なブランド級デザインシステムのライブラリを組み合わせているため、白紙のキャンバスではなく本物の美学からスタートできます。

• オープンソース、Apache-2.0——クローンして、セルフホストして、あるいは単にアプリをダウンロード。
• ローカルで動作——あなたのプロジェクトは自分のマシン上に存在します。
• エージェント差し替え可能——左下でいつでもエージェントを切り替えられます。
• 実在ブランドのデザインシステム——Apple、Airbnb、ElevenLabs ほか多数。

ステップ 1 —— インストールしてデザインシステムを選ぶ

最も簡単なのは open-design.ai/download からデスクトップアプリを入手する方法です（macOS と Windows；ソースから動かしたい場合は Docker または pnpm）。起動すると左下に現在アクティブなエージェントが表示されます（01Coder は Codex を使用）——クリックで切り替えられます。

Prototype を作成して名前を付け、ドロップダウンからデザインシステムを選びます——どの項目も出力をそのブランドの見た目に整えます。すでに Claude Design で何かを作っているなら、その ZIP をここでインポートしてください。

プラグインライブラリ：レジストリから直接スキルをインストール——アンチスロップ（anti-slop）なデザインスキルも含みます。

ステップ 2 —— ディスカバリー + ビジュアル方向性で生成する

ブリーフを書いて送信します。Open Design は短いディスカバリー質問（誰のためのものか、デザインのトーン、ブランドの文脈、言語）を尋ね、続いてビジュアル方向性ピッカーを提示します——01Coder は「FT Magazine」のエディトリアル方向を選びました。ひとつ選ぶと、右側に最初のバージョンが構築されます。

ステップ 3 —— Edit と Inspect で微調整する

ここが、再プロンプトせずに磨き上げられる場所です：

• Edit——任意の要素をクリックして、その内容を直接変更します。01Coder はラベルを「GitHub」から「GH」に短縮し、見出しの単語を書き換えてから apply content を押します。同じ方法でリンクも調整でき、左パネルにはアーティファクトがレイヤーごとに整理されて表示されます。
• Inspect——ビジュアルスタイル用です。最初は、アーティファクトに data-oid タグがないと警告されます。エージェントに追加させ（これが Open Design が確実に要素を狙える仕組みです）、その後リロードします。これで任意の要素（たとえばヒーローの h1）をクリックすると、色・背景・フォントサイズを調整でき、やりすぎたらリセットできます。

より大きな変更には、チャットに戻って対話的に直接編集してください——Edit/Inspect は素早く外科的な微調整のためのものです。

ステップ 4 —— ワンクリックで公開 URL にデプロイする

準備ができたら、Share メニュー（右上）から PDF、PPTX、ZIP、スタンドアロン HTML にエクスポートできます——あるいは Vercel または Cloudflare Pages にワンクリックでデプロイできます。01Coder と同じく Cloudflare を使う場合：

1. deploy → Cloudflare をクリックし、続いて get / create an API token を行います。
2. Cloudflare Pages 権限を持つカスタムトークンを作成し、サマリーに進んで作成します。
3. トークンを Open Design に貼り付け、account ID を追加し（Cloudflare ダッシュボードからコピー）、デプロイします。
4. 表示されたリンクを開きます——初回読み込みがおかしく見える場合は、伝播中に一度か二度更新してください。

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

公開結果に満足できませんか？チャットに戻って反復し、再デプロイしましょう。

ヒント

• デザインシステムから始めると、最初のパスから既にオンブランドになります。
• Inspect を使う前にエージェントに data-oid タグを追加させ、それからプレビューをリロードします。
• コピーには Edit、スタイルには Inspect、構造にはチャット——変更内容に合った正しいツールを選びましょう。
• Cloudflare デプロイには両方が必要：API トークン（Pages 権限付き）と account ID です。
• 初回デプロイ後にリフレッシュ——ページがまだ伝播していない場合は。

FAQ

本当に Open Design の中から公開 URL にデプロイできますか？ はい——Share メニューから Vercel または Cloudflare Pages にワンクリックでデプロイできます（プロバイダーのトークンはあなたが用意します；Cloudflare では account ID も必要です）。

data-oid とは何で、なぜ Inspect はそれを求めるのですか？ それは Open Design が要素を確実に狙えるように要素へ追加する属性です。エージェントに追加させ、リロードすれば、Inspect が機能します。

ソースから実行しなければなりませんか？ いいえ——macOS または Windows のデスクトップアプリをダウンロードしてください。お好みなら、ソースから Docker や pnpm で動かす選択肢もあります。

無料ですか？ アプリは Apache-2.0 のもとオープンソースで、ローカルでの実行は無料です。接続するエージェントとプロバイダーのモデルおよびメディア使用量にのみ料金が発生します。

---

この文章ガイドは 01Coder のハンズオンデモを基にしています。上の完全な動画をご覧になり、より多くの AI プロダクト深掘りのために 01Coder を購読してください。