ローカルのコーディングエージェントを接続する、自分のモデルAPIキーを使う、またはOpenDesign Cloudで始める。再利用できるデザインシステムを適用し、レスポンシブなフロントエンドを生成・確認したら、後続のエンジニアリング作業に使えるプロジェクトファイルを手元に残せます。
ローカルエージェント · APIキーを持ち込む · OpenDesign Cloud
ブランドの世界観を伝える洗練されたウェブサイト。編集的な体験、レスポンシブなページ、エンジニアリングレビューにすぐ使えるソースファイルを備えています。
滞在を探す
「予約までの導線が明快で、没入感のあるビジュアルストーリー、再利用可能なコンポーネントを備えた洗練された宿泊施設のウェブサイトです。コーディングエージェントが引き継げるデザインシステムも整っています。」
開発者は、さまざまな対象に向けたウェブサイトを制作します。OpenDesignはブランドと訪問者の目的に合わせて見た目を構成し、その成果をデザインルール、ローカルファイル、開発者のワークフローにつなげます。
開発者が作るのは、宿泊施設、EC、編集、ポートフォリオ、プロダクトなど、さまざまなウェブサイトです。OpenDesignは用途に合わせてビジュアルの方向性を調整します。開発者にとっての価値は、その成果を支える部分にあります。モデルの制御、再利用可能なデザインルール、レスポンシブ表示の確認、エンジニアリングのワークフローに引き継げるローカルファイルを備えています。
生成を始める前に環境を選びましょう。プロジェクトファイルにアクセスするならローカルコーディングエージェント、モデルを直接制御するなら自分のAPIキー、どちらも設定せずに始めるならOpenDesign Cloudを使います。
Codex、Claude Code、Cursorなど、インストール済みのコーディングエージェントを通じてOpenDesignを実行します。エージェントにローカルプロジェクトの読み取り・編集権限を与える必要がある場合に適した方法です。
Codex
Claude Code
CursorプロバイダーのAPIキー、エンドポイント、モデルを追加し、生成前に接続をテストします。利用料はOpenDesignのクレジットではなく、プロバイダーに支払います。
サインインして、OpenDesign Cloudで利用できるホスト型モデルを使います。ローカル開発環境を設定する前にデザインを始めたい場合に、最も手軽な方法です。
ひとつのプロダクト、異なる制御方法。 ローカルエージェントとBYOKは、OpenDesignアカウントなしで始められます。OpenDesign Cloudでは、アカウントとプランのクレジットが必要です。選択したエージェントやモデルのプロバイダーから別途料金が請求される場合があります。
OpenDesignがデザイン生成を担い、その後フロントエンドをエンジニアリングのワークフローに引き渡します。確認、リファクタリング、統合、デプロイはそのワークフローで行います。
ファイルを編集するならローカルコーディングエージェントを接続し、モデルに直接アクセスするなら自分のAPIキーを使い、ホスト型環境ですぐに始めるならOpenDesign Cloudにサインインします。
152以上のオープンソースのデザインシステムから選ぶか、ウェブサイト、GitHubリポジトリ、Figmaファイルをもとに独自のシステムを作成します。
対象ユーザー、ページ、ブランドの方向性、技術的な制約を伝えます。レスポンシブな仕上がりを確認し、プロンプトまたは直接選択して調整します。
ローカルプロジェクトを実装の土台として使います。内容を確認し、バージョン管理に加え、テストやリファクタリングを行い、残りの技術スタックと連携させます。
承認済みのデザインシステムは維持してください。ナビゲーション、ヒーロー、フッターの繰り返し部分を、リポジトリの規約に沿った再利用可能なコンポーネントに分けてください。変更したファイルを表示してください。説明なしに依存関係を追加しないでください。
役立つ成果は、画面の見た目だけではありません。レスポンシブなウェブサイト、内容を確認できるプロジェクト素材、次のエージェント作業で再利用できるデザインルールがそろいます。
平坦化されたスクリーンショットや、作り直しが必要なビジュアル参考資料ではなく、実際のウェブページと再利用可能なセクションを生成します。
HTML、CSS、関連アセット、プロジェクト構成を手元に残せるため、通常のソース管理やレビューに引き継げます。
選択した色、書体、余白、コンポーネントのルールを共有の文脈として保持し、次のページやコーディングエージェントの作業に活用できます。
152以上のオープンソースのデザインシステムから選ぶか、ウェブサイト、GitHubリポジトリ、Figmaファイルをもとに作成できます。OpenDesignは、色、書体、余白、コンポーネントの決定事項を再利用可能な文脈にまとめ、生成するすべてのページに反映します。
少数の形容詞だけでモデルに新しいスタイルを考えさせるのではなく、定義済みのビジュアルシステムを使います。
ウェブサイト、GitHubリポジトリ、Figmaファイルを素材に、プロジェクトに合わせたデザインシステムを作成できます。
再利用できるデザインルールとプロジェクトファイルをまとめて保持することで、次のコーディングエージェントはスクリーンショットだけに頼らず作業を始められます。
同じビジュアルの決定事項を維持しながら、コピー、レイアウト、コンポーネント、新しいページを改善できます。
モデルの設定、プロジェクトファイルの権限、本番環境への準備は、それぞれ別の判断事項です。対応する公開連携を利用する場合も、デプロイ先プロバイダーと設定が必要です。
OpenDesignは開発者のワークフローにおけるデザイン生成レイヤーであり、フルスタックのアプリケーションプラットフォームではありません。生成されたフロントエンドは実装素材として扱い、レビュー、テスト、アクセシビリティの確認、セキュリティ対応、自社リポジトリの規約に沿った調整を行ってください。
プロバイダーの設定、ローカルエージェントのアクセス、デザインシステムの入力方法、開発を続けられるプロジェクトファイルについて説明します。
はい。プロバイダーのAPIキー、エンドポイント、モデルを追加し、接続をテストできます。モデルの利用料はプロバイダーから直接請求されるため、OpenDesignのクレジットは消費しません。BYOKではデザインを生成できますが、それだけでプロジェクトファイルを編集することはできません。ファイルへのアクセスが必要な場合は、ローカルコーディングエージェントを使ってください。
ローカルコーディングエージェントまたは「自分のAPIキーを持ち込む」ワークフローでは不要です。OpenDesign Cloudはホスト型モデルとプランのクレジットを使うため、アカウントが必要です。
ローカルコーディングエージェントは、アクセス権限のあるファイルを扱えます。そのため、既存のリポジトリ内で生成したフロントエンドを調整する場合に適しています。公開前に変更内容を確認し、自分のフレームワーク、テスト、規約に合わせてください。
152以上のオープンソースのデザインシステムから選ぶか、ウェブサイト、GitHubリポジトリ、Figmaファイルをもとに作成できます。そこで定めた色、書体、余白、コンポーネントの方向性を、ウェブサイトやその後の改善に反映できます。
OpenDesignでは、内容を確認し、開発を続けられるウェブサイトのフロントエンドを作成できます。単体のHTMLや、利用可能なソース、アセットを書き出せます。確認用にはPDFや画像を利用できます。設定済みのCloudflare PagesまたはVercel連携では、対応する出力を公開できます。プロバイダーのアカウント、インフラ、バックエンドサービス、本番環境の確認は、引き続き利用者の責任となります。
実行環境を選び、再利用できるデザインシステムを適用し、レスポンシブなフロントエンドを確認したら、ローカルのプロジェクトファイルで開発を続けられます。
OpenDesignをダウンロード無料・オープンソース · ロックインなし · コーディングエージェントに対応
