Open Design 入門: オープンソース版 Claude Design の正しい使い方

プロジェクト概要

Open Design は Claude Design のオープンソース代替ソリューションで、nexu-io/open-design によって開発・メンテナンスされています。

核となる考え方は、とてもシンプルです：車輪の再発明はしない。あなたのPCにすでに入っているコード用エージェント（Claude Code、Codex、Cursor Agent など 16種類のCLI）がそのままデザインエンジンになり、31種類の組み合わせ可能なデザインスキルと72種類のブランド品質のデザインシステムと連携して、ローカルで一連のデザインプロセスを完結します。

主な特長：

---

対象読者

• フロントエンド／フルスタック開発者：AIでデザイン案を生成したいが、Figmaの複雑な操作は学びたくない
• 個人開発者：すばやくランディングページ、モバイルのプロトタイプ、プロダクトデモを作りたい
• デザインチーム：ローカル優先で、クラウドに依存しないデザイン自動化の仕組みが欲しい
• AIツールの愛好家：既存のコード用エージェントがデザイン領域でどこまで使えるか探ってみたい

---

必要な依存関係と環境

Node.js ~24
pnpm 10.33.x（Corepackで管理）
OS：macOS／Windows／Linux

Open Design は PATH 上にインストール済みのコード用エージェントを自動スキャンします。マシンにCLIが1つもない場合は、API Keyが必要な BYOK モードの設定方法を案内します。

---

完全なプロジェクト構成ツリー

open-design/
├── apps/
│   ├── daemon/                 # ローカルサービス（Express + SQLite）
│   │   └── src/
│   │       ├── agents.ts       # コード用エージェント検出とアダプタ
│   │       ├── skills.ts       # スキルローダー
│   │       └── server.ts       # APIルーティング
│   └── web/                    # Next.js 16 フロントエンド
│       └── src/
│           ├── prompts/        # プロンプトテンプレート
│           ├── artifacts/      # 生成物の解析
│           └── components/     # UIコンポーネント
├── skills/                     # 31種類のデザインスキル
│   ├── web-prototype/          # Webプロトタイプ
│   ├── mobile-app/             # モバイルアプリ
│   ├── dashboard/              # ダッシュボード
│   ├── guizang-ppt/            # プレゼン資料
│   └── ...
├── design-systems/             # 72セットのデザインシステム
│   ├── linear-app/
│   ├── vercel/
│   ├── anthropic/
│   └── ...
├── assets/frames/              # デバイスフレーム（iPhone、Pixel、iPad、MacBook）
└── .od/                        # 実行時データ（SQLite、プロジェクトファイル）

---

手順ガイド

1) リポジトリをクローンして依存関係をインストール

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

corepack enable は package.json 内で固定されている pnpm のバージョン（10.33.x）を自動で読み取り、チーム環境の一致を保証します。

2) ローカル開発サーバーを起動

pnpm tools-dev run web

起動に成功すると、次の2つのURLが表示されます：

✅ Daemon running at http://localhost:17456
✅ Web running at http://localhost:17573

ブラウザでWeb URLを開けば利用を開始できます。

3) コード用エージェントを選択

初めてWeb画面を開くと、Open Design があなたの PATH 上のコード用エージェントを自動検出します。

対応する16種類のCLI：

画面右上のモデルセレクタには、検出済みのエージェントが表示されます。もしCLIが1つもない場合は、BYOKモードをクリックし、OpenAI／Anthropic／Azure／Gemini のAPIでAPI Keyを使って実行します。

4) デザインスキルを選択

入口ページには31種類のスキルがシーン別にグループ表示されます：

• Design：web-prototype（デフォルト）、mobile-app、mobile-onboarding、gamified-app、wireframe-sketch、critique、tweaks
• Marketing：saas-landing、pricing-page、blog-post、email-marketing、social-carousel、magazine-poster、motion-frames、sprite-animation
• Operation/Engineering/Product：dashboard、docs-page、pm-spec、team-okrs、meeting-notes、kanban-board、eng-runbook、finance-report、invoice、hr-onboarding
• Deck（プレゼン資料）：guizang-ppt（デフォルト）、simple-deck、replit-deck、weekly-update

必要に応じて該当するスキルを選びます。たとえば mobile-app を選ぶと、モバイル向けプロトタイプを生成します。

5) デザインシステムを選択

スキル選択後、デザインシステムのパネルが表示されます。デフォルトでは、初期システムとして default（Neutral Modern）と warm-editorial（Warm Editorial）の2種類が用意されています。

ライブラリには72セットのブランドデザインシステムが含まれています：

• AI & LLM：claude、cohere、mistral-ai、ollama、x-ai…
• 開発ツール：cursor、vercel、linear-app、supabase、posthog、sentry…
• プロダクト：notion、figma、airtable、intercom、raycast…
• EC：shopify、airbnb、uber、nike、starbucks…
• 自動車：tesla、bmw、ferrari、lamborghini…
• その他：apple、ibm、nvidia、spotify…

