# Easy Wireframe

> 生成产品原型 / 页面流程线框图，移动端(App)与 PC(桌面 Web)两种形态。当用户想做产品原型、线框图、页面流程图、交互流程、App 原型、后台/管理系统原型、把多个页面平铺出来用箭头标注点击流转时使用。产出单文件 HTML：移动端用 iOS 标准尺寸(375×812)+Apple HIG 字号，PC 用桌面尺寸(1440×900)+更密的 Web 字号；同为极简黑白灰线框风格，内置标注系统与整页截图导出。

- Skill: `teo5777/easy-wireframe` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add teo5777/easy-wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/teo5777/easy-wireframe/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: teo5777 (https://skillmd.com/u/teo5777)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/teo5777/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 截图（流程图通常很宽，窗口要给够宽）：

```bash
"/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`。