Repolode
bestagentkits

bestagentkits/design-studio-ai

开源设计工作区,人与 AI 智能体可在同一份版本化文档上协作设计网页、幻灯片、3D 场景与动效。

可替代:FigmaCanva

Star
222
Fork
58
未关闭 Issue
14
最近提交
8天前

这是什么?

Design Studio AI 是一个用于制作网页界面、幻灯片、报告、线框图、3D 场景和时间线视频的设计工作区。你可以从需求说明或模板开始,预览效果后通过对话或手动编辑器修改。人与智能体共同编辑同一份带版本记录的设计文档。

文本、图片、语音、音乐和视频的生成功能使用你自己的服务商密钥(BYOK)。设计可导出为 HTML、SVG、PDF、PowerPoint、WebM、GLB 和 React 原型 ZIP 等格式。智能体可通过 REST API、Streamable HTTP MCP 服务和 dsa 命令行工具访问同一批设计。

项目可部署在 Cloudflare 上,也可用 Docker 自托管,并使用持久化的 SQLite 存储。登录支持邮箱加密码,也可选择 GitHub 登录。

核心功能

  • 01对话驱动与手动编辑同一份带版本记录的设计文档
  • 02基于骨骼、蒙皮、网格和物理的 2D 角色动画,并支持可编辑的 3D 角色
  • 03可导出 HTML、SVG、PDF、PowerPoint、WebM、GLB 和 React 原型 ZIP
  • 04提供 REST API、支持 OAuth 或 API Key 的 MCP 服务和 dsa 命令行工具
  • 05文本、图片、语音、音乐和视频生成均使用自带密钥(BYOK)
  • 06支持 Cloudflare 部署或 Docker 自托管,数据持久化到 SQLite

适用场景

  • 与 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

使用前须知

  • 生成功能需要您自己的服务商凭据和账户权限。
  • 本地运行需要 Node.js 24 或更高版本。
  • CLI 包未发布到 npm 注册表,需从发布包或本地构建安装。
  • 更改 ENCRYPTION_KEY 会导致已有的服务商密钥无法解密。

标签

常见问题

design-studio-ai 是什么?
开源设计工作区,人与 AI 智能体可在同一份版本化文档上协作设计网页、幻灯片、3D 场景与动效。 Design Studio AI 是一个用于制作网页界面、幻灯片、报告、线框图、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
在哪里获取 design-studio-ai?
源代码和安装说明在 GitHub 上:https://github.com/bestagentkits/design-studio-ai

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目