Open Design 入門：インストール、Codex 連携、編集可能なプロトタイプの作成

Open Design はローカルファーストの AI デザイン環境です。編集できない一枚絵を返すのではなく、Codex、Claude Code、Cursor などがプロジェクト内に HTML、CSS、コンポーネント、プレゼンテーションなどの実ファイルを生成し、Open Design でプレビュー、管理、書き出しできます。

本稿では README の機能一覧を繰り返さず、Open Design の導入、コーディングエージェントの認識確認、ランディングページの生成、生成ファイルの検査、失敗時のログと復旧手順までを一連の受け入れテストとして実施します。

インストールルートを選択

交通アクセス	誰ですか?	主な制限事項
デスクトップインストーラパッケージ	Windows、MacOSの一般的なユーザー	WindowsのインストールのパッケージはSmartScreen警報を誘発するかもしれません
Docker	サービスポートを固定したい場合	コンテナとボリュームの管理が必要
ソースラン	開発者、コントリビューター、デバッグプラグインが必要な人	Node.js 24とpnpm 10.33.x

GitHub リリースのデスクトップパッケージの最新バージョンを優先的に使用してください。古いチュートリアルのような特定の履歴バージョンをダウンロードしないでください。オープンデザインは非常に迅速に更新され、最初にシステム要件と配布指示の既知の問題を見てください。

Windows デスクトップ版を導入して3項目を確認する

インストールと起動後、すぐにプロジェクトを生成せず、まずコーディングエージェントを確認します。

1
2
3


Get-Command codex -ErrorAction SilentlyContinue
Get-Command claude -ErrorAction SilentlyContinue
Get-Command cursor-agent -ErrorAction SilentlyContinue

少なくとも1つのコマンドが実行ファイルのパスを返す必要があります。PowerShell では codex が見つかるのに Open Design が未インストールと表示する場合、デスクトップアプリ起動時に不完全な PATH を継承した可能性があります。

処理の順序は次の通りです:

システムトレイを含むOpen Designのプロセスを終了します。
エージェントのインストール先がユーザーレベルの PATH に含まれていることを確認します。
Windows を再入力するか、同じ PowerShell ウィンドウから開いた設計を始めて下さい。
設定でRescanを実行

実行可能をシステムディレクトリにコピーしないようにし、その後のアップグレードとコンピテンシーの判断を混乱させます。

Docker で再現可能な環境を起動する

Docker のルートは、Web UI とローカルデーモンが正しく機能するか確認するのに適切です。

1
2
3
4


git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
openssl rand -hex 32

生成されたランダムな文字列に入力 deploy/.env: : :

1
2
3


OPEN_DESIGN_PORT=7456
OPEN_DESIGN_MEM_LIMIT=384m
OD_API_TOKEN=上で生成したランダム文字列に置き換える

それから始めて下さい:

1
2
3


docker compose up -d
docker compose ps
docker compose logs --tail 100

受入規格は「コンテーナー表示」ではなく、オープンです。 http://localhost:7456、ページが読み込まれる可能性があることを確認し、項目のリストが開き、繰り返しデータベースのマイグレーション、パーミッション、トークンエラーがログに存在しないことを確認します。

サービスの中断、データの保持:

1

docker compose down

docker compose down -v ボリューム内のデータは削除され、既存の項目が利用できていないことを判断する際にのみ使用する必要があります。

ソースコードから実行

ソースルートは Node.js 24 が必要です。最初にバージョンを確認してください。

1
2
3


node --version
corepack enable
corepack pnpm --version

現在はpnpm 10.33.xでロックされています。その他の組織

1
2
3
4
5


git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web

tools-dev は実際のアドレスを表示します。開発ポートは常に 3000 とは限らず、動的に割り当てられる場合があります。依存関係の導入に失敗したら、Node のメジャーバージョンと Corepack が選んだ pnpm のバージョンを確認し、解決のためだけにロックファイルを削除しないでください。

Codex または Claude Code と連携する

開いた設計はこの機械をスキャンします。ローカル CLI を選択した後、管理されたプロジェクトディレクトリで生成されたタスクが実行されるため、次の3つが確認される必要があります。

エージェントがログインし、通常の端末で最低リクエストを一度完了させることができます。
エージェントは、オープン・デザイン・プロジェクト・ディレクトリの権限を読み取り、書き込みます。
サンドボックスまたは承認ポリシーは、HTML、CSS、画像などの製品の作成を可能にします。

