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` —— 展览分区逻辑、动线类型、情绪节奏的行业常识（规划阶段参考）