线框图草图模板 (Wireframe Sketch Template)

手绘风格的低保真线框图，刻意呈现“草稿”质感——旨在邀请布局反馈、表明“不可交付”状态，或在无需承诺视觉设计的情况下记录信息架构。

⚠️ 首先选择骨架 (Pick the Skeleton FIRST)

此技能最大的失败模式：模型只继承了笔触（抖动、虚线、手写），却写出了错误的文档结构——例如，需要多屏流程文档时却生成了三个孤立的应用界面，或者把站点地图塞满了编辑插图。

在动笔之前，请在回复中声明你选择的是哪个骨架以及选择理由。 将用户的描述与下表匹配：

用户提及的词	骨架	原因
报纸/杂志/登陆页/官方网站/宣传册/单页/一页纸/编辑	A. 单页编辑型	长页面，章节堆叠，内容密集
应用/移动端/手机/桌面应用/SaaS流程/用户路径/注册流程/结账流程/多屏/多页面/注册/登录/新手引导/设置/标签页/表单流程	B. 应用多屏流程型	多个屏幕、导航、状态、触发器
信息架构/IA/站点地图/流程图/关系图/节点图/数据流/状态机/权限矩阵	C. IA/站点地图型	节点+连线，无实际屏幕
不明确/用户未说明/两者都行	先询问用户，不要默认选择	—

如果用户给出了主题但没有骨架线索，请询问用户选择哪个。选错骨架意味着需要返工。

骨架 A — 单页编辑型

foolscap-wireframe.html 是该骨架的参考文件。当制品为单个可滚动页面（报纸、杂志跨页、登陆页线框图、宣传册、单页PRD插图）时使用。

必选章节（按顺序，可省略1-2个，但需保持节奏）：

刊头/横幅 — 标题、期号/版本、日期
主推内容 — 一个大的主导区块，包含标题+引言+手绘插图占位符
3-5个内容章节 — 每个都有自己的h2，混合文本插图和草图插图
侧边栏/简介/列表块 — 简短项目，密集排版，打破节奏
CTA/注册/页脚

密度要求：力求达到参考文件 foolscap 每平方英寸的内容量——稀疏的单页线框图会显得像半成品，而不是草稿。

骨架 B — 应用多屏流程型 ⛔ 硬性最低要求

foolscap-wireframe.html 不是该骨架的参考文件——仅借用其SVG滤镜、字体堆栈和虚线单元格的美学风格。文档结构必须从下面的检查清单中组装。

必选章节（必须全部包含——否则页面不完整）

封面 — 应用名称 + 版本 + 角色/用户画像 + 一句话范围（“MVP/测试版/v0.3/仅费用追踪，不含投资”）
站点地图/导航图 — 展示所有屏幕及其关系的可视化树或网格。不是列表——而是包含方框和连线的实际图。
6-8+个核心屏幕，以 figure 块的形式呈现。对于一个费用追踪应用，至少包括：启动页/欢迎页 → 首页（概览） → 添加条目（金额→类别→备注→保存） → 账单详情 → 月度统计 → 类别管理 → 预算设置 → 个人资料/设置。3个屏幕不是线框图文档，而是草图样本。
至少1个流程箭头图，展示用户跨屏幕的路径（例如“首页 → 点击‘+’ → 添加条目 → 保存 → 提示消息 → 返回首页”）。不要在屏幕之间只放一个单独的 ↓——要在箭头上写明触发条件。
每个具有状态的屏幕，至少1个状态变体：空/加载/错误/成功。选择重要的屏幕（列表页→空状态；表单页→错误状态）。
结尾部分 — 开放问题/待办事项列表/版本日志/下一步决策事项

每个屏幕的要求

每个屏幕块必须包含：

图编号 — Fig. 02（中文写作时使用本地化形式“图 02”），顺序编号，由流程箭头图引用
一行职责描述 — “添加条目 · 从首页的‘+’按钮进入；保存后显示提示消息并返回首页”
触发批注 — 哪些入口点导向此处，哪些出口通往何处
页边批注 — 每个非平凡屏幕至少1条手写旁注（约束、边界情况、“待定”、开放问题）

布局

垂直堆叠屏幕，屏幕之间带有明确的箭头和触发标签（不是被动的 ↓）
或者水平流程条，屏幕从左到右排列——适用于新手引导/结账等线性流程
不要将屏幕放在没有流程指示的网格中——那是截图画廊，不是流程文档

内容密度红线

屏幕少于5个 → 拒绝，要求用户提供更多流程，或诚实降低范围
没有站点地图 → 拒绝，没有站点地图文档无法阅读
没有状态变体 → 至少要标记空/错误的位置，即使不画出来（“空状态：见图 04a / 待定”）
没有任何页边批注 → 你只复制了笔触，却没有复制语言；回头添加批注

骨架 C — IA/站点地图图

纯结构文档——无实际屏幕，只有信息架构、导航、数据流或状态机的节点-边图。

必选章节：

