bestagentkits/design-studio-ai

これは何？

主な機能

• 01チャットと手動編集で、同じバージョン管理されたデザインドキュメントを編集
• 02ボーン、スキン、メッシュ、物理演算に対応した2Dキャラクターのモーションと、編集可能な3Dキャラクター
• 03HTML、SVG、PDF、PowerPoint、WebM、GLB、ReactプロトタイプZIPへのエクスポート
• 04REST API、OAuthまたはAPIキーに対応したMCPサーバー、dsa CLI
• 05テキスト、画像、音声、音楽、動画の生成に自分のキーを使用
• 06永続化されたSQLiteストレージを備えた、CloudflareまたはDockerでのセルフホスト

ユースケース

• AIエージェントでランディングページの下書きを作成し、手作業で仕上げる
• PowerPointまたはGoogle Slidesにエクスポートできるプレゼンテーション資料を作成する
• アニメーション付きの3Dシーンや、2Dキャラクターのモーションクリップを作成する
• 独自のプロバイダーキーを使い、チーム向けのデザインワークスペースをセルフホストする

クイックスタート

1. 1

   依存関係をインストールする

   npm ci
2. 2

   CLI とアプリをビルドする

   npm ci --prefix packages/cli
3. 3

   サーバーを起動する（先に ENCRYPTION_KEY と APP_URL を設定してください）

   npm start
4. 4

   ブラウザーで localhost:8787 にアクセスして Studio を開く

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

• !生成には、ご自身のプロバイダー認証情報とアカウントへのアクセス権が必要です。
• !ローカルで実行するには Node.js 24 以降が必要です。
• !CLI パッケージは npm レジストリに公開されていないため、リリース tarball またはローカルビルドからインストールする必要があります。
• !ENCRYPTION_KEY を変更すると、既存のプロバイダーキーを復号できなくなります。

トピック

よくある質問

design-studio-ai とは？

Webページ、スライド、3Dシーンを、人とAIエージェントが同じバージョン管理されたドキュメント上で編集できるオープンソースのデザインワークスペース。 Design Studio AIは、Webインターフェース、スライド、レポート、ワイヤーフレーム、3Dシーン、タイムライン動画を作成するためのワークスペースです。概要やテンプレートから始め、プレビューを確認してから、チャットまたは手動エディターで変更を加えます。人とエージェントが同じバージョン管理されたドキュメントを共同で編集できます。

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

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

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

活発にメンテナンス中。design-studio-ai の最終コミットは 2026年10月12日 です。

design-studio-ai は何に使えますか？

AIエージェントでランディングページの下書きを作成し、手作業で仕上げる PowerPointまたはGoogle Slidesにエクスポートできるプレゼンテーション資料を作成する アニメーション付きの3Dシーンや、2Dキャラクターのモーションクリップを作成する 独自のプロバイダーキーを使い、チーム向けのデザインワークスペースをセルフホストする

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

依存関係をインストールする: npm ci CLI とアプリをビルドする: npm ci --prefix packages/cli サーバーを起動する（先に ENCRYPTION_KEY と APP_URL を設定してください）: npm start ブラウザーで localhost:8787 にアクセスして Studio を開く

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

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