← スキル一覧へ
🎨
baoyu-design（Claude Design スキル）
claude.ai/design の裏側にある Claude Design 設計エンジンを、ポータブルな Agent Skill として同梱。Claude Code / Cursor / Codex に導入すれば、サイトへのアップロードやサブスク不要で、洗練された UI モック・インタラクティブ試作・ワイヤーフレーム・LP・ダッシュボード・スライドをエディタ内で生成でき、成果物はすべて自己完結型 HTML としてリポジトリに残ります。
主な機能
- 設計エンジンをローカル実行
- 自己完結型HTMLを出力
- 試作・ワイヤー・スライド
- プレビューを指して修正
インストール
npx skills add JimLiu/baoyu-design
-g でグローバル導入。.claude/skills（Claude Code）または .agents/skills に配置。リポジトリ URL を渡して SKILL.md に従わせる方法も可。
使い方
導入後は自然言語で依頼、例:「瞑想アプリの設定画面の高精細案を 3 パターン作って」。Claude Code では /baoyu-design で明示的に起動。エージェントが要件を確認し designs/ 配下に HTML を生成、localhost でプレビュー。プレビュー上の要素を指して修正指示でき、視覚的な再編集ループが回せます。Claude Opus 4.8 との相性が最良。
必要条件
ローカルエージェント（Cursor / Claude Code / Codex 等）＋ Node.js（インストーラ）。プレビューサーバに Python 3。Claude Opus 4.8 推奨。
関連スキル