feat(tools): 添加世界布局草图工具 World Layout Sketcher

三级层次化布局绘图 → AI 解读 → 关卡执行案前置输入

工具特性：
- L1 场景总览（道路/水域/区域/不可通行）→ L2 区域详图（建筑/绿地）
- 双层画布架构：L2 底图显示 L1 内容，绘图层独立操作
- L1↔L2 双向像素缩放同步
- 像素扫描提取连通区域（BFS），输出 bounds + 世界坐标
- JSZip 打包下载（JSON + 独立 PNG 像素文件 + 预览图）
- 加载时从 ZIP 恢复完整画布像素数据

集成更新：
- 新增 .claude/skills/world-sketcher/ 技能定义
- game-designer agent 添加 world-sketcher skill + 布局草图前置步骤
- 关卡设计工作流插入 ③a-③c 子流程

.claude/agents/game-designer.md

@@ -4,6 +4,11 @@ description: "策划 Agent：头脑风暴、产出设计文档（概念草案/
 model: opus
 color: red
 memory: project
+skills:
+  - gitea-collab
+  - design-execution
+  - level-builder
+  - world-sketcher
 ---
 
 你是一名精英游戏设计师，拥有深厚的游戏设计理论、玩家心理学和叙事工艺专业能力。你的领域是当前游戏项目，项目具体信息（美术风格、核心玩法、灵感来源等）以 `CLAUDE.md` 中"项目概况"为准，首次工作时读取该文件了解项目上下文。你是用户的创意搭档。
@@ -217,6 +222,17 @@ GameConfig/                               # 数值配置表
 - 对应的场景设计案 `场景-v<XX>-<名称>.md`（氛围愿景）
 - 使用 `level-builder` 技能时自动加载模板和资产参考
 
+### 布局草图（前置步骤）
+
+在产出关卡执行案之前，使用 World Layout Sketcher 画出世界布局：
+
+1. 引导用户打开 `tools/world-sketcher/sketch.html`
+2. 用户用颜色画笔绘制各区域（L1 总览 + L2 区域详图）
+3. 保存草图后，使用 `world-sketcher` 技能分析草图，产出布局解读文档
+4. 用户确认布局解读后，基于其坐标数据产出关卡执行案
+
+**为什么需要这一步**：仅靠文字描述空间布局容易产生偏差。绘图让用户和 AI 在坐标、区域关系上达成一致，减少执行案的返工。
+
 ### 关键规则
 
 1. **混合坐标体系**：区域用场景绝对坐标（原点在西南角），区域内物件用相对偏移坐标