easy-wireframe

原型线框图生成器（移动端 + PC）

把"想做什么产品、有哪几页、怎么点击流转"变成一张协调、专业的线框流程图—— 多个页面按网格横向/纵向平铺，连线标注页面间跳转。产出是零依赖的单文件 HTML。 支持两种端形态：移动端 App（iPhone 375×812）与 PC/桌面 Web（1440×900）。

风格定位（不可动摇）

• 纯净页面框：移动端是 iPhone 375×812 卡片、PC 是 1440×900 桌面框，都无浏览器/手机外壳、无状态栏，干净。
• 极简黑白灰：只用一套冷白灰 + 近黑文字，无彩色（移动/PC 共用同一套 9 个颜色变量）。
• 标准字号体系：移动端走 Apple HIG（正文 17px），PC 走更密的桌面 Web 字号（正文 14px、表格 12–13px），都按 design-system.md 锁定。
• 网格平铺 + 连线：页面按「行,列」网格坐标摆放，.link 连线说明"点击了什么 → 到哪一页"（移动/PC 完全相同的机制）。

配套文件（按需读取，渐进式披露）

移动/PC 共用：design-system.md（生成前必读，含两端字号/尺寸/连线的权威数值）。

移动端（做 App 原型时用这套）：

文件	何时读	内容
template.html	生成时复制	移动端骨架（帧 375×812）：已含全部 CSS + 网格/连线JS + 标注JS + 截图JS，.flow 留空待填
components.md	拼页面时查	移动端积木：页面摆放/连接、导航栏/列表/对话/统计，以及第 5 节扩展组件（Tab Bar/搜索/卡片/宫格/商品卡/CTA/Feed/表单/图表/浮层等）
example.html	参照	移动端黄金样例（悠集·生活好物，13 页电商全流程）

PC 端（做桌面 Web / 后台 / 管理系统原型时用这套）：

文件	何时读	内容
template-pc.html	生成时复制	PC 骨架（帧 1440×900）：与 template.html 共享同一套基础设施 JS/CSS，仅帧尺寸变量 + 组件 CSS 不同
components-pc.md	拼页面时查	PC 积木：桌面骨架（顶栏+侧栏+内容区）、面包屑、数据表格、工具条/筛选、KPI 卡、面板/卡片网格、两栏表单、标签页、分页、下拉菜单、右侧抽屉、大号弹窗、登录卡；以及沿用的图表/胶囊/时间线等
example-pc.html	参照	PC 黄金样例（云枢·企业运营中台，13 页 B2B SaaS 后台全流程）

工作流

第 0 步 · 选端形态（移动端 还是 PC）

先判断用户要做的是移动端 App 还是 PC/桌面 Web（后台、管理系统、控制台、SaaS 网页端）：

• 移动端 → 用 template.html + components.md，参照 example.html。
• PC 端 → 用 template-pc.html + components-pc.md，参照 example-pc.html。
• 拿不准就问用户一句。一个生成的文件只画一端（要么全移动、要么全 PC，不在同一张图里混排）； 用户若两端都要，就生成两个文件。

下面第 1–4 步对两端通用，差异仅在于「读哪套模板/组件文件」和「帧尺寸/组件词汇」。

第 1 步 · 明确需求

先和用户确认（缺哪问哪，不要瞎猜）：

1. App 叫什么（填进大标题 {{APP_NAME}}）。
2. 要哪几个页面、每页大致内容。
3. 页面怎么流转——从哪页点什么，跳到哪页（决定箭头）。

页面类型对应 components.md 的积木：列表/入口页、对话页、设置页、统计/图表页，或它们的组合。 需要电商 / 社交 / 内容 / 工具类的更丰富形态时，从 components.md 第 5 节扩展组件取用 （底部 Tab Bar、搜索栏、卡片、九宫格、横滑卡、Banner、商品卡网格、底部 CTA、星级评分、 Feed 动态、表单、筛选胶囊、时间线、空状态、地图、折线/圆环图，以及浮层：弹窗、底部半屏弹层、 操作菜单、Toast）——它们同样只复用锁定好的样式，不需写 CSS。需要表达「某页弹出对话框 / 半屏选择 / 操作菜单」时，给那一页单独画一帧、把浮层放进该页 .screen 内即可（见 components.md 第 5.20 节）。

第 2 步 · 复制骨架（必须用文件复制，禁止凭记忆重写）

