Sealos Skills で Open Design を cloud にデプロイする

Open Design は自分のマシンで動かす分には申し分ありませんが、ローカル URL は自分だけのもので、チームやクライアント、パートナーには開けません。本ガイドはSealos のデモに沿って進めます。そこではコーディングエージェントが GitHub リポジトリから Open Design を立ち上げ、続けて Sealos Skills が公開の cloud URL にデプロイします。実際の流れは上の動画でご覧いただくか、続けて記事版をお読みください。

ローカルで動く Open Design：オープンソースで agent-native なデザインワークスペース——これがオンラインにする前の出発点です。

Open Design とは？

Open Design はオープンソースで agent-native なデザインワークスペースであり、あなたがすでに使っているコーディングエージェントの上で動く、Claude Design や Figma の代替です。この解説に入る前に、知っておくとよい点がいくつかあります。

• オープンソース、Apache-2.0——すべてのコードを読め、好きな場所にセルフホストできます。
• ローカルファースト、またはセルフホスト可能——自分のマシンで動かしても、cloud に持っていっても構いません（それがまさに本ガイドで行うことです）。
• 自分の agent と key を使う——Claude Code、Codex、Gemini などを通じて生成を駆動し、自分のモデルアクセスを使います。
• プロトタイプだけではない——Web ページ、プロトタイプ、ダッシュボード、スライドデックなど、さまざまな成果物をひとつのワークスペースから作れます。

なぜ Open Design を cloud に移すのか

ソースから Open Design を動かすと、ワークスペースはローカル URLで開きます。ひとりで作業する分には最適です——起動して、デザインして、結果をリアルタイムでプレビューできます。しかし Sealos のデモが指摘するように、ひとつ落とし穴があります。そのアドレスは実質的に localhost なのです。自分には使えても、ほかの誰もアクセスできません。

デザインをチームメイトと共有したり、動くプロトタイプをクライアントに渡したり、外部のユーザーに成果を体験してもらったりするには、アプリに公開 URLが必要です。それこそが本ガイドの主眼です。Open Design をローカルのワークスペースからオンラインのサービスへと移し、「ローカルで動かす」ことをただの出発点にすることです。

GitHub リポジトリから Open Design を起動する

デモではインストール手順を手作業で読み込む代わりに、その仕事すべてをコーディングエージェント（ここでは Codex）に任せます。考え方はシンプルです。エージェントに Open Design の GitHub リポジトリを指し示し、セットアップ作業をやらせるのです。

• エージェントにリポジトリを渡す。GitHub のリンクを送り、Open Design を動かすよう頼みます。エージェントは README とクイックスタートガイドを読み、インストール手順を把握して、それを実行してくれます。
• ローカル URL を開く。起動が完了すると、エージェントが URL を提示します。それを開けばワークスペースが読み込まれます——コマンドをひとつずつ手で入力する必要はありません。

Open Design はオープンソースなので、エージェントはリポジトリを直接調べることができます。プロジェクト構造、想定される動かし方、必要なものは何か。それが次のステップ——cloud へのデプロイ——を手作業ではなくエージェントのタスクにしている理由です。

ワークスペースでデザインする

ワークスペースを開くと、これが普通のチャットツールではないことに気づくはずです。一連のスキル——Web ページ、プロトタイプ、ダッシュボード、デック——から選び、出力に一貫したビジュアルスタイルを持たせるためにデザインシステムを選べます。

デモではプロトタイプのスキルを選び、要件を貼り付けると、エージェントはすぐに作業を始めます。その途中で創作の意図について尋ねられるので、望むとおりに答えます。エージェントは左側で動き、出力は右側にリアルタイムでプレビューされます——まるでローカルの AI デザインワークスペースのように動作します。

ワークスペースで生成されたランディングページ——エージェントが左側で作業し、右側にライブプレビューがレンダリングされます。

プラグインハブでスキルとデザインシステムの全カタログを閲覧できるので、白紙のキャンバスから始めることはありません。

プラグインハブ：ワークスペースの出力を形作るために適用できるスキルとデザインシステム。

Sealos Skills で Sealos Cloud にデプロイする

ここで、ローカル URL の問題が解決されます。デモでは、Codex への次の指示はシンプルです。Sealos Skills——AI エージェント向けのスキルパック——を使って Open Design のプロジェクトを解析し、Sealos Cloud にデプロイします。

Sealos Skills は、本来エージェントが持たないデプロイのノウハウを与えます。デモが実行する流れは以下のとおりです。

1. プロジェクトを解析する。このスキルはプロジェクト構造、Docker の設定、ポート、環境変数を調べます——これらはアプリが cloud でどう動くべきかを決める詳細です。
2. デプロイ計画を生成する。その解析結果から、Sealos Cloud 向けのデプロイ構成を作成します。
3. 確認してデプロイする。計画が問題なさそうであれば、確認を求められたときに yes と答えれば、自動的にプロジェクトが Sealos Cloud にデプロイされます。
4. 公開 URL を取得する。デプロイ後、Sealos は公開アクセスリンクを返します——もうローカルアドレスではありません。チームメンバー、パートナー、外部ユーザーがそれを開いて直接アプリを体験できます。

ここでの本質的な転換は、誰がその仕事をするかです。オープンソースプロジェクトのデプロイは通常、多くの人手による判断を伴います——設定を読み、ポートを合わせ、環境変数を配線し、何かが壊れればトラブルシューティングする。Sealos Skills はそれを、AI エージェントがエンドツーエンドで実行できるワークフローに変えます——解析し、デプロイし、検証し、公開する。

ローカルのワークスペースから稼働中の cloud アプリへ

この時点で、Open Design はローカルツールからオンラインサービスへと変わっています。本当の価値は、単にデザインをワークスペースから取り出すことだけではありません——多くの人手による判断を要したデプロイが、エージェントが繰り返し確実に実行できるものへと変わったことです。ローカルで動かすのはあくまで始まりであり、他者からアクセスできることこそが、あなたの成果を実際に共有できるものへと変えるのです。

よくある質問

Open Design を動かすのに Sealos を使わなければなりませんか？ いいえ。Open Design はローカルファーストなので、自分のマシンで動かすだけで問題ありません。Sealos は、このデモでアプリを公開 URL からアクセスできるようにするために使われているサードパーティの cloud ホストです。Apache-2.0 のもとでオープンソースなので、お好みの方法でセルフホストすることもできます。

Sealos Skills とは何ですか？ AI エージェント向けのスキルパックで、デモでは Codex を動かすのに使われています。プロジェクトの Docker 設定、ポート、環境変数を解析し、デプロイ計画を生成し、アプリを Sealos Cloud に公開する——というデプロイのノウハウをエージェントに与えます。

デプロイ中、エージェントは実際に何をしているのですか？ プロジェクト構造を読み取り、Docker の構成、ポート、環境変数を確認し、デプロイ構成を生成します。そして確認を得たあと、cloud にデプロイして公開 URL を返します。

Open Design は無料ですか？ はい——Apache-2.0 ライセンスのもとでオープンソースです。支払いが発生するのは、接続したコーディングエージェントのモデル／API 利用分と、利用を選んだ任意の cloud ホスティング（Sealos など）の分だけです。

これはどのコーディングエージェントを使っていますか？ デモでは Codex を使っていますが、Open Design はあなたが接続するどのコーディングエージェントの上でも動きます——Claude Code、Codex、Gemini など——自分の key を使って。

---

この文章ガイドは Sealos のデモを基にしています。上の完全な動画をご覧になり、AI エージェントによる cloud デプロイについてさらに詳しく知るためにSealos を購読してください。