Diorama

# Diorama

为 AI 智能体提供一份剧本和可复制的代码，用来构建精细的 Three.js 微缩场景，也就是像素或卡通风格的小型舞台布景。适合网页和创意开发者。

由 sloemo01 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：Diorama 是一份书面剧本加代码，供 AI 智能体在构建精细的 Three.js 微缩场景时遵循。这里的微缩场景是放在底座上的小型舞台布景，带有可以重置、也可以自由环绕的四分之三英雄视角相机。动手之前，智能体会先问你想要三种外观中的哪一种，以及模型应当来自模型库还是用你自己的几何体构建。

适合谁：它适合想要一个小巧精致的 3D 场景、并乐意让 AI 智能体来搭建的开发者和创作者。

```table
行业 | 谁在用 | 怎么用 | 例子
网页开发 | 前端和创意开发者 | 为网站或演示搭建一个舞台式 3D 场景 | 一个有玩具大小人物站在底座上的游泳池场景
游戏原型 | 独立开发者 | 勾画一个小型竞技场或战斗场景 | 一场带有可重置英雄相机的竞技场战斗
内容创作 | 制作短循环片段的创作者 | 把场景录成循环视频 | 一个录成约一分钟循环的银行劫案场景
设计 | 挑选视觉风格的设计师 | 在像素、描边卡通或像素加描边之间选择 | 要求用描边卡通，而不是默认的像素
```

想要现成 3D 模型库的人，或者不使用 AI 智能体的人，可以跳过它。

用在哪里：你通过 AI 智能体使用它，做好的场景在浏览器里运行。

- 能执行 shell 命令的 AI 智能体，有没有技能目录都行
- 你自己的 Three.js 项目，智能体会把需要的模块复制进去
- 浏览器，场景在其中显示英雄相机和自由环绕

```table
使用场景 | 谁 | 得到什么
构建场景 | 网页开发者 | 一个带相机、角色阵容和所选外观的底座舞台场景
选择外观 | 设计师 | 像素、描边卡通或像素加描边，默认是像素
获取素材 | 开发者 | 有授权的素材加上手工搭建的补缺，或来自互联网、由智能体制作的模型
检查画面 | 审阅者 | 可以冻结、截图并对比的画面
```

如何设置：你需要一个能执行 shell 命令并下载文件的智能体。

- 一个有 shell 和网络访问权限的 AI 智能体
- 一个放剧本的文件夹，建议默认用 ~/skills/diorama
- 一个用来构建场景的 Three.js 项目

1. 把项目 README 里的安装提示词粘贴给你的智能体。它会问文件夹放在哪里，并等你回答。
2. 智能体下载整个仓库，而不只是 SKILL.md。这包括模板、QA 脚本和示例。
3. 它检查主要文件和文件夹是否都在，并打印它安装的版本。如果没有 shell 或网络，它会说明情况并停下。
4. 如果智能体有技能目录，它会把剧本装在那里，这样以后的会话可以按名称加载。
5. 智能体先研究剧本和它的模板，然后在动手前总结自己的发现。

```bash
git -C "<target>" rev-parse --short HEAD
```

如何使用：告诉智能体第一个微缩场景要做什么。它不会要求你填写设计表。它先研究这个主题，包括画面、素材和动作。然后它根据默认值填写 DESIGN.md，把需要的模块复制到你的项目里，并按流程构建。另有一个更新提示词，会保留你本地的改动，获取最新的 main 分支并列出变化，而且这一切都发生在它碰你的任何项目之前。

```table
工具 | 作用
SKILL.md | 剧本，也是工作流程、外观、流程管线、QA 检查和常见陷阱的唯一依据
references/ | 同样的内容，拆成适合长会话的主题文件
templates/ | 可复制进项目的代码，以及设计、来源和署名模板和 QA 脚本
verify/ | 示例
refs/SOURCES.md 和 CREDITS.md | 证明每个素材允许商用和再分发的证据
```

示例：你要一个夜市微缩场景。智能体研究这个主题，填好设计表，复制需要的模块并构建场景。在给你看任何东西之前，它会先运行 QA 脚本。你会拿到它保留的画面的路径，以及每张画面证明了什么。

新手与专家：这里的微缩场景是一个小型舞台布景，你可以在浏览器里环绕查看。可以先安装这个工具包，选一个简单的主题，比如游泳池，并回答关于外观和模型的两个问题。

每一帧只取决于时间值 t，所以你可以冻结任何一帧、截图并对比。截图算作证据，而不是碰巧抓到的画面。默认的素材来源是混合式，用有授权的素材加手工搭建的补缺。其他选项是全部来自互联网，或全部由智能体建模。SKILL.md 始终是唯一依据，智能体复制模块，而不是修改已安装的副本。

```flow
智能体询问外观和模型来源
它先研究这个主题
它填写 DESIGN.md 并复制进模块
它按流程管线构建
在给你看画面之前先运行 QA 脚本
```

注意事项：

- 三种外观是像素、描边卡通和像素加描边，不回答就是像素
- 每个素材的许可证都必须允许商用和再分发，证明材料放在 refs/SOURCES.md 和 CREDITS.md 里
- 智能体必须先证明安装成功，才能描述这份剧本
- 四个示例场景时长从 26 秒到 48 秒
- README 标明技能版本为 5.7.0，three.js 为 r170

## GitHub 上的数据（2026年11月7日）

- 星标：342
- 复刻：23
- 未关闭的议题和拉取请求：0
- 语言：JavaScript
- 许可证：MIT
- 话题：agent-skill, agent-skill-repository, agent-skills, ai-agents, creative-coding, diorama, game-art, pixel-art, pixelation, procedural-art, procedural-generation, skill

## 链接

- 代码：https://github.com/sloemo01/diorama
- 发布版本：https://github.com/sloemo01/diorama/releases
- 议题：https://github.com/sloemo01/diorama/issues
- 星标历史：https://www.star-history.com/#sloemo01/diorama&Date

## 获取代码

```
git clone https://github.com/sloemo01/diorama.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  6 KB