Easy Wireframe · 产品原型 / 页面流程线框图（移动端 + PC）

把「想做什么产品、有哪几页、怎么点击流转」变成一张线框流程图：​

​

多个页面按网格平铺、连线标注页面间跳转。产出是零依赖的单文件 HTML，浏览器直接打开。适配 Claude Code / Codex 等 Agent 环境。​

​

支持两种端形态，同一套交互与风格​

​

🪢

•

📱 移动端 App —— iPhone 尺寸 375×812 页面卡片，iOS / Apple HIG 字号​

•

🖥 PC / 桌面 Web —— 1440×900 桌面框，顶栏 + 侧栏 + 数据表格等桌面组件（后台 / 管理系统 / SaaS 网页端）​

​

移动端（黄金样例：悠集电商 App 全流程）​

PC 端（黄金样例：云枢 · 企业运营中台 B2B SaaS 后台全流程）​

​

​

​

两张图分别截自内置黄金样例 example.html / example-pc.html：页面按网格摆放、连线标注「点击什么 → 去哪一页」，一个文件画一端。​

​

30 秒开始​

​

代码块​

Plain Text

npx skills add https://github.com/teo5777/easy-wireframe --skill easy-wireframe​

​

更新：用上面命令装的执行 npx skills update easy-wireframe；手动 git clone 装的进入该目录 git pull。​

安装后直接对 Agent 描述需求即可（说清是 App 还是 PC / 后台，Agent 会选对应的一套）：​

​

代码块​

Plain Text

帮我做一个外卖 App 的原型，大概 5 个页面，从首页点进商家、加购物车、下单、支付。​

​

​

代码块​

Plain Text

帮我做一个电商后台管理系统的 PC 原型：登录、仪表盘、订单列表、订单详情、商品管理。​

​

​

​

特点​

•

🖥 移动端 + PC 双端：同一套交互/风格/工具，两种帧尺寸——App（375×812，iOS/HIG 字号）与桌面 Web（1440×900，更密的字号 + 数据表格等桌面组件）。一个文件画一端。​

•

📱 网格平铺 + 连线：页面按「行,列」坐标摆放，连线说明「点击什么 → 去哪一页」（同行相邻走直线，跨行/汇聚自动绕开页面）。​

•

🎨 极简黑白灰线框：尺寸、字号、图标按设计系统锁定（移动端走 Apple HIG，PC 走桌面 Web 尺度），短文案不折行。​

•

🧩 丰富组件库：​

◦

移动端：导航栏 / 列表 / 对话 / 底部 Tab / 卡片 / 宫格 / 商品卡 / Feed / 表单 / 时间线 / 地图 / 柱状·折线·圆环图 / 弹窗浮层 等 30+ 形态。​

◦

PC 端：顶栏 / 侧栏导航 / 面包屑 / 数据表格 / 工具条 / KPI 卡 / 面板 / 卡片网格 / 两栏表单 / 标签页 / 分页 / 下拉菜单 / 抽屉 / 大号弹窗 / 登录卡 等，复制即用。​

•

🧲 布局模式（拖拽调位）：浏览器里直接拖动页面换位置，连线实时重画；「导出布局」把坐标贴回给 AI 固化——不用再用文字描述往哪挪。​

•

📌 标注模式（改图闭环）：在图上点一下写想法，「导出标注」生成带页面名 + 坐标的指令文本，回贴给 AI 就能精准改图。​

•

🔍 缩放 / 平移 / 截图：工具栏缩放、Ctrl ⌘ + 滚轮、空格拖动画布（类 Figma）、一键导出 2× 高清 PNG。​

•

🛟 图标永不空白：图标 CDN 失败时浮现「一键修复」入口，复制指令发给 AI 即转为内联 SVG。​

•

📄 单文件 HTML：不需要构建、不需要服务器，发给同事、离线打开都能用。​

​

打开生成的 HTML 后，点工具栏最前面的 ? 可随时查看「布局模式 / 标注模式」怎么用。​

​

改图闭环：标注 / 布局，一键导出贴回​

线框图最大的痛点是画完之后怎么改。Easy Wireframe 把这件事做成了闭环：​

•

想改内容 → 开「标注模式」，在要改的页面上点一下写想法（跨页面都行）→「导出标注」复制一段结构化文本：​

​

代码块​

Plain Text

我在原型页面上做了如下标注，请据此更新 prototype.html：​

[#1] 页面：首页 | 锚点：「景区伴游」入口 | 位置：62%,40%​

想法：这里加一个搜索框​

​

•

想调位置 → 开「布局模式」，拖动页面换格子（拖到占用格＝两页交换）→「导出布局」复制各页坐标。​

把导出的文本贴回对话框发给 AI，就能精准定位到哪一页、哪个位置、要改什么，不用再用嘴描述。标注存在浏览器 localStorage、按文件名隔离，关掉再打开还在。​

适合 / 不适合​

✅ 合适：产品早期构思 / 需求评审 / 交互流程梳理 / 给设计或开发对齐页面跳转 / 快速演示 App 或后台的页面骨架。​

❌ 不合适：高保真视觉稿（本 skill 是黑白灰线框，不上色）/ 可点击的真实交互 demo（产出是静态流程图）/ 同一张图里混排 App 与 PC（一个文件画一端，两端要生成两个文件）。​

文件说明​

​

​

安装​

推荐用上面的 npx skills add。手动安装时，skill 文件在仓库的 easy-wireframe/ 子目录里，整目录放进 skills 目录即可：​

​

代码块​

Markdown

# 克隆后把子目录复制到 Claude Code 的 skills 目录​

git clone https://github.com/teo5777/easy-wireframe.git /tmp/ew​

cp -R /tmp/ew/easy-wireframe ~/.claude/skills/easy-wireframe​

​

之后输入 /easy-wireframe 使用。Codex 同理，把 easy-wireframe/ 子目录放进 .codex/skills/ 即可。​

⚠ 务必把整个 easy-wireframe/ 子目录（含 template.html / template-pc.html 等全部文件）一起装好——只装 SKILL.md 会导致生成的原型功能残缺（拖拽、连线、帮助等失效）。​

其他编码 Agent（Cursor / Kimi Code / OpenCode / Gemini CLI 等）：把仓库链接发给 Agent，让它从 easy-wireframe/SKILL.md 入手、按需加载同目录的支持文件。​

​

普通无文件系统 / 浏览器的 Chatbot 不推荐——难以稳定产出完整流程图。​

​

内置依赖（CDN，无需本地安装）​

•

Lucide — 图标​

•

html2canvas — 截图导出​