JimLiu/baoyu-design

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.

何を解決するか

baoyu-design を使用すると、ユーザーは claude.ai/design の背後にあるデザインエンジンを、自身のコーディングエージェント（Cursor、Claude Code、Codex など）内でローカルに実行できます。別途ウェブサイトのサブスクリプションや手動でのアップロード手順を必要とせず、ローカル開発環境内で洗練されたUIモックアップ、インタラクティブプロトタイプ、ワイヤーフレーム、スライドデッキを直接作成でき、すべてのアーティファクトをユーザーのリポジトリに保持できます。

動作方法

このプロジェクトは、MarkdownファイルとJSX/JSのスケルトンからなるポータブルな「エージェントスキル」として実装されています。システムプロンプトに定義されたコアメソッドとクラフト基準に基づき、エージェントは設計タスクに応じて読み込みます。その後、エージェントは特定の環境（例：Cursor や Claude Code）を識別し、対応するツールマップを適用して質問、プレビュー、検証を処理します。

出力物はローカルHTTPサーバー経由で提供される自己完結型のHTMLファイルとして生成されます。これにより、ユーザーはライブブラウザプレビューで要素を指し示し、エージェントに下層のソースコードに対して特定の変更を指示することで、デザインの反復作業が可能になります。

対象ユーザー

AIコーディングエージェントを使用し、エディタから離れずにプロフェッショナルなUI/UXデザイン機能をワークフローに統合したい開発者やデザイナー。

特徴

  • 広範なデザイン機能: 高精細なデザイン、インタラクティブプロトタイプ、ワイヤーフレーム、ランディングページ、モバイルアプリ、スライドデッキをサポート。
  • デザインシステム統合: デザインシステムの作成、インポート（Figma .fig ファイルのオフラインデコードを含む）、バージョン管理されたデザインシステムの適用により、プロジェクト間での視覚的一貫性を確保。
  • 高度なスライドデッキ: 複雑なビルドアニメーションを備えたHTMLベースのスライドデッキを生成し、ローカルCLI経由で編集可能なネイティブPowerPoint (.pptx) ファイルにエクスポート可能。
  • ローカル最優先ワークフロー: すべての出力はプロジェクトリポジトリに保存され、バージョン管理が可能で、簡単にエクスポートできます。
  • エージェント非依存: skills CLI を通じて Cursor、Claude Code、Codex など、幅広いエージェントと互換性があります。

関連

  • プロジェクト
    plugin87/ux-ui-agent-skills

    AIエージェントをシニアUX/UIアーキテクトに変え、アクセシブルで本番環境に対応したインターフェースを生成するための、指示書、デザイン・トークン、自動検証ゲートを備えた包括的なキット。

  • プロジェクト
    shengjidaguai-china/personal-homepage-skill

    Personal Homepage Skill は、Claude風エージェントが18の完成度の高いビジュアルテンプレートを用いて、高品質な個人サイト、ポートフォリオ、HTMLスライドデッキを生成できるAIエージェントプラグインです。React/Tailwindギャラリー、シングルファイルHTMLテンプレート、リファレンス優先設計と品質チェックを強制するドキュメント化されたワークフローを備えています。Claudeスキルとしてインストールするか、ローカルでギャラリーを実行してスタイルを選択し、共有可能なHTMLページをエクスポートできます。

  • プロジェクト
    alchaincyf/huashu-skills

    huashu‑skillsは、57のClaude互換*Agent Skills*（設計、データ、ビデオ、ペルソナなど）のキュレーションされたインデックスです。22の軽量スキルがこのリポジトリにあります。残りは別のリポジトリです。ワンラインの`git clone`（またはサブフォルダのコピー）でインストールし、エージェントを再起動すると、スキルが使用可能になります。付属のアップデータが新しいバージョンをチェックします。このコレクションは、コードを書かずにAIエージェントに既製のプラグイン機能を提供します。

  • プロジェクト
    yejy53/Editable-Design

    Editable‑Design は、AI 駆動の編集可能なビジュアルアセット（ポスター、インフォグラフィック、研究図）の作成を可能にする Codex Skills を提供する GitHub プロジェクトです。ユーザーは Skill をインストールし、自然言語のプロンプトを与えると、実際のテキスト、個別の画像レイヤー、ビジュアルエディター、エージェントのデザイン手順のリプレイを含む構造化された HTML/CSS（または PPTX）を受け取ります。

  • プロジェクト
    alchaincyf/huashu-design

    huashu‑design は、シンプルな自然言語プロンプトから、すぐに使えるデザイン成果物（アプリのプロトタイプ、PPT デッキ、短いアニメーション、インフォグラフィック、デザイン方向のモックアップ、5 次元の批評）を生成する、オープンソースの Claude 互換スキルです。ローカルで実行され、84 の純粋な HTML/CSS スタイルテンプレートのライブラリを使用し、ブランド資産プロトコルを適用し、GUI なしで HTML、MP4/GIF、PPTX、PDF をエクスポートします。