JimLiu/baoyu-design

baoyu‑design – ローカルで動作する エージェントスキル としての Claude Design

何であるか

• 任意のローカルで実行可能なファイル対応エージェント（例：Cursor、Claude Code、Codex、または skills CLI でサポートされる70以上のエージェント）に、Claude Design エンジン（https://claude.ai/design で動作している同じバックエンド）を組み込むポータブルな スキル。
• スキルは Markdown ファイルのコレクション、いくつかの JSX/JS ヘルパー ファイル、および「スキル」として呼ばれる一連の ビルトインプロンプト で構成され、完全な UI デザインワークフローを制御する。
• すべての出力は 自己完結型の HTML（オプションで PDF、PPTX、動画など）であり、designs/<project>/ ディレクトリに保存されるため、バージョン管理、エクスポート、またはリポジトリから直接配布が可能。

なぜ必要か

• Web サービスやサブスクリプション不要 – デザイン作業はすべてあなたのマシン上で行われ、アーティファクトとデータはリポジトリから離れることなく保持される。
• Claude Opus 4.8（最も強力な Claude モデル）で最適に動作するが、任意の実行可能な LLM でも動作可能。
• 視覚的「ポイント＆エディット」ループ – 結果が localhost で提供されるため、エージェントの組み込みプレビュー/ブラウザを使って要素をクリックし、モデルに変更を依頼できる。即座にソースコードが更新される。
• デザインシステム対応 – 既存のデザインシステム（オフラインの Figma .fig ファイルを含む）をインポートし、新しいプロジェクトにバインド可能。一貫したブランドイメージを保証。

主な機能

分野	スキルが生成可能な内容
コアデザイン	ハイファイモックアップ、ワイヤーフレーム、インタラクティブプロトタイプ、アートディレクション
デッキ	スライドデッキ（スピーカーノート付き）、フルスクリーンプレゼンテーションモード、編集可能な PPTX または PNG スクリーンショットへのエクスポート
モバイル＆モーション	モバイルアプリプロトタイプ、アニメーション動画、サウンドエフェクト
Web＆キャンペーン	ウェブサイト、ランディングページ、HTMLメール、フライヤー、三つ折りパンフレット
データ＆リサーチ	ウェブリサーチ、データサイエンスノートブック、ビジュアライゼーション、地図
ドキュメント、3D＆イラスト	ドキュメント、3Dオブジェクト、水彩スタイルのイラスト
デザインシステム	デザインシステムの作成、インポート、バインド、バージョンピン、プレビュー；コンポーネントのスケルトン（.dc.html）
インポート	オフライン Figma .fig のデコード、GitHub リポジトリの部分チェックアウト、既存の HTML/CSS をソース素材として利用
エクスポート	オンライン HTML、PDF、PPTX（編集可能またはスクリーンショット）、MP4動画、Claude Code、Figma、Canva への直接送信
AIアセット	Gemini 画像生成、プロトタイプから Claude を呼び出し、PDFの読み取り

動作方法

• エントリーポイントは SKILL.md。エージェントにデザインを依頼すると、このファイルを読み込み、system-prompt.md からメソッドをロードし、references/ 内のリファレンスドキュメントを使って使用中のエージェント（Cursor、Claude Code、Codex など）を検出。タスクに必要なビルトイン スキルファイルのみを読み込む。
• スキルは会話型ループを調整：質問の明確化 → デザイン生成 → HTML出力 → ライブプレビュー → 視覚的2回目の編集。
• ビルドステップやランタイムは不要。エージェントが直接解釈できるプレーンな Markdown/JSX ファイルである。

インストール（Node.js必須；プレビューサーバー用にPythonはオプション）

# 推奨：Vercel‑Labs の `skills` CLI を使用
npx skills add JimLiu/baoyu-design          # ローカルエージェントを自動検出
# グローバルインストール（すべてのプロジェクトで利用可能）
npx skills add JimLiu/baoyu-design -g
# 特定のエージェントにターゲット
npx skills add JimLiu/baoyu-design --agent claude-code

• CLI はスキルを適切なフォルダ（Claude Code なら .claude/skills/、Cursor/Codex なら .agents/skills/ など）にコピーする。
• 更新も簡単：npx skills update baoyu-design（または upgrade）。

基本的な使い方

1. 自然言語でデザインの要件を記述。例：

   "瞑想アプリの設定画面のハイファイ版を3種類デザインして。"

2. スキルは自動的に有効化（または Claude Code では /baoyu-design、Codex では $baoyu-design で手動）。必要な確認を促し、designs/<project>/ 下に HTML を生成。
3. プレビューを開く（エージェントが通常、ローカル HTTP サーバーを起動）。ライブプレビューで任意の要素をクリックし、モデルに変更を依頼。ソース HTML がリアルタイムで編集される。
4. 満足したら、エージェントに エクスポート を依頼（例：PPTXにエクスポート、PDFをダウンロード、MP4として保存）。

デザインシステムワークフロー

• ビルトインの デザインシステムの作成 スキルでシステムを作成、または Figma .fig ファイルからインポート。
• 新しいデザインを開始する際、利用可能なシステムがエージェントによってリストアップされる。none、1つ、複数を選択可能。選択されたシステムはプロジェクト内に _ds/<slug>/ にコピーされ、_d_meta.json で参照される。
• システムがトークン、フォント、コンポーネントの権威あるソースとなる。モデルはシステム外の色やフォントを勝手に生成しない。
• 後でシステムを更新、交換、削除可能。バインディングはセッション間で保持される。

既存アセットのインポート

• Figma .fig – オフラインで完全にデコード。APIキー不要。ページ、コンポーネント、トークン、SVG/PNGアセットを抽出し、完全なデザインシステムまたは React コードを出力可能。
• GitHub リポジトリ – 必要なパスのみをスパースチェックアウトし、プロバンスとしてリポジトリ URL を記録。
• HTML/CSS – 実際のスタイルシートを読み込み、色、余白、影などの正確な値とアセットを新しいプロジェクトにコピー。

デッキ＆PPTXエクスポート

• デッキは deck‑stage コンポーネントを使って自己完結型 HTML として構築される。
• data-anim 属性で各要素にアニメーションを追加可能（例：fade-in、fly-in、path）。
• スキルはローカル CLI（agents/gen-pptx/）を同梱。Playwright を通じてヘッドレス Chromium を実行し、ライブ DOM をキャプチャし、PptxGenJS を使って ネイティブアニメーション付き の PowerPoint ファイルを生成。外部サービスは不要。

プレビューサーバー（手動で起動する場合）

python3 -m http.server 4311 --directory designs
# その後、http://localhost:4311/<project>/<file>.html を開く

ライセンス＆バッジ

• MIT License
• Claude Opus 4.8 に最適化（バッジ「Best with Opus 4.8」）
• Cursor · Claude Code · Codex をサポート（バッジ「Harness」）

---

結論：baoyu‑design は、強力な Claude Design エンジンを任意のローカルコードエージェント内で実行可能にし、エディタから離れることなく、モックアップ、プロトタイプ、デザインシステム管理、HTML/PDF/PPTX へのエクスポートを含むフル機能の UI/UX デザインワークフローを提供。ホストサービスへの支払いも不要。