⚠ 这一步最容易出错，务必照做：本 Skill 的全部功能（缩放、拖拽布局模式、连线布线器、 标注系统、截图、帮助浮层）都在模板的 <style>（约 1600 行）和 <script> （约 950 行）里，合计占该文件 95%，必须逐字节原样保留。 （移动端模板是 template.html，PC 端是 template-pc.html；下面以第 0 步选定的那个为准。）

1. 先确认所选模板真实存在：template.html（移动）/ template-pc.html（PC）和本 SKILL.md 在同一个 skill 目录里。
   • 用文件系统读取/复制它（如 cp、读原文件再整体写出）。
   • 若读不到所选模板（文件缺失）：立即停止，告诉用户「skill 安装不完整， 缺少该模板文件，请重新安装本 skill」——不要继续。
2. 绝对不要凭记忆/训练知识重写这个骨架：不要自己手写 <style>、不要自己重写 <script>、 不要"参照印象拼一个类似的 HTML"。凭记忆复述这 2700 行必然丢字、改写、用上已废弃的旧函数 （如 drawForks/drawXlinks），导致拖拽失灵、帮助浮层缺失、连线错乱——这正是必须避免的故障。
3. 把所选模板整文件复制为输出文件（如 prototype.html / prototype-pc.html），然后只改这些：
   • 把标题里的 {{APP_NAME}} 换成应用名。
   • 删掉 .flow 里那段占位示例注释（<!-- ┌───…───┘ --> 整块），换成真正的页面与连线（见第 3 步）。 ⚠ 这块注释里含有嵌套的 <!-- --> 和示例 <style> 字样，保留它再往后追加内容会截断注释、吞掉后面的页面—— 所以务必整块删除，参照 example.html / example-pc.html 的做法（它们已删除该注释）。
   • <style> 与 <script> 一个字符都不要动。

自检：输出文件里应能搜到 grid-auto-columns、drawLinks、helpBtn、buildLayoutExport、--frame-w 这几个标识；缺任何一个，说明你没有用最新的模板原样复制，请回到第 1 步。

第 3 步 · 拼装页面

从组件文件（移动 components.md / PC components-pc.md）复制片段，在 .flow 内先摆页面、再连线：

A. 摆页面——每个页面是一个 .stage，用 data-cell="行,列" 声明网格位置，内含带唯一 id 的 .screen：

• 每个 .stage 给唯一编号 .stage-label（① ② ③ …）和 data-cell="行,列"（行/列从 1 起）。
• 每个 .screen 给唯一 id（连线靠 id 找两端）。
• 主流程铺在同一行（1,1→1,2→1,3…）；搜索/发现/我的等支线各占一行（行 2、行 3…）。
• 替换片段里的文案、data-lucide 图标名、数值（图标名见 design-system.md 第四节）。

B. 连线——所有跳转统一用一种 .link，放在所有 .stage 之后：

<div class="link" data-from="源id" data-to="目标id" data-tag="点击「…」" data-side="auto" data-dash="1"></div>

• 同行相邻两页（行同、列差 1、目标在右）→ 脚本自动画水平直线，主流程清爽横排。
• 其余（跨行/跨列/隔页/汇聚/返回）→ 脚本用障碍物正交布线器自动绕开页面画折线、与页面留足间距。
• 只画线、不画箭头：方向靠摆位 + 线上文字表达。data-tag 写清点击动作（线会留得比文字长）； data-side 保持 auto；返回/次要跳转加 data-dash="1" 走虚线。
• 一页分出多条路线 = 放多条 data-from 相同的 .link；多入口汇聚到一页 = 多条 data-to 相同的 .link。

为什么这样设计：位置只由 data-cell 决定、与 DOM 顺序无关——中途加一页 = 追加 .stage + 给一个空格坐标， 其它页纹丝不动，不再像旧版那样一加页就整行重排错乱。漏写 data-cell 也不报错（脚本自动补空格）。

详见 components.md 第 0（摆放）与 0.5（连接）节。

第 4 步 · 自检协调度

对照 components.md 末尾的拼装清单逐项核对。条件允许时用浏览器打开或截图，肉眼确认： 标题居中、同行各页顶端对齐、文字不折行、连线不压页且离页面不贴边、同行相邻为线上带字的水平直线（无箭头）。 布局微调：在浏览器里点工具栏「布局模式」直接拖动页面换位（拖到占用格=两页交换）， 点「导出布局」把坐标贴回对话框，据此固化各页 data-cell。

协调度铁律（这套规范是反复打磨出来的，违反必崩）

