内容
# Blockworld
#### YouTube 视频：https://youtu.be/EHHd7kv7y3I
一个用于 AI 代理构建的体素世界。
- **MCP 服务器** — 用于放置方块的工具。
- **查看器** — 以线条艺术的形式实时渲染世界，逐块显示代理的工作过程。
- **技能** — 标记语言，教导代理什么是童话城堡或龙，以及如何在这里建造。
代理带来知识。服务器给予它操作的能力。技能给予它任务。
<img src="./image.jpg">
---
## 运行
```bash
npm install
npm run viewer # → http://localhost:5173/viewer/
```
打开后显示一个模拟城堡，以便您立即看到其运行效果。添加 `?live` 以禁止显示。
然后将代理指向 MCP 服务器：
```json
{
"mcpServers": {
"blockworld": {
"command": "node",
"args": ["/绝对路径/to/blockworld/server.js"]
}
}
}
```
它通过 WebSocket 广播，因此查看器会显示每个方块的放置过程。
```
> 为我建造一座城堡
> 为我建造一条龙
```
---
## 控制
| | |
|---|---|
| 拖动 / 滚动 / 右键拖动 | 旋转、缩放、平移 |
| **F** | 重设视角 |
| **R** | 自动旋转 |
| **G** / **E** | 网格、边缘 |
| **1–4** | 三等分、正面、侧面、计划 |
`2` 是轮廓视图 — 最适合判断构建实际效果的角度。
---
## 工具
| | |
|---|---|
| `world_info` | 网格比例 — **首先调用** |
| `list_materials` | 100 种材料 |
| `place_box` | 墙壁、地板、房间 |
| `place_cylinder` | 塔、柱子 |
| `place_cone` | 尖塔、塔顶、角 |
| `place_sphere` | 穹顶、头骨、球体 |
| `place_tube` | 曲线形状 — 颈部、尾部、身体 |
| `mirror` | 构建一半，镜像它 |
| `remove_box` | 雕刻门、窗户 |
| `place_block` | 仅限细节 |
| `clear` · `describe_world` | 重置、检查 |
所有事物都是立方体。`place_sphere` 和 `place_tube` 不会渲染球体或圆柱体 — 它们在服务器端将形状光栅化为立方体。重点是工具调用的经济性：代理描述一个 *形式*（一条路径、一个半径、一个锥度），而不是计算五千个坐标。
---
## 技能
```
.claude/skills/
blockworld/ 比例、材料、基元、构建顺序 ← 请先阅读
castle/ 童话：纤细的尖塔、陡峭的塔顶、金色
dragon/ S 型曲线脊柱、膜状翅膀、锥度
```
纯 Markdown，无需特定供应商语法。Claude Code 和 Grok 都能自动发现 `.claude/skills/`。Grok 还能读取 `.grok/skills/`，而某些代理则使用 `.agents/skills/` — 路径对内容无关紧要，因此可以自由重命名。其他代理：直接指向这些文件。
---
## 一个调节器
`config.js`:
```js
export const BLOCK_SIZE = 1.0; // 每块立方体的米数
```
所有内容都由此而生 — 查看器比例、服务器读数，以及代理自己对构建大小的感知。它不会从 Markdown 中读取块大小；它调用 `world_info`，后者根据运行时配置得出参考尺寸：
```
一个块是 50 厘米。
城堡墙 18 高
城堡塔 52 高
大龙 100 长
```
技能以 **比率** 编写 — *翼展 = 1.5 × 身长*，*塔高 = 3 × 墙高* — 永远不是米。所以，将 `BLOCK_SIZE` 减半可以得到一条龙，虽然长度仍为 50 米，但由 8 倍的立方体组成。无需修改技能。
## 布局
```
config.js 一个调节器
palette.js 100 种材料，共享
server.js 通过 stdio 和 WebSocket 的 MCP :8080
viewer/index.html 来自 CDN 的 Three.js，无需构建步骤
.claude/skills/ blockworld · castle · dragon
```