また、自分の DESIGN.md ファイルをアップロードして、ブランドカラー、フォント、スペーシングなど9つのデザイン規約を定義することもできます。

6) デザイン指示を送る

入力欄にデザイン要件を入力します。たとえば：

make me a mobile onboarding flow for a fitness app with dark theme

フォームに記入してから送信すると、エージェントは次を行います：

1. TodoWrite の計画を生成し、リアルタイムにストリーミングで更新
2. スキルテンプレートとデザインシステムを読み込む
3. 5つの次元で自己検査（哲学、階層、実行、特異性、抑制）
4. <artifact> コードを出力
5. サンドボックスの iframe 内でプレビューをレンダリング

7) プレビューとエクスポート

デザインがレンダリングされたら、次の操作ができます：

• リアルタイム編集：右側のファイル作業スペースで直接HTML/CSSを修正
• ダウンロード：HTML（インラインリソース）、PDF、PPTX、ZIP、Markdownとして書き出し
• ディスクへ保存：「Save to disk」をクリックすると、成果物は .od/artifacts/ に保存されます
• 会話を継続：エージェントに「ボタンを角丸にして」や「配色を変えて」と伝えると、現在の原稿をベースに続けて修正します

ほかにもよく使うコマンド：

# 実行状態の確認
pnpm tools-dev status

# ログの確認
pnpm tools-dev logs

# すべてのサービスを停止
pnpm tools-dev stop

# 再起動（ポート変更のケース）
pnpm tools-dev restart --daemon-port 17456 --web-port 17573

# 問題の診断
pnpm tools-dev check

---

既存プロジェクトの修正

多くの人が Open Design を手に取った最初の反応は「結局、新しいページを生成するツールじゃないの？」です。実は Open Design は 既存プロジェクトの修正にも完全に使えますし、あなたのプロジェクトに DESIGN.md が存在する必要もありません。

中核となるロジックはとてもシンプルです。エージェントは完全なファイルシステムアクセス権を持っている——Read、Write、Bash、WebFetch はすべて利用可能。あなたのコードを分析させればデザイン言語が理解され、その上で既存のスタイルに基づいて出力できます。

ディレクションセレクタで視覚的なベースラインを素早く作る

デザイン規定がない場合、Turn 2 では5つのプリセット方向性が表示されます。それぞれが決定論的な OKLch 配色パレット＋フォントスタックです：

方向性を1つ選ぶと、エージェントはこの配色パレットでスキルテンプレートの :root 変数を上書きし、その後のすべてのコンポーネントがこの規約に従います。

スクリーンショットをアップロードし、エージェントにデザイン言語を抽出させる

これは、より実運用のプロジェクトに即した使い方です。Open Design にはブランドアセット抽出プロトコルが内蔵されています：

1. Locate  — スクリーンショット内の重要なカラー領域を特定
2. Download — スクリーンショットをプロジェクトディレクトリにダウンロード
3. Grep hex — hex の色値を抽出
4. Codify   — brand-spec.md に書き込む
5. Vocalise — エージェントは記憶で推測せず、brand-spec.md を基に出力

操作はとても簡単です：

"Here's our current app, I want you to match the styles"
# その後、スクリーンショットを添付するか、既存ページのURLを貼り付ける

エージェントはスクリーンショット内の主色・副色、フォント、スペーシングの特徴を解析し、brand-spec.md を生成します。その後の修正はこの規約に基づいて行われます。

スクリーンショットよりコードを直接読む——より正確に

エージェントのデフォルトの作業ディレクトリは .od/projects/<id>/ ですが、既存プロジェクトをそこに入れることもできます：

# あなたのプロジェクトを Open Design の作業ディレクトリにコピー
cp -r ~/my-app/.   .od/projects/<プロジェクトID>/

あるいは、次のセクションで説明する MCP を使って、別ディレクトリ間で直接読み取らせることもできます。

そして次のような指示を送ります：

"Read all .css files in ./src/styles and extract the color palette"

"Read the component library at ./components/. Generate a new
form component using the same spacing and border-radius tokens"

"I see you use Tailwind. Add a new button variant that matches
your existing primary/secondary button styles"

エージェントはファイルを走査し、CSS変数／Tailwind設定を解析してデザイントークンを抽出し、その後、既存コードのスタイルと一致する成果物を生成します。

MCPサーバー：プロジェクトをまたいでデザインファイルを読み取る

ファイルをコピーしたくないですか？ Open Design は MCP のサーバーを提供しており、あなたのコード用エージェントが Open Design プロジェクト内のファイルを直接読み取る ことができます。

Open Design の Settings → MCP Server ページで、クライアントごとの設定ガイドがあります。設定後は、他のプロジェクト（例：~/my-app）で動かしている Claude Code／Cursor のエージェントが、Open Design に開かれているプロジェクトのデザインファイルを直接問い合わせできます。

修正シーン向けの推奨フロー