1. 不要改 <style> 里的任何数值或 :root 变量（含帧变量 --frame-w/h/--col-gap/--row-gap）。 尺寸/字号/间距都是按比例锁定的，改一处就破坏整体协调。要调风格先回到 design-system.md 理解，再整体调。
2. 帧尺寸固定：移动端页面 375×812、导航栏 56px、字号走 HIG（导航/列表主文/气泡 17px）； PC 页面 1440×900、正文 14px、表格 12–13px、页面标题 20px——都由模板锁定，不要手改。
3. 布局是 CSS Grid：.canvas{width:max-content;margin:0 auto} 居中 + .flow{display:grid}， 页面按 data-cell="行,列" 摆放、grid-auto-rows:max-content 让行高随内容参差、同行顶端对齐， 窗口装不下时整页横向/纵向滚动。 ❌ 绝对禁止把 .flow 改回 flex 横排 + flex-wrap，或"窄屏旋转 90°"的响应式——那正是之前布局错乱的根源。
4. 每个 .screen 必须有唯一 id，每个 .stage 应写 data-cell（漏写会被自动补格，但不可控）。
5. 连线一律用 .link，由脚本按真实坐标画（同行相邻=水平直线、其余=绕页折线，均只画线不画箭头）；不要手写静态箭头 SVG。

内置功能（开箱即用，无需改动）

模板自带这些能力，右上角工具栏可见：

• 标注系统：开启「标注模式」后点击任意页面落图钉、写想法，可「导出标注」为文本（用于回贴给我做修改），数据存 localStorage。
  • 注释弹窗挂在 body 上、按文档坐标定位，靠近视口边缘会自动翻转，不会被页面卡片裁切。
  • 图钉用 data-index 精确定位，多页面下新建标注的弹窗始终对准本页图钉。
  • 留空的标注会在收起时自动删除；弹窗内有明确的红色「删除」按钮可随时移除。
• 整页截图：「下载截图」用 html2canvas 把整张流程图导出为 2x 高清 PNG（截图时自动隐藏工具栏），文件名跟随大标题动态命名。
  • 截图目标是 .canvas（其尺寸=全部页面真实宽高），而非 document.body——因此横向溢出视口的页面也会完整拍下，不会只下载到一部分。
  • 截图前会临时给 .canvas 铺上与 body 一致的径向渐变背景，保证下载图与网页观感一致（背景不丢失）。
• 可编辑标题：大标题与副标题可点击直接编辑、失焦保存到 localStorage、刷新恢复；保持上下结构，允许清空。
• 画布缩放：右上角工具栏的 − / 百分比 / ＋ / 「适应屏幕」可整体缩放流程图查看；也支持 Ctrl/⌘ + 滚轮、Mac 触控板双指捏合（以光标为中心缩放），百分比点击复位 100%。缩放用 transform: scale() 作用于 .canvas、.zoom-stage 撑滚动尺寸；连线绘制前总会临时把 transform 设回 none 在 1:1 坐标系下测量再恢复，故任意缩放下连线与图钉都不错位，截图也始终导出 1:1 全分辨率。wheel 缩放按 |deltaY|<50 区分触控板捏合 / 鼠标滚轮，分别用不同灵敏度系数（捏合更跟手、滚轮钳住单格跳变），手感更稳。
• 空格拖动画布：类 Figma 交互——按住 空格 给 body 加 .space-pan（抓手光标），鼠标在捕获阶段按下拖动 = window.scrollBy 反向滚动视口平移；keyup/blur 复位。在 input/textarea/select/contentEditable 内不抢空格，平移时 onScreenClick 守卫 spaceDown||panning 不落图钉。
• 布局模式（拖拽重排 + 导出布局）：工具栏「布局模式」开关后可直接拖动页面卡片换网格位置——拖到已占用格则两页交换 data-cell，连线实时重画。拖拽用 transform 跟手（除以缩放 Z）、松手按各页实测中心算落点格。点「导出布局」把每页 id + data-cell 整理成文本（复用标注导出弹窗），贴回对话框即可让 AI 固化坐标。与标注模式互斥，优先级：空格平移 > 布局拖拽 > 标注。
• 页面网格 + 连线（统一边，障碍物正交布线，永不压页）：页面按 data-cell="行,列" 用 CSS Grid 摆放，layoutInit() 启动时把坐标同步成 grid-row/column、给漏写坐标的页自动补空格。drawLinks() 收集所有 .link（兼容旧 .xlink）在 .canvas 级 overlay 画线（只画线、不画箭头，文字压线上）：同行相邻两页走水平直线；其余走障碍物正交布线器——把每个页面当外扩留白（MARGIN≈40，绕行线离页面不贴边）的障碍矩形，最短路（Dijkstra + 拐弯惩罚）在空隙里找正交折线，源/目标各开上下左右四端口，自动选「路程最短、拐弯最少、不穿任何页面」的进出边。任意布局都不压页，多条汇聚自然走不同端口互不重叠。data-side=auto（默认）可强制某边进入，data-dash="1" 走虚线。resize/缩放/拖拽后自动重绘。
• 存储按文件隔离：标注、标题/副标题缓存的 localStorage key 以文件名为命名空间（prototype:<文件名>:…）， 因此每个新生成的原型都是干净的初始状态，不会串用上一个页面的标注或标题。
• 图标急救安全网：图标走 Lucide CDN，网络异常时可能加载不出（空白）。模板内置检测—— 一旦发现图标库没加载成功，右下角自动浮现一个问号小钮（网络正常时永不出现）。用户点它即 复制一段口语化修复指令到剪贴板，粘给任意 AI，AI 就能把该文件的图标改成内联 SVG、永久免疫 网络问题。问号本身用纯字符 ? 绘制、不依赖任何图标库，故图标全坏时求助入口仍可见。默认零打扰。