端末で最初に読み取り専用チェックを実行できます。

1
2


codex --version
claude --version

バージョン表示の成功は認証成功を意味しません。最初の接続テストでは一時ディレクトリを使い、エージェントに内容を読み取って説明させます。実際の顧客プロジェクトは使用しません。

最初の合格可能なプロトタイプを生成する

新規プロジェクトを作成する際は、ボーダークリア・ブリーフを使用します。

1
2
3
4
5


SaaS の稼働状況を監視する1ページ構成のランディングページを作成してください。
対象は小規模な開発チームです。
上部ナビゲーション、現在の状態、最近のインシデント、料金セクションを含めてください。
ダークテーマを使用し、外部画像は使わないでください。
編集可能な HTML/CSS を出力し、モバイル幅 390px で横スクロールが発生しないようにしてください。

最初の世代は、次の受諾の順に続きます。

空白のiframeで停止するのではなく、それをロードできるかどうかをプレビューします。
実際のHTML、CSS、またはプロジェクトファイルにコンポーネントファイルはありますか?
タイトルテキストをプレビューに同時に更新する。
ブラウザの開発者ツール 404 または JavaScript の異常でリソースが利用できていないかどうか。
ビューを390pxにカットし、水平スクロールとボタンマスクがないことを確認します。
ファイルを1つのセッションではなく、ファイルがまだ配置されていることを確認します。

このグループは、見栄えよりも大切です。開発を続け、ワンタイムプレビューできる製品と区別します。

CLIでプラグインやアイテムをチェック

インストールします。 od CLI の後、構造化された出力で状態を確認します。

1
2
3
4


od plugin list --json
od plugin search "landing page"
od plugin info od-default
od project list --json

デフォルトプラグインの適用例:

1

od plugin apply od-default --input brief="a one-page status dashboard"

外部エージェントのMCPアクセスをインストールする:

1

od mcp install codex

インストール後に対応する Agent を再起動し、MCP ツールのリストを確認します。コマンドが正常に返されたため、クライアントが設定を再ロードしたと仮定しないでください。

一般的な故障を判断するにはどうすればよいですか?

エージェントが未インストールと表示する

まず Get-Command codex を実行し、Open Design プロセスが実際に継承した PATH と比較します。ログイン時に起動したデスクトップアプリでは、後から追加した環境変数が反映されていない場合があります。

ページは開くが生成が完了しない

デーモンログとエージェントがログイン、ディレクトリの承認、またはコマンドの承認を待っているかどうかを確認します。エージェントが単独で実行できなかった場合は、オープンデザインを再ロードする代わりにエージェントを修正する必要があります。

Docker ページのプロンプトは、Bearer Token が必要です

アクセストークンが .env に書かれていることを確認し、コンテナを再作成します。リバースプロキシが Authorization リクエストヘッダーを削除していないかも確認してください。

1
2
3


docker compose config
docker compose up -d --force-recreate
docker compose logs --tail 200

プレゼンテーション docker compose config . 公序良俗に完全出力を送信しないでください。

生成結果が空白になる

開発者ツールを開き、コンソールとネットワークを確認します。 HTMLファイルが存在するが、プレビューが空白の場合、エントリファイル、相対リソースパス、CSP、スクリプトが最初にエラーを実行します。ファイルがまったく生成されていない場合は、エージェントツールコールを確認してください。

バックアップ、アップグレード、回復

アップグレード前にプロジェクトディレクトリと Docker ボリュームをバックアップします。ソース版ではローカル変更も退避してください。

1
2
3


git status --short
git pull --ff-only
corepack pnpm install

アップグレードを開始できない場合は、現在の投稿またはバージョンのリリース、Node/pnpm バージョンと完全なエラーが記録され、配布ノートに基づいて決定されます。ワークスペース全体の削除を最初のステップとして使用しないでください。

適用範囲と制限

Open Design は、エージェントから編集可能なデザインファイルを受け取りたい開発者に向いています。Figma の完全な代替ではなく、ブランド整合性、アクセシビリティ、実ユーザー検証を自動で解決するものでもありません。local-first も完全オフラインを意味せず、クラウドエージェントや API を使えばプロンプトやプロジェクト内容が各サービスへ送信される場合があります。

参考文献: