# Playful Lab 3d

> This skill should be used when the user asks to "用顽趣实验室 3D 做 PPT", "做怪物实验室风格演示", "做角色驱动的 3D 产品发布", "playful lab deck", "monster 3D presentation", or wants a colorful red-blue-green character-led commercial deck with editable PPTX export.

- Skill: `jane-xiaoer/playful-lab-3d` (Agent Skill, multi-file: 19 files)
- Install (CLI): `npx skillmds@latest add jane-xiaoer/playful-lab-3d`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jane-xiaoer/playful-lab-3d/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: jane-xiaoer (https://skillmd.com/u/jane-xiaoer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jane-xiaoer/playful-lab-3d

---


# 顽趣实验室 3D · Playful Lab 3D

把大纲、文章或产品信息转成角色驱动的 3D 网页 PPT，并同时导出可编辑 PPTX。采用三色人格、夸张怪物、实验室道具、材质反差和广告式构图；保持原创，不复制任何参考品牌的角色、商标、包装或标语。

## 核心原则

1. **先分配人格，再选颜色。** 将内容拆为 2–4 个角色职责，例如主持人、分析师、挑战者、实验员。为每个职责定义身体几何、表情、动作、道具和一句口号。
2. **一页只设一个主阵营色。** 从红、蓝、绿中选择主色；另外两色只作小面积强调。保持至少 35% 暖白留白。
3. **让角色承担信息任务。** 角色必须指向、托举、追逐、观察或操作页面中的概念；禁止把角色当角落摆件。
4. **混合材质而非统一黏土。** 每页组合软胶、哑光黏土、毛绒和少量金属中的两种，避免退化为好奇果冻 3D 的换色版。
5. **保留精确文案。** 标题、正文、数字和标签全部放在 `#txt` 中作为真 HTML；禁止把精确文案烤入图片或 WebGL。
6. **为 PPTX 明确注册对象。** 对需要在 PowerPoint 中独立移动的 Three.js 对象调用 `registerPptx3D(object, id, { pages })`。

## 工作流

### 1. 建立内容角色表

列出每个内容角色的职责和视觉人格：

```text
角色 ID / 内容职责 / 主色 / 身体几何 / 标志器官 / 动作 / 道具 / 口号
```

保持 2–4 个持续出现的角色。封面允许三个阵营同框，普通内容页只突出一个阵营。

### 2. 规划页面和节奏

根据内容决定页数，不固定为 8 或 20 页。使用 `references/layout-patterns.md` 中的八种骨架。推荐节奏：

```text
集合封面 → 宣言 → 角色/章节 → 数据或流程 → 反差页 → 产品舞台 → 总结阵容
```

避免连续三页使用同一主色或同一构图。每 3–4 页安排一页高留白宣言页。

### 3. 选择资产生产线

- 为可转动、可重组的工具和装置创建 Three.js 对象：软管、眼球、胶囊、牙齿、烧瓶、轨道、棋盘舞台、巨型工具。
- 为复杂原创角色调用真实图片模型。先写独立 brief，再生成白底原图，移除背景，验证 RGBA、透明边距和完整轮廓，最后加入 picker。
- 禁止把程序化 Three.js 截图冒充图片模型生成资产。
- 禁止从参考网站打包或分发角色、Logo、包装和商业图片。

读取 `references/character-system.md` 与 `references/image-prompts.md` 完成原创角色设计。

### 4. 构建 HTML Deck

从 `demo.html` 复制运行时并替换 `PAGES` 内容。保持以下 DOM：

```html
<canvas id="cv"></canvas>
<div id="frame">…结构与导航…</div>
<div id="txt">…真文字…</div>
<div id="stk">…独立 PNG/SVG 素材…</div>
```

使用暂停、可 seek 的确定性动画。为截图和导出支持：

```text
?p=0       指定页码
&still=1   停止动画并显示最终状态
&export=background
&export=object&object=<id>
```

### 5. 注册 3D 对象

暴露：

```js
window.__PPTX_EXPORT__ = {
  version: 1,
  pageCount: () => PAGES.length,
  objectsForPage: pageIndex => [],
  apply: pageIndex => {}
};
```

注册示例：

```js
registerPptx3D(heroGroup, 'hero-monster', { pages: [0, 3] });
registerPptx3D(toolGroup, 'diagonal-tool', { pages: [0] });
```

注册 Group 以整体编辑；需要拆件编辑时注册子对象。保持灯光、阴影、地板和环境未注册，使其留在背景层。

### 6. 视觉与技术 QA

读取 `references/checklist.md`。至少检查：

- 1600×900 下全部页面无裁切；
- 三色人格清晰且每页只有一个主阵营；
- 角色轮廓能在 1 秒内读懂；
- 文案没有烤进图片；
- `still=1` 与正常动画最终状态一致；
- WebGL 控制台无错误；
- 移动端仍可浏览；
- 减少动态偏好得到尊重。

### 7. 导出可编辑 PPTX

运行：

```bash
python3 scripts/export-haoqi-pptx-editable.py \
  styles/playful-lab-3d/demo.html \
  -o playful-lab-3d-editable.pptx --scheme plus
```

当前共用的导出器按运行时元数据工作，不依赖 Haoqi 页面数量或对象名称。验证 PPTX 页数、真文本框、独立图片对象和原生形状，并回渲封面、数据页和结尾页。

## 输出要求

同时交付：

```text
deck.html
 deck-editable.pptx
预览联系表
资产清单
```

说明可编辑边界：HTML 文案为真文本；注册 3D 主体和透明角色为独立图片；支持的色块、棋盘、线条为原生形状；实时材质、灯光和阴影保留在背景中。

## 资源

- `README.md`：风格定位与使用方式
- `design-tokens.json`：颜色、材质、尺度和动效 token
- `references/visual-language.md`：完整视觉语言
- `references/character-system.md`：角色设计协议
- `references/layout-patterns.md`：八种页面骨架
- `references/image-prompts.md`：原创角色提示词配方
- `references/motion-system.md`：四类确定性动效
- `references/checklist.md`：交付检查清单
- `PPTX_EXPORT_PROTOCOL.md`：可编辑导出协议