这些 HTML/JS 已在模板里，保留原样即可。

页面高度（重要）

.screen 用 min-height: 812px 而非固定高度：内容少时维持 iPhone 标准 812 高，内容多时整张卡片向下延长完整展示——原型不做半遮挡滚动。内层 .body/.stat-scroll/.chat-stream 不要加 overflow:hidden（会重新裁切内容）。同一行流程里各页顶端对齐、底部自然参差，是正常的。

查看 / 截图（生成后）

生成的 HTML 是零依赖单文件，直接用浏览器打开即可交互（落标注、改标题、下载截图）。 若要在命令行确认效果，可用无头 Chrome 截图（流程图通常很宽，窗口要给够宽）：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --hide-scrollbars --window-size=2400,1600 \
  --default-background-color=ffffffff --screenshot=/tmp/preview.png "file://$PWD/输出文件.html"

连线靠 JS 测量真实坐标绘制，截图前要留足渲染时间（无头模式建议加 --virtual-time-budget=4000）。

示例参照

同目录的 example.html（悠集 · 生活好物，全流程电商 App）是这套规范的黄金样例， 随 Skill 分发、不依赖外部文件。它在一张图里完整呈现一个电商 App，页面用 data-cell 网格摆放、 跳转用统一 .link 连接，从首页分出多条主线：

• 购物主线（行 1，从左往右）：首页 → 分类 → 商品列表 → 商品详情 → 购物车 → 确认订单 → 支付成功
• 搜索线（独占一行）：搜索 → 搜索结果（搜索结果 .link 汇聚回商品详情）
• 发现线（独占一行）：社区 Feed → 内容详情（内容详情 .link 汇聚回商品详情）
• 我的线 / 门店线（各占一行）：个人中心 → 订单列表/详情/统计；附近门店 → 门店详情

几乎所有组件都在其中登场：导航栏、列表、搜索栏、Banner、九宫格、横滑卡、底部 Tab Bar、 商品卡网格、筛选胶囊、分段控制器、星级评分、底部 CTA、媒体列表、表单、订单时间线、Feed 动态、 卡片、空状态、浮层，以及网格摆放 + 统一 .link 连线（含同行直线、跨行折线、汇聚，均无箭头）。 拿不准某个页面 / 组件 / 连线怎么写时，对照它即可。 它也是一张适合直接用于产品宣发的完整 App 视图。

同目录的 example-pc.html（云枢 · 企业运营中台，全流程 B2B SaaS 后台）是 PC 版的黄金样例， 帧 1440×900。13 页覆盖桌面全部形态：登录卡、总览仪表盘（KPI 卡 + 折线 + 圆环 + 表格）、数据分析、 报表详情、订单管理（表格 + 分页）、订单详情（时间线 + 明细表）、退款弹窗、客户管理/档案（标签页 + KPI）、 商品管理（卡片网格）/编辑（两栏表单）、团队与权限（表格 + 下拉菜单）、系统设置（开关行 + 空状态）。

• 数据主线（行 1）：登录 → 总览仪表盘 → 数据分析 → 报表详情
• 订单线 / 客户线 / 商品线 / 系统线（各占一行）：列表 → 详情 →（弹窗/编辑）
• 仪表盘作汇聚枢纽：虚线跨行连到订单/客户/商品/团队（点侧栏跳转）；退款/客户档案 .link 汇聚回订单列表。

做 PC 原型时对照 example-pc.html，做移动端时对照 example.html。