Repo-lab
AIツール

baoyu-design — Claude Designをローカルエージェントで動かすAIデザインスキル

⭐ 1,194 stars GitHub →

baoyu-design — Claude Designをローカルエージェントで動かすAIデザインスキル

baoyu-designはClaude Designのデザインエンジンをエージェントスキルとしてパッケージ化したツールです。Cursor・Claude Code・Claude Desktopなどに導入するだけで、UIモックアップ・プロトタイプ・ランディングページを自己完結HTMLとして生成できます。

GitHubで急上昇中の JimLiu/baoyu-design をご紹介します。 スター数 1194★ を獲得し、AI分野で注目されているツールです。

baoyu-design とは？Claude Designをローカルで動かすエージェントスキル

baoyu-designは、claude.ai/design のデザインエンジン「Claude Design」をポータブルなエージェントスキルとして提供するプロジェクトです。Cursor・Claude Code・Claude Desktop・Codexなどファイル操作が可能なAIコーディングエージェントに導入するだけで、Webサイトを開かずにUIデザイン作業を完結できます。

自己完結のHTMLとして出力されるため、ランディングページ・ダッシュボード・モバイルアプリのモックアップ・スライドデッキなどをエディタの中で一気通貫で作れます。サブスクリプション追加不要・ファイルアップロード不要で、すべての成果物がリポジトリ内に保存されます。

こんな人におすすめ:

  • エンジニア向け: AIコーディングエージェントを使いUIプロトタイプを素早く作りたいフルスタック開発者に最適です
  • 非エンジニア向け: デザインの知識がなくてもAIに自然言語で指示するだけでUIモックアップを作れます

主な機能・特徴

  • ワンステップ導入: Cursor・Claude Code・Claude DesktopにSKILL.mdを追加するだけで即利用開始できます
  • 多彩なデザイン出力: UIモックアップ・インタラクティブなプロトタイプ・ワイヤーフレーム・LPをHTMLで生成します
  • デザインシステム対応: デザインシステムの作成・利用・コンポーネント管理をスキル内で完結します
  • Figmaインポート/エクスポート: Figmaファイルのオフラインデコードや、成果物のFigma・Canvaへの送出に対応します
  • 多形式エクスポート: スタンドアロンHTML・PDF・PPTXとして出力でき、Claude Codeへの引き継ぎも可能です
  • Gemini画像生成連携: プロトタイプ内からGemini APIを呼び出してAI画像を直接生成できます

Claude Design ローカル エージェント 使い方 — 導入手順

インストール

導入は3ステップで完了します。

# 1. リポジトリをクローン
git clone https://github.com/JimLiu/baoyu-design.git

# 2. スキルファイルをコピー
cp -r baoyu-design/skills/baoyu-design .claude/skills/

# 3. Cursor / Claude Code でスキルを呼び出す
# 例: /baoyu-design "Readerアプリのダッシュボードを作って"

最高品質の出力を得るには

baoyu-designはClaude Opus 4.8モデルとの組み合わせが最高品質の出力を生み出します。長くて要求の高いデザインブリーフを処理するため、モデルの能力が直接成果物の品質に直結します。他のモデルでも動作しますが、Opus 4.8使用時に最も洗練されたUIが生成されます。

ビジュアルフィードバックループ

生成されたHTMLはlocalhost上でプレビューでき、Cursorのブラウザ/DevTools・Claude Preview等でライブ編集が可能です。「このボタンをもっと大きく」などの自然言語指示で要素を直接指定して修正できます。

活用事例

  • スタートアップのエンジニア: CursorでbaoYu-designを使い30分でLPプロトタイプを出力してクライアントにプレビューURLを共有、フィードバックをリアルタイムに反映する
  • フロントエンドエンジニア: Claude Codeで既存HTMLを指定してUIの改善案を視覚的モックアップとして複数パターン生成・比較し、デザイン決定を加速する
  • プロダクトマネージャー: コーディング知識なしに自然言語でアプリ画面を指示するだけでWireframeを生成、開発チームへの仕様共有に活用する

関連ツール・おすすめサービス

  • Perplexity AI — Claude DesignやAI UI生成に関する最新情報・技術動向のリサーチに最適なAI検索エンジン

まとめ

baoyu-designはAIコーディングエージェントを使いこなすエンジニアやデザイナーに最適なスキルです。claude.ai/designと同等のデザイン品質をエディタ内で実現し、成果物がすべてリポジトリに残るため、チームでの共有・バージョン管理も容易です。UIデザインとコーディングの垣根をなくしたい方にぜひ試してほしいツールです。

GitHub でチェックする →

この技術を学ぶ

AIを使ったUI/UXデザインに興味を持った方には、UdemyのAI・デザインコースもおすすめです。

毎日更新のGitHubツール情報

LINEで受け取って最新情報をキャッチアップしよう

友達追加する（無料）

関連記事

この記事が役に立ったらシェアしてください