新手引导
认识界面
· 中间是画布（可平移/缩放），右侧从上到下四栏：画板提示词 · 矢量图层 · 参考图层 · 属性
· 顶栏是工具、缩放与导出/保存；这是一个把 UI 线框图导出为「AI 友好 SVG」的工具
第 1 步 · 新建画板
· 顶栏「新建画板」→ 选预设尺寸（或自定义宽高）→ 创建；可建多个画板
· 拖画板标题可移动画板；「重命名」「删画板」管理当前画板
第 2 步 · 移动画布
· 中键 或 空格+拖动 平移；滚轮缩放；顶栏 −/+ 缩放、点百分比复位 100%
第 3 步 · 画框
· 选「矩形」/「椭圆」：在画板内单击落起点，再单击落对角点（椭圆宽高相等即圆）
· 选「多边形」：逐点单击落顶点；点回起点闭合，或双击/Enter 结束为开放折线
· 多边形绘制中：右键撤回上一点，Esc/右键取消；绘制时按 Shift 吸附 20px 网格
第 4 步 · 选择与移动
· 用「选择」工具：单击选中、拖动移动、拖四角缩放（默认整数像素，按 Shift 吸附网格）
· 方向键微调 1px（Shift 为 10px）；Alt+单击 可穿透选中下层框
第 5 步 · 多选
· Ctrl/⌘/Shift+单击 加选；Ctrl/⌘+拖动 框选；Ctrl+A 全选当前画板
· 多选后可一起 拖动 / 方向键微调 / 复制 / 删除
第 6 步 · 命名与描述
· 双击框左上角改名称、双击框内改描述；也可在右侧「属性」栏编辑
· 名称是给 AI 的语义标签（如 Header、Button、ProductList），描述写用途
第 7 步 · 层级与锁定
· 选中框后在「属性」栏用 置顶/上移/下移/置底 调整遮挡顺序
· 点图层行右侧锁图标锁定该框：锁定后画布上点不中、不被框选，避免误改
第 8 步 · 画板提示词
· 在「画板提示词」栏写整体设计意图，输入 @ 可引用某个框名
· 这段文字随该画板的 SVG 一起导出，AI 读 SVG 即可了解完整方案
第 9 步 · 参考图（描摹底板）
· 把图片拖进画布作参考底；选「参考图」工具可 拖动/缩放/旋转/翻转/调透明度
· 参考图层行可锁定；「属性」栏有 适应画板/重置/隐藏/删除
· 参考图只随「保存工程」的 JSON 走，绝不写入导出 SVG
第 10 步 · 复制 / 删除 / 撤销
· Ctrl+D 复制；Delete 删除（选中的框或参考图，无需确认）；Ctrl+Z 撤销；Esc 取消选择
第 11 步 · 导出与保存
· 「导出当前」当前画板存为 SVG；「导出全部」每画板各一个文件；「复制当前」复制 SVG 到剪贴板
· 「保存工程」存为 JSON（含参考图）、「打开工程」读回；编辑会自动暂存到浏览器
· 中间是画布（可平移/缩放），右侧从上到下四栏：画板提示词 · 矢量图层 · 参考图层 · 属性
· 顶栏是工具、缩放与导出/保存；这是一个把 UI 线框图导出为「AI 友好 SVG」的工具
第 1 步 · 新建画板
· 顶栏「新建画板」→ 选预设尺寸（或自定义宽高）→ 创建；可建多个画板
· 拖画板标题可移动画板；「重命名」「删画板」管理当前画板
第 2 步 · 移动画布
· 中键 或 空格+拖动 平移；滚轮缩放；顶栏 −/+ 缩放、点百分比复位 100%
第 3 步 · 画框
· 选「矩形」/「椭圆」：在画板内单击落起点，再单击落对角点（椭圆宽高相等即圆）
· 选「多边形」：逐点单击落顶点；点回起点闭合，或双击/Enter 结束为开放折线
· 多边形绘制中：右键撤回上一点，Esc/右键取消；绘制时按 Shift 吸附 20px 网格
第 4 步 · 选择与移动
· 用「选择」工具：单击选中、拖动移动、拖四角缩放（默认整数像素，按 Shift 吸附网格）
· 方向键微调 1px（Shift 为 10px）；Alt+单击 可穿透选中下层框
第 5 步 · 多选
· Ctrl/⌘/Shift+单击 加选；Ctrl/⌘+拖动 框选；Ctrl+A 全选当前画板
· 多选后可一起 拖动 / 方向键微调 / 复制 / 删除
第 6 步 · 命名与描述
· 双击框左上角改名称、双击框内改描述；也可在右侧「属性」栏编辑
· 名称是给 AI 的语义标签（如 Header、Button、ProductList），描述写用途
第 7 步 · 层级与锁定
· 选中框后在「属性」栏用 置顶/上移/下移/置底 调整遮挡顺序
· 点图层行右侧锁图标锁定该框：锁定后画布上点不中、不被框选，避免误改
第 8 步 · 画板提示词
· 在「画板提示词」栏写整体设计意图，输入 @ 可引用某个框名
· 这段文字随该画板的 SVG 一起导出，AI 读 SVG 即可了解完整方案
第 9 步 · 参考图（描摹底板）
· 把图片拖进画布作参考底；选「参考图」工具可 拖动/缩放/旋转/翻转/调透明度
· 参考图层行可锁定；「属性」栏有 适应画板/重置/隐藏/删除
· 参考图只随「保存工程」的 JSON 走，绝不写入导出 SVG
第 10 步 · 复制 / 删除 / 撤销
· Ctrl+D 复制；Delete 删除（选中的框或参考图，无需确认）；Ctrl+Z 撤销；Esc 取消选择
第 11 步 · 导出与保存
· 「导出当前」当前画板存为 SVG；「导出全部」每画板各一个文件；「复制当前」复制 SVG 到剪贴板
· 「保存工程」存为 JSON（含参考图）、「打开工程」读回；编辑会自动暂存到浏览器