标题 + 图例 — 方框的含义、线型的含义（实线=直接导航，虚线=条件性，双线=数据绑定）
主图 — 树形图/图形本身，居中，大尺寸
每个节点的迷你规格 — 对于非显而易见的节点，用1-3行说明其内容
权限/角色矩阵（如适用）
开放问题在底部

抖动和手写风格仍然适用。采用方框+连线布局，大量留白，单一强调色用于“当前路径”/“默认”高亮。

页边批注语言（骨架B和C必须使用；A可选）

页边批注是真正的低保真线框图与“伪装成低保真的高保真草稿”之间的区别所在。使用以下手法：

标记	时机	方法
旁注	约束或理由	`<aside class="margin">`，使用手写字体、强调色，拉到页边距中
圆圈+箭头	指向特定元素	使用 `filter:url(#wobble)` 的 SVG `<circle>` + `<path>`，强调色笔划
TBD / ?	未解决的决策	强调色的手写“待定”，有时放在抖动的圆圈内
删除线	保留旧想法以提供上下文	`text-decoration:line-through` + 轻微旋转 `transform:rotate(-1deg)`
下划线 + !	重要/必须讨论	术语下方的SVG波浪下划线
编号标注	引用下方图例表	强调色的带圈数字，章节末尾附 `<ol>` 图例

页边批注墨水颜色 = 单一强调色（模板使用亮蓝色）。正文墨水保持单色。

手绘标记

低保真线框图严重依赖手绘标记，而非真实图标或照片。在文件顶部构建一个小型库：

叉号框 — 图像占位符：<rect> + 两条交叉 <line>，均使用 filter:url(#wobble)
波浪线文本 — 文字占位符：3-5条水平波浪 <path>，宽度递减
火柴人图标 — 导航图标作为8-16像素的SVG路径（房子、加号、图表、齿轮），1.4像素笔划 + 抖动
加载旋转器 — 带缺口的抖动圆圈，静态交付物无需动画
头像圆圈 — 圆圈 + 手写字体的首字母
图表骨架 — 抖动的条形/点/线，除图编号外无轴标签

不要引入图标字体、lucide、heroicons等。真实图标会与抖动效果冲突，瞬间破坏低保真感。

必读

首先从头到尾阅读这份 SKILL.md。在选定骨架之前，不要打开 foolscap-wireframe.html。

然后：

骨架A → 完全阅读 foolscap，包括结构和笔触词汇
骨架B → 打开 foolscap 仅复制：<filter> SVG湍流值、点状背景图案、虚线/波浪分割线路径、手写字体堆栈。不要复制刊头/主推/长文结构——错误的骨架。
骨架C → 同B，仅提取笔触

切勿整体复制 foolscap 的占位编辑文案、图注或类名。

设计策略

在开始时锁定保真度范围：

纯结构（仅有框和标签，无真实排版，字段名除外） → 最大抖动，内容最稀疏
结构+样本内容（占位标题、真实标签、虚假数字如 ¥3,280） → 适度抖动，更多内容密度
结构+批注（箭头、页边批注、“待定”、触发标签） → 抖动 + 页边批注 + 强调色标注

选择一种并贯穿整个文档保持一致——混合保真度会显得风格不统一。骨架B几乎总是需要第三档。

布局倾向

偏好：

纯白纸背景——不要黄色法律便签纸的做旧感
单色墨水（黑色 + 2-3种灰色），最多一种强调色（亮蓝或红色）用于页边批注和“当前/默认”高亮
一种手写中文字体（马山正 / 龙藏）+ 一种手写拉丁字体（Caveat / Kalam）
等宽堆栈（大写、紧凑字间距）用于“标签”/“图编号”/“标注”
章节之间的虚线或波浪分割线——永远不要用干净的实线规则
一致的抖动强度——不要为不同元素上下调节；一个全局滤镜，可能再加一个“更强”的用于小图形
编号的插图（“图 01”；中文写作时使用本地化形式）用于所有在文档其他地方被引用的内容
宽大的侧边距以便放置页边批注

避免：

真正的产品图标或精美的SVG插图（与草图框架冲突）
彩色照片（使用草图占位符——叉号框或波浪线文本）
Emoji
在同一页面上混合线框与高保真组件
对每个元素都强行施加抖动滤镜，直到页面变得杂乱——抖动是调味料，不是底料
使用单独的 ↓ 作为流程标注——在箭头上写明触发条件
在应用场景中只交付3个孤立的屏幕——那是屏幕样本，不是线框图文档

反模式（交付前自查）

平台/尺寸

以网页形式呈现，通常截取长截图嵌入PRD/Notion/Confluence/飞书文档中。不设计为运行时交互——它是一个看起来像手绘的静态交付物。

对于骨架B，页面宽度720-960像素效果不错（与文档工具中的阅读宽度匹配）。对于骨架A，960-1100像素（编辑格式）。对于骨架C，通常更宽（1200+像素）以适应站点地图。

wireframe-sketch