JimLiu/baoyu-design

これは何？

主な機能

• 01UIモックアップ、プロトタイプ、ワイヤーフレーム、ランディングページを自己完結型のHTMLとして生成します。
• 02デザインをlocalhostでプレビューでき、要素を指し示して修正を依頼できます。
• 03スライド資料をネイティブアニメーション付きの編集可能なPowerPoint、またはスクリーンショットとして書き出せます。
• 04スライド資料、デザインキャンバス、デザインシステム、ダッシュボード用のエディターを提供します。
• 05Figmaの.figファイル、GitHubリポジトリ、既存のHTML/CSSからデザイン素材を取り込めます。
• 06npx skills CLIを使ってClaude Code、Cursor、Codexにインストールできます。

ユースケース

• エディター上で設定画面やオンボーディングフローのモックアップを作成する。
• PRDや分析用CSVからスライド資料やダッシュボードを作成する。
• Figmaの.figキットを取り込み、再利用可能なデザインシステムにする。
• ランディングページを作成し、単体で動作するHTMLとして書き出す。

クイックスタート

1. 1

   skills CLI を使って、プロジェクトにスキルをインストールします

   npx skills add JimLiu/baoyu-design
2. 2

   エージェントにデザインタスクを説明します（例：瞑想アプリの設定画面）

3. 3

   生成されたデザインを表示するローカルプレビューサーバーを起動します

   python3 -m http.server 4311 --directory designs

使う前に知っておきたいこと

• !最良の結果を得るには、モデルとして Claude Opus 5.5 が必要です。有料サブスクリプションが必要になる場合があります。
• !アーティファクトエディターの実行には Node.js 20 以降が必要です（dashboard skill では Node.js 22 以降）。

収録されている特集

トピック

よくある質問

baoyu-design とは？

CursorやClaude Codeなどのエージェント上でClaude Designをローカル実行し、自己完結型のHTMLモックアップ、プロトタイプ、スライド資料を作成するAgent Skill。 baoyu-designは、claude.ai/designのClaude Designワークフローを、Cursor、Claude Code、Codexなどのローカルコーディングエージェントで実行できるポータブルなAgent Skillとして提供します。エージェントは確認事項を質問しながら、UIモックアップ、インタラクティブなプロトタイプ、ワイヤーフレーム、ランディングページ、ダッシュボード、モバイル画面、スライド資料を、designs/フォルダ内に自己完結型のHTMLとして作成し、localhostでプレビューします。

baoyu-design は無料で使えますか？ライセンスは？

baoyu-design は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

baoyu-design は今もメンテナンスされていますか？

活発にメンテナンス中。baoyu-design の最終コミットは 2026年11月5日 です。

baoyu-design は何に使えますか？

エディター上で設定画面やオンボーディングフローのモックアップを作成する。 PRDや分析用CSVからスライド資料やダッシュボードを作成する。 Figmaの.figキットを取り込み、再利用可能なデザインシステムにする。 ランディングページを作成し、単体で動作するHTMLとして書き出す。

baoyu-design のインストール方法は？

skills CLI を使って、プロジェクトにスキルをインストールします: npx skills add JimLiu/baoyu-design エージェントにデザインタスクを説明します（例：瞑想アプリの設定画面） 生成されたデザインを表示するローカルプレビューサーバーを起動します: python3 -m http.server 4311 --directory designs

baoyu-design はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/JimLiu/baoyu-design