1. Open Design を開き、プロジェクトの雰囲気に近いスキル（例：web-prototype）を選ぶ

2. Turn 1 フォーム：
   - Surface: Web
   - Audience: 既存ユーザー層
   - Tone: 既存プロダクトと一致させる

3. Turn 2 方向選択：
   - 一致を維持したい → 既存ページのスクリーンショットをアップロードし、brand-spec.md を抽出
   - 適度なリデザインを許可 → 視覚的なベースラインとして方向性を1つ選ぶ

4. 指示を送信：
   "Add a settings page to my existing project at ./src,
    match the color palette and typography from the attached screenshot"

エージェントは：

1. スクリーンショットを読み取り → brand-spec.md を抽出（またはコード内のCSS変数を読み取る）
2. あなたのプロジェクトの既存ファイルを読み取る
3. 新しいページで主色・副色・フォントを流用
4. 実行可能なHTMLを出力し、既存プロジェクトと同じテイストに合わせる

---

よくある問題の切り分け

Q1: Nodeのバージョンが違っていてエラー Requested version v24.x.x is not currently installed

Open Design は Node 24 を要求します。nvm または fnm でインストールしてください：

nvm install 24 && nvm use 24
# もしくは
fnm install 24 && fnm use 24

fnm を使う場合は、シェルの設定ファイルが fnm env を読み込むように確認してください（fnm公式ドキュメント参照）。

Q2: コード用エージェントが検出されない

Open Design は初回起動時に PATH をスキャンします。CLIがインストールされ、グローバルに利用可能であることを確認してください：

# いずれかのエージェントを検証
which claude     # macOS/Linux
where claude     # Windows

# すでにインストール済みでも検出されない場合は、サービスを再起動してみる
pnpm tools-dev stop && pnpm tools-dev start web

Q3: ポートが使用中

デフォルトポート 17456（daemon）と 17573（web）がすでに使用されている可能性があります：

# 別のポートに変更
pnpm tools-dev run web --daemon-port 17457 --web-port 17574

Q4: デザインシステムを切り替えてもスタイルが変わらない

Open Design のデザインシステムは DESIGN.md 内のCSS変数を読み取って注入することで動作します。毎回システムを切り替えると、代理は新しい会話で新しい変数を使います。すでに生成済みの古い会話は自動で更新されません。新しい会話を開始すれば、新しいシステムが適用されます。

Q5: プレビュー iframe が空のまま

サンドボックスの iframe は srcdoc でレンダリングします。内容が表示されない場合は：

1. ブラウザのコンソールにCSPエラーがないか確認
2. 広告ブロッカーのプラグインが iframe の読み込みをブロックしていないか確認
3. 「Download HTML」をクリックしてダウンロード後、ローカルで直接開いて確認

Q6: BYOK モードで API Key エラー

BYOK のエージェントは /api/proxy/{anthropic,openai,azure,google}/stream にあります。確認してください：

1. Settingsページで設定した baseUrl が正しいこと（OpenAI互換形式）
2. API Key が有効で、対応するモデルの権限があること
3. apiKey フィールドを未入力の場合、サーバーがリクエストを拒否します（SSRF防御）

---

追加の読み物／発展的な方向性

カスタムデザインスキルを追加する

スキルは SKILL.md + assets/ + references/ フォルダの形で存在し、Claude Code の SKILL.md 仕様 に従います。

skills/ の下に新しいフォルダを作成し、SKILL.md を追加して od: のフロントマター（mode、scenario、design_system.requires など）を定義します。サービスを再起動すると、スキル選択器に自動で表示されます。

Claude Design のエクスポートパッケージをインポート

Anthropic の Claude Design は ZIP をエクスポートできます。この ZIP を Open Design のウェルカム対話ボックスにドラッグ＆ドロップすると、POST /api/import/claude-design が解析してプロジェクトを再構築し、エージェントがシームレスに編集を引き継げます。

MCPサーバーの統合

Open Design は stdio MCP のサーバーを提供しています。Claude Code／Cursor／VS Code などの MCP クライアントで設定すると、エージェントは Open Design プロジェクト内のデザインファイルと素材を直接読み取れます。手動でZIPをエクスポートする必要はありません。

デスクトップ版アプリのビルド

Electron のデスクトップ版は macOS（Apple Silicon）と Windows（x64）に対応しています：

# macOS
pnpm tools-pack mac build --to all
pnpm tools-pack mac install

# Windows
pnpm tools-pack win build --to nsis
pnpm tools-pack win install

パッケージ化されたAppは単独で起動でき、データはシステムの AppData ディレクトリに保存されます。

メディア生成機能の拡張

コード成果物に加えて、Open Design は画像（gpt-image-2）、動画（Seedance 2.0、HyperFrames）、音声（Suno、Udio）を生成するモデルも統合しています。API Key を設定すると、デザインプロセス内でそのまま .mp4 や .png といったメディアファイルを出力できます。

---

プロジェクトの所在地：nexu-io/open-design