baoyu-design を使って Claude Design をローカルでエージェントスキルとして実行する
Claude Design をローカルで Cursor、Claude Code などのエージェントスキルとして実行。洗練された UI モックアップ、プロトタイプ、ワイヤーフレームを自己完結型 HTML として生成します。
baoyu-design とは？
baoyu-design は、claude.ai/design の背後にあるデザインエンジンをポータブルな エージェントスキル としてパッケージ化したものです。Anthropic のホスト型ウェブサイトに依存する代わりに、このスキルをローカルのコーディングエージェント（Cursor、Claude Code、Codex、または 70 以上の互換エージェント）にドロップするだけで、エディタ内で同じ高品質なデザイン出力を得られます。
結果：洗練された UI モックアップ、インタラクティブなプロトタイプ、ワイヤーフレーム、ランディングページ、ダッシュボード、モバイルアプリ、スライドデッキ — すべてリポジトリ内に保存される 自己完結型 HTML ファイルとして生成されます。ウェブサイトも、別途サブスクリプションも、アップロード手順も不要です。
なぜローカルで実行するのか？
ウェブサイトからの解放
エディタを離れることなく、claude.ai/design の機能の大部分を利用できます。同じ方法論、同じクラフト基準、同じ出力形式 — しかし完全にローカルです。
Opus 4.8 で最高の結果を
このスキルは長く要求の厳しいデザインブリーフです。モデルが強力であればあるほど、結果は良くなります。Claude Opus 4.8 と組み合わせることで最高の出力が得られますが、他の高性能モデルでも十分に機能します。
説明ではなく、指さして反復する
成果物が localhost で提供されるプレーンな HTML であるため、エージェントの組み込みブラウザプレビューと要素注釈ツール（Cursor Browser / DevTools、Claude Preview、Codex Browser）を活用できます。ライブプレビューのボタンを指さして変更内容を伝えると、エージェントが基になるソースを編集します — ウェブサイトでは実現が難しい、タイトで視覚的な第 2 パスの編集ループです。
すべてはあなたのもの
出力は designs/<project>/ に自己完結型 HTML として保存され、バージョン管理、フォーク、エクスポート、または出荷が可能です。ベンダーロックインはありません。
作成可能なもの
このスキルは完全なデザインプロセスを駆動します — 質問の明確化 → デザインコンテキストの収集 → 1 つ以上の HTML 成果物の生成 → プレビューと検証。24 の組み込みスキル と、すぐに使えるコンポーネントスキャフォールドのセットが付属しています。
| エリア | 組み込みスキル |
|---|---|
| コアデザイン | ハイファイデザイン · インタラクティブプロトタイプ · ワイヤーフレーム · フロントエンド美的方向性 |
| デッキ | デッキ作成 · スピーカーノート |
| モバイル＆モーション | モバイルプロトタイプ · アニメーションビデオ · 効果音 |
| デザインシステム | デザインシステム作成 · デザインコンポーネント (.dc.html) · 調整可能にする |
| エクスポート＆ハンドオフ | スタンドアロン HTML · PDF · PPTX (編集可能) · PPTX (スクリーンショット) · Figma に送信 · Canva に送信 · Claude Code にハンドオフ |
| AI アセット＆統合 | Gemini 画像生成 · プロトタイプから Claude を呼び出す · PDF を読み取る |
スターターコンポーネント（starter-components/ 内）は、エージェントが基本を手作業で作成する手間を省きます：iOS / Android / macOS / ブラウザフレーム、パンズームデザインキャンバス、スライドデッキステージ、タイムラインアニメーションエンジン、調整パネル、入力可能な画像スロット。
仕組み
このスキルはプレーンな Markdown といくつかの JSX/JS スキャフォールドで構成されています — ビルドステップもランタイムも不要です。
skills/baoyu-design/
├── SKILL.md # エントリポイント — フロー全体を調整
├── system-prompt.md # デザイン方法論とクラフト基準（信頼できる情報源）
├── references/
│ ├── claude.md # Claude Code 用ツールマップ
│ ├── cursor.md # Cursor 用ツールマップ
│ └── codex.md # Codex Agent 用ツールマップ
├── built-in-skills/ # 24 の専門プロンプト（デッキ、モバイル、エクスポート、…）
└── starter-components/ # デバイスフレーム、デッキステージ、キャンバス、アニメーションエンジン、…
デザインを依頼すると、エージェントは SKILL.md を読み込み、system-prompt.md からコア方法論をロードし、Cursor、Claude Code、Codex Agent、または汎用ファイル対応ハーネスのいずれで実行されているかを検出し、該当するリファレンスドキュメントが存在する場合はそれを読み込みます。その後、タスクに必要な組み込みスキルのみを取り込みます。この分割により、クラフトルールはハーネスに依存せず、各環境は質問、プレビュー、スクリーンショット、検証のための独自のツールを解決します。
クイックスタート
前提条件
- ローカルエージェント — Cursor、Claude Code、Codex、またはインストーラがサポートする 70 以上のエージェント（Cline、Roo Code、GitHub Copilot…）。Cursor、Claude Code、Codex にはスキル内にファーストクラスのツールリファレンスがあります。
- 最良の結果を得るために、モデルとして Claude Opus 4.8 を選択。
- Node.js（以下の
npxインストーラを実行するため）。ローカルプレビューサーバーには Python 3 も便利です。
インストール
推奨 — skills CLI。 npx skills（Vercel Labs 提供）はこのリポジトリを読み取り、skills/baoyu-design/ を見つけ、検出したエージェントの適切なフォルダにドロップします：
# 現在のプロジェクトにインストール（エージェントを自動検出）
npx skills add JimLiu/baoyu-design
# …またはグローバルにインストール（すべてのプロジェクトで使用可能）
npx skills add JimLiu/baoyu-design -g
# 特定のエージェントを明示的に指定
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# まずリポジトリの内容を一覧表示
npx skills add JimLiu/baoyu-design --list
Claude Code の場合は .claude/skills/ に、Cursor/Codex スタイルのエージェントの場合は .agents/skills/ にインストールされます（-g を追加すると ~/ レベルのユーザーインストールになります）。
代替方法 — エージェントにリポジトリ URL を渡す。 何もインストールしたくないですか？URL をチャットに貼り付けて、エージェントにスキルを取得させてください：
https://github.com/JimLiu/baoyu-design を読み込み、その skills/baoyu-design/SKILL.md に従って瞑想アプリの設定画面をデザインしてください。
エージェントはリポジトリをクローンまたはフェッチし、SKILL.md をロードして処理を進めます — 1 回限りの使用に最適です。
使用方法
スキルがインストール（またはフェッチ）されたら、デザインタスクをプレーンな言葉で説明するだけです — 説明から自動的にアクティブ化されます：
瞑想アプリの設定画面のハイファイバリエーションを 3 つデザインしてください。
Claude Code では、/baoyu-design で明示的にトリガーすることもできます。Codex では、スキルが利用可能な場合に $baoyu-design と記述します。エージェントはいくつかの質問を明確化し、designs/ の下に HTML を構築し、localhost でプレビューします。ライブプレビューの任意の要素を指さして変更内容を伝えると、エージェントが基になるソースを編集し、高速で視覚的な第 2 パスを実現します。
プレビューサーバー
成果物は HTTP 経由でプレビューされます（マルチファイルプロトタイプは file:// からロードできません）。エージェントは通常これを自動的に起動しますが、手動で実行するには：
python3 -m http.server 4311 --directory designs
# その後、http://localhost:4311/<project>/<file>.html を開く
デザインシステム
1 回限りのモックアップに加えて、このスキルはプロジェクト全体を デザインシステム に準拠させることができます — ブランドのトークン、フォント、コンポーネント、完全な UI キットのバージョン管理されたバンドルです。システムは designs/ の下でプロジェクトの隣に配置されます：デザインシステムを作成 組み込みスキルで作成するか、事前構築済みのものをドロップインします。システムが存在すると、2 つのフローで任意のプロジェクトがそれを利用できるようになります。
既存のデザインシステムをインポートする
デザインを開始すると、エージェントは保存場所と使用するデザインシステムを尋ねます — designs/ の下のすべてのシステムを検出して一覧表示するため、なし（自由デザイン）、1 つ、または複数を選択できます。事前に名前を指定すると、メニューをスキップします：
Fluent 2 デザインシステムを使用して設定画面をデザインしてください。
選択したシステムごとに、エージェントは自己完結型でバージョン固定されたコピーを _ds/<slug>/ にプロジェクトに同期し、その CSS とコンポーネントバンドルをページに配線し、バインディングをプロジェクトの _d_meta.json に記録します。このローカルコピーにより、プロジェクトの移植性と再現性が維持されます — フォルダの外部には何もアクセスせず、再実行することで後で更新をプルできます。複数のシステムを選択すると、1 つがプライマリになります — 全体的なルックを所有し、トークンの競合があれば優先され、他のシステムは特定のコンポーネントを提供します。
インポートしたデザインシステムを使用する
システムがバインドされると、それは緩い提案ではなく、拘束力のあるビジュアル契約として機能します：すべての画面はシステムの実際のトークン、タイプ、スペーシング、コンポーネントから構築され、エージェントはシステム外の色やスタイルを発明しません。システムが出発点（既製の画面やコンポーネント）を提供している場合、白紙から始める代わりに、そこから新しいデザインをシードできます。
バインディングはプロジェクトとともに移動します。後で再度開くと、エージェントは _d_meta.json を読み取り、システムをリロードし、スタイルを維持したままデザインを続けます — 再選択は不要です。そこから、システムを更新してアップデートをプルしたり、別のシステムを追加したり、プライマリを交換したり、完全に削除したりできます。
プロンプトの例
- 「このスクリーンショットのブランドを使用して、価格ページのハイファイバリエーションを 3 つデザインしてください。」
- 「実際の状態、トランジション、フォーム検証を備えた、動作するオンボーディングフローをプロトタイプしてください。」
- 「この PRD からエンジニアリング全体集会向けの 10 スライドのデッキを作成してください。」
- 「モバイル経費トラッカーのホーム画面のレイアウトアイデアをいくつかワイヤーフレームしてください。」
- 「このコードベースからコンポーザー UI を再現し、スタンドアロン HTML としてエクスポートしてください。」
- 「デザインシステムを使用して、アナリティクス画面から始めてダッシュボードを構築してください。」
最良の結果を得るには、デザインコンテキスト（スクリーンショット、UI キット、Figma リンク、コードベース）を提供してください。実際のコンテキストから始めることが品質を最大化する最大のレバレッジです。スキルは提供しない場合、それを要求します。
クレジットとライセンス
このプロジェクトは、claude.ai/design を支える Anthropic のデザインスキル Claude Design を再パッケージ化し、ローカルエージェントで実行できるようにしたものです。これは独立したコミュニティの取り組みであり、Anthropic とは提携しておらず、推奨もされていません。
Jim Liu 宝玉 によって再パッケージ化およびメンテナンスされています。MIT ライセンス の下でリリースされています。