baoyu-design 運営中

baoyu-designは宝玉がオープンソースで公開しているプロジェクトで、claude.aiのデザインエンジンを移植可能なAgent Skillにパッケージ化し、Cursor、Claude Code、Codexなど70以上のローカルAgentで高精度なUIデザイン、プロトタイプ、スライド、デザインシステム、データダッシュボードを直接生成できます。生成物はローカルの純粋なファイルとして保存され、Gitでバージョン管理できます。LAN上での複数ロール協業とバージョン履歴に対応し、DeepSeek Harnessプラグインも提供します。

WeChatでフォローして「开源」と返信すると、AIオープンソースプロジェクト交流グループに参加できます
スライド生成（claude-slides）：自然言語でスライド一式を生成。ローカルエディターでプレゼンテーション、テキスト編集、ドラッグ＆ドロップができ、PDF/HTML/PPTXに書き出せます。
複数アートボード対応デザインキャンバス（claude-design）：複数のアートボードを並べて管理し、インタラクティブなプロトタイプを再生できます。HTML/PDF/PNGに書き出せます。
デザインシステム構築（claude-design-system）：tokens、ブランドガイド、コンポーネントプレビューを生成し、エディターで色、フォント、コンポーネントを直接閲覧・編集できます。
データダッシュボード（claude-dashboard）：CSV/TSV/JSONデータセットをリアルタイムチャートページに変換し、各数値を元データの行まで追跡できます。
チャートデザインガイド（dataviz）：Agentがチャートを描く前に必ず参照する規約で、配色の可読性と色覚多様性への配慮を確保します。
プレビュー上でのクリック編集：Agentのブラウザプレビューで要素をクリックして直接修正指示を出すと、ソースコードの変更箇所を自動的に特定します。
LAN協業：ロールごとに分けたLANリンクをワンクリックで生成でき、アカウントなしで協業に参加できます。

環境を準備：Node.js 20+をインストールし、ローカルにCursor、Claude Code、CodexなどいずれかのAgentがあることを確認します。
Skillをインストール：npx skills add JimLiu/baoyu-designを実行すると、CLIがAgentを自動検出し、対応するディレクトリにSkillをインストールします。
モデルを選択：最適なデザイン結果を得るため、AgentのモデルをClaude Opus 5.5に設定します。
要件を伝える：「四半期報告用のスライド一式を作って」のように自然言語で成果物を説明するか、/claude-slides、/claude-designなどのスラッシュコマンドを直接入力してSkillを指定します。
生成を待つ：Agentがdesigns//ディレクトリにファイルを生成してローカルエディターを起動し、http://127.0.0.1のアドレスを表示します。
プレビューと編集：ブラウザでエディターを開くと、要素のクリック編集、ドラッグ＆ドロップによるレイアウト調整、プロトタイプの再生ができます。変更はリアルタイムでファイルに保存されます。
協業と共有（任意）：artifact.mjs share designs/を実行してLANリンクを生成し、チームメンバーがロールに応じて編集またはコメントに参加します。
バージョン管理（任意）：成果物は通常のファイルなので、Gitでデザイン稿のコミット、ブランチ、PR管理を直接行えます。
書き出しと納品：エディターからPDF、HTML、PPTX、PNGへワンクリックで書き出し、顧客への納品やプレゼンテーションに利用できます。

GitHubリポジトリ：https://github.com/JimLiu/baoyu-design

完全ローカルで動作：claude.aiのデザインエンジンをローカルAgentに移し、成果物を自分のリポジトリに直接保存できるため、クラウドに依存しません。
Agentエコシステムに幅広く対応：Cursor、Claude Code、Codex、Clineなど70以上のAgentにインストールするだけで使え、単一プラットフォームに制限されません。
成果物がそのままソースコード：生成されるのは自己完結型HTMLなどの純粋なファイルで、Gitのバージョン管理、PR、プロジェクトリポジトリに直接追加できます。
デザインと開発を切り替えずに作業：同じセッション内でデザイン稿をそのままAgentに渡して機能を実装でき、書き出しやアップロードは不要です。
指定箇所を正確に修正：ブラウザプレビューで要素をクリックするだけでAgentに正確な修正を指示でき、クラウド版のようにエディターを何度も切り替えるより数倍効率的です。
LAN上での複数人協業：ロールごとに分けたLANリンクをワンクリックで生成でき、アカウントへのログインは不要です。

プロダクトのプロトタイプ設計：プロダクトマネージャーや個人開発者が自然言語で高精度なアプリ画面とインタラクティブなプロトタイプを素早く生成し、会議前の30分で3案を作成してレビューにかけられます。
ピッチと報告用スライド：起業家やビジネスパーソンがPRDや財務データをAgentに渡すと、デザイン規約に沿った四半期報告や資金調達ピッチ用のデッキを数分で生成し、PPTX/PDFに書き出してすぐ利用できます。
データダッシュボード構築：運用担当者やアナリストがCSV/JSONの業務データをclaude-dashboardに渡すと、リアルタイム更新に対応したデータダッシュボードを自動生成し、各指標を元データの行まで掘り下げて追跡できます。
デザインシステムの蓄積：チーム内に分散したデザイン上の決定事項をブランドガイド付きのdesign-systemに整理し、Gitリポジトリ経由で全プロジェクトに配布することで、複数プロダクトラインのビジュアルを統一できます。