# Exhibition Layout Planner

> 展览/展厅空间规划出图工具。当用户上传展厅平面图纸（CAD导出图、建筑平面图、毛坯/精装平面、手绘草图等）并希望生成展陈规划方案图时使用。能基于图纸生成四类专业出图：①分区规划平面图（不同功能区/展区用不同色块表示，带区域编号与名称）②参观动线图（带方向箭头的参观流线，区分主动线/次动线/疏散动线）③情绪/体验节奏曲线图（按参观顺序映射观众情绪起伏）④图例与区域内容说明图（色块图例+各区域展项点位说明）。只要用户提到"展厅平面图""展陈规划""分区图""参观动线""观展动线""布展方案""展区划分""色块分区""展览规划图"或上传了任何展馆/展厅/博物馆/展览空间的平面图纸并想要规划方案，就应使用本skill，即使用户没有明确说"出规划图"三个字。输出为可缩放、清晰、便于截图的HTML网页图。

- Skill: `siri2026-design/exhibition-layout-planner` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add siri2026-design/exhibition-layout-planner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/siri2026-design/exhibition-layout-planner/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: siri2026-design (https://skillmd.com/u/siri2026-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/siri2026-design/exhibition-layout-planner

---


# 展览展厅规划出图 (Exhibition Layout Planner)

把用户上传的展厅平面图纸，转化为一套专业的展陈规划出图。核心交付物是四类图，全部以 **独立 HTML 文件** 渲染（可缩放、清晰、好截图），用色块分区，配中文图例与说明。

## 这个 skill 解决什么

展览设计行业拿到一张平面图后，需要快速产出对外汇报用的规划方案图：哪块区域做什么、观众怎么走、情绪怎么起伏。本 skill 把这套流程标准化，产出风格统一、信息清晰的成套图纸。

## 工作流程（按顺序执行）

### 第 1 步：读懂图纸

用户会上传一张或多张展厅平面图。**先看清楚图，再动手**：

- 如果图已在上下文里（png/jpg 直接可见），直接观察。如果只给了 `/mnt/user-data/uploads/` 路径，先用 `view` 打开看。
- 识别并在心里（或简短列给用户）记录这些要素：
  - **整体轮廓与朝向**：展厅外墙边界、主入口、出口、安全出口。
  - **现有空间分隔**：已有的墙体、柱网、隔断、楼梯、电梯、卫生间、设备间等不可改动的固定要素。
  - **大致比例**：图上有没有比例尺、轴网编号（如 MQ-23 这类）、尺寸标注，估算总面积量级。
  - **入口/出口位置**：动线的起点和终点由此决定。
- 如果图纸信息严重不足（看不清边界、不知道入口在哪），先问用户 1 个最关键的问题再继续，不要瞎猜整体结构。

### 第 2 步：确认规划意图（必要时）

如果用户**已经给了**展区主题/数量/参观顺序（比如发了一份展陈大纲，或图2那种"序厅→探索之窗→实践天地"的分章），直接采用，不要反问。

如果用户**只发了图、没说内容**，用一两句话给出你的默认分区方案假设，并允许用户纠正。常见展览的分区逻辑参考 `references/exhibition-knowledge.md`。默认按"序厅 → 主题展区（若干）→ 互动/体验区 → 尾厅"的经典叙事结构来划分。

不要为了凑问题而反复追问。能从图和上下文推断的就推断，把假设写在图纸说明里即可。

### 第 3 步：规划分区与动线

在出图前，先在内部想清楚这张图的"骨架"，这决定了所有图的质量：

1. **分区**：把平面切成 4–8 个功能区/展区。每个区给定：编号（一、二、三…或 1.0/2.0）、中文名称、英文名（可选）、主色、所占的大致位置（用图上的坐标区域描述）。
2. **动线**：定一条主参观动线，从入口贯穿各展区到出口，顺滑不交叉、不回头。区分主动线（粗实线箭头）、次动线/支线（细线）、疏散动线（虚线，指向安全出口）。动线必须落在可通行区域，绕开固定墙体和展柜。
3. **情绪节奏**：给每个展区分配一个情绪关键词与强度值（0–100），形成一条有起伏的曲线——开场期待、主展区高潮、尾厅升华，参考图1的情绪线设计。

### 第 4 步：出图

调用 `scripts/build_plan.py` 生成 HTML。这是一个把"规划数据 JSON"渲染成成套 HTML 图纸的脚本，**不要手写整页 HTML**——脚本保证了风格统一、配色协调、图例规范。

流程：
1. 阅读 `references/render-spec.md`，了解数据 JSON 的字段结构和配色规范。
2. 把第 3 步想好的分区/动线/情绪写成一个 JSON 文件（结构见 render-spec）。把上传图纸的路径也填进去，脚本会把原始平面图作为底图嵌入。
3. 运行脚本生成 HTML。
4. 把生成的 HTML 用 `present_files` 交付给用户。

```bash
cd /home/claude/exhibition-layout-planner   # 或 skill 实际所在目录
python3 scripts/build_plan.py --data <你的规划数据.json> --out /mnt/user-data/outputs/
```

脚本默认输出四张图（各自独立 HTML，也生成一个汇总索引页）：
- `01_分区规划平面图.html` —— 色块分区 + 区域编号名称，叠加在原图底图上
- `02_参观动线图.html` —— 主/次/疏散动线箭头流线
- `03_情绪节奏曲线.html` —— 体验情绪起伏曲线
- `04_图例与区域说明.html` —— 色块图例 + 各区展项点位说明
- `index.html` —— 汇总索引（一页看全四张图）

用 `--only` 可只出其中某几张（如 `--only 1,2`）。

### 可编辑交互版（推荐用于需要创作者本人微调的场景）

除上面的静态四图外，本 skill 还提供一个**单页可编辑交互版**，用 `scripts/build_editor.py` 生成 `规划方案_可编辑.html`。它把四张图合并到一个页面，并增加三项编辑能力，适合把方案交给设计师/客户在浏览器里直接微调：

```bash
python3 scripts/build_editor.py --data <规划数据.json> --out /mnt/user-data/outputs/
```

可编辑版的能力：
1. **文字内容可编辑**——标题、副标题、说明、各展区名称/英文名/展项/情绪词均可双击直接改字，失焦自动写回数据。
2. **色块图形可编辑**——开启“编辑色块”后点选某展区，色块各顶点显示为白色锚点，可拖拽调整轮廓，使色块精准贴合平面图房间；支持在边线“加锚点”、“删锚点”、一键“还原”。这解决了异形/环形馆色块难以一次对齐的问题——创作者可像勾路径一样自行修形。
3. **右侧书签页**——章节书签（图一~图四，标注 Ch.1~4，滚动自动高亮当前章节、点击跳转）+ 展区目录（点击定位并选中对应色块）。

编辑完成后可“导出JSON”（回写修改后的坐标与文字，便于下次重出）或“另存HTML”（保存整个已编辑版本），也可“打印/PDF”。底图以 base64 内嵌，文件可离线打开。

**何时用哪个**：要正式成图、分别截图进 PPT → 用 `build_plan.py` 出四张静态图；要交付给人自行微调色块和文字、尤其是环形/异形馆 → 用 `build_editor.py` 出可编辑版。两者吃同一份 JSON。

### 第 5 步：交付与迭代

用 `present_files` 把 HTML 交给用户，先放最重要的（一般是分区平面图或 index），简短说明每张图画了什么。然后主动问一句是否需要调整分区、配色或动线——展览方案通常要改几轮。

改图时只需改 JSON 重新跑脚本，不要重写脚本。

## 风格基调

- **配色**：沿用图1的浅色建筑制图风——白/浅灰底，分区用柔和、有辨识度的低饱和色块（半透明叠在底图上）。配色板见 render-spec，已调好和谐的一套，默认直接用。
- **出图结构与信息层级**：借鉴图2——清晰的编号体系、图例释义（时间/互动/文本/展品等图标）、分层表达。每张图都要有标题块、图例、说明文字，像一份能直接进汇报 PPT 的成图。
- 中文为主，关键术语可加英文小字。

## 关键原则

- **永远基于真实图纸**：色块、动线必须贴合用户上传的真实平面，不要凭空画一个想象的展厅。底图要保留可见，让人能对照。
- **分区不重叠、动线不打架**：每块区域颜色唯一，动线落在通道上、不穿墙。
- **信息完整**：每张图自带标题、图例、说明，单独拿出来也看得懂。
- **可迭代**：所有内容由 JSON 驱动，方便用户提改后快速重出。

## 资源文件

- `scripts/build_plan.py` —— 静态出图脚本（渲染四类独立 HTML 图 + 索引页）
- `scripts/build_editor.py` —— 可编辑交互版脚本（单页，文字可编辑 + 色块顶点可拖拽 + 右侧章节书签 + 导出）
- `references/render-spec.md` —— 规划数据 JSON 的字段结构 + 配色规范（出图前必读）
- `references/exhibition-knowledge.md` —— 展览分区逻辑、动线类型、情绪节奏的行业常识（规划阶段参考）