在讨论视觉之前先定屏幕结构：用线框图确定屏幕上有什么…

当需要设计某个屏幕/页面的布局结构（而不是它的视觉样式）时，用分档线框图把「放什么、放哪里、什么最重要」变成可争论的廉价决策。

适用场景

解决思路

1. 按要做的决策选保真档位：问「哪个机制能解决这个问题？」→ 出一整板缩略图（lo-fi）创意小样；问「这个屏幕该有的东西是否齐全、权重是否正确？」→ 整页线框图（mid-fi）；问「这串屏幕作为一个任务是否成立？」→ 原型视图；问「好不好看？」→ 不属于本技能，交给视觉设计。
2. 永远不要给出高于决策所需的档位：机制尚未达成一致时整页线框图算过早，流程尚未达成一致时原型算过早。
3. 开场先问产物放哪，默认 HTML：HTML（默认，每个保真阶段一个自包含文件，含 grid/slideshow 查看器、可选点击流原型）／Figma／pencil／不要（只出 markdown 结构说明）。请求已表明偏好（in figma、in pencil、html、just describe it、no wireframes）时跳过该问题；只说要但没指定格式则默认 HTML；如果 section 分组未被流程隐含，追问 section 名称。
4. 用户选 Figma 或 pencil 时追加问：浅色还是深色线框图？这两个画布是单主题，全程只用所选那一列调色板。
5. 每个档位都从同一套设计系统按自然尺寸绘制：真实标签、可交互控件、完整灰度；绝不为了显得「早期」而把东西画得更模糊、更小或更示意图化。
6. 三层语言永不混合——容器（展示外壳）、线框内容（kit）、注释层；观看者绝不能把外壳误认成提案，也不能把注记误认成内容。
7. 颜色只用五角色灰阶（--w-canvas／--w-surface／--w-border／--w-ink2／--w-ink1）＋一个工作强调色（--w-accent 只用于主操作与选中态）＋一个语义例外（--w-error 只用于无效状态，绝不做装饰或强调）；其余一切留在灰阶。
8. 所有尺寸、边距、间隙、内边距、圆角、控件高度、图标尺寸、字号、行高都取自 kit token（间距 --sp-N = N×4px，控件高 32/40/48，图标 16/20/24/32，圆角 2/4/8/full）；标注里出现原始像素值即违规。
9. 字号用 grid-locked 的 size/line-height 对，最小不低于 11px，只用一种中性系统字体（--wf-font: system-ui）；层级靠字号与字重表达，绝不靠字体本身。
10. 功能图标用 SVG 绘制并 alpha mask 成 currentColor；绝不用文本字符（▾、×、⚙）当控件图标；未定的 App 专属图标用无特征的 .icon 圆圈占位；纯图标按钮必须带 aria-label。
11. 控件必须用原生交互元素（<button>、<input>、<textarea>），绝不用 div 涂成控件的样子；hover、focus（2px 强调环）、press、disabled、invalid、loading 状态必须存在。
12. 用 kit 的组件基线搭建屏幕：按钮、表单字段（.field/.input/.textarea/.select/.search）、选择项（原生 checkbox/radio、button.switch[role=switch]）、chip/tab、appbar、avatar/media/badge、卡片/列表/原生表格、scrim+modal/sheet/toast、callout、skeleton/spinner、布局工具类、vignette。
13. 通过完整性测试：整页线框图是真实产品屏幕的灰度版而不是放大的片段——真实屏幕会有的（状态栏、导航栏、tab bar、搜索框、筛选 chip、图标、头像、时间戳、计数、次级操作、页脚）都要有，密度与真实一致；自检方式是截真实产品图、去色、去掉品牌字体，线框图里东西的数量和位置应当一致。
14. 全程使用真实内容：真实标签（如「Storage used — 14.2 GB of 15 GB」）、真实边界情况（德语复合词、47 项列表、零状态）、真实数据形状；绝不用 lorem ipsum；真实内容未知时写诚实、合理的文案并标记给 /articulate；用户要求「先放占位文本」时要反驳，并解释 lorem ipsum 掩盖了什么。
15. HTML 输出每个档位只写一个自包含文件（lo-fi 为 wireframes-<topic>-thumbnails.html，整页线框图与原型为 wireframes-<topic>.html），写到工作目录并打开；绝不把不同档位混进一个文件；不用外部 <link>、<script src>、字体或图片，只内联 <style> 和 <script>。
16. 嵌入系统时逐字照搬：把 references/design-system.css（先）、references/viewer.css（后）粘进 <style>，把 references/viewer.js 粘进 </body> 前的 <script>；不要重打、不要自造替代、不要裁掉「用不到」的部分。
17. 在两份样式表之后再加每个产物自己的布局 CSS（屏幕专属网格、zone 尺寸、标记位置），所有值都用 kit token；不要重写 kit 的 class 样式。
18. 按结构模板搭建：data-URI favicon（注释标记作为图标）、<body data-view="grid" data-theme="light">、board-header（h1 标题＋一行 mono provenance「Intent /wireframe · [month year] · [rung]」）、view-toggle、theme-toggle、slide-nav、board-section（section-label + frame-grid）、frame（mid-fi 带 h3 frame-plate 浮在卡片上方；lo-fi 无 plate，用 idea caption）、note-rail 中每帧一个 note-group。
19. 不要自造 class 名：kit 词汇表就是语言，参考 CSS 就是法律；屏幕需要 kit 没有的东西时用 kit 原语和 token 组合，若确实全新就应改设计系统而不是在产物里即兴发挥。
20. 视口宽度是唯一例外：桌面 1440、平板 768、移动 390，vignette 框约 360px；其余一切尺寸都来自 token。
21. 同时交付浅色与深色；初始主题优先级为 reviewer 自己上次的选择（localStorage）→ <body> 上作者写的 data-theme → OS 偏好；不要删掉任何一列色阶。
22. 只有当用户明确要原型时才加 Prototype 视图按钮和 data-go 属性；data-go 直接写在真实触发元素上（真按钮、真列表行），点击沿流程逻辑导航而不是整屏跳转；导航是流程形状而非文档形状：←/prev 回退到访问过的屏幕，Restart 回到入口，隐藏顺序翻页；只有接好线的触发元素可 Tab 到达，未接线的控件退出 tab 顺序，死点击闪一下细线「nothing here」提示；hover 触发元素显示同样的细线环。
23. 注释层只承载「为什么」，不承载「有什么」：给有理由的决策打编号标记（「搜索放在 header 是因为支持数据显示 nav-first 用户失败率 40%」值得标记，「这是搜索框」不值得）；标记锚定到被注释的元素（position: relative 容器 + token 偏移），不要用会随内容漂移的帧级百分比定位。
24. 注释按帧组织：每帧的标记从 1 重新开始，每帧注释放进 data-for="<frame-id>" 的 .note-group，用 .note-frame 行标出屏幕名；grid 视图把每个组显示为该 section 的右侧 sidebar 记录，slides 视图只显示当前帧的组；section 级注释放在任何 group 之外并始终显示。
25. 注释只用一种强调色（默认 Intent indigo --note），可在生成时按用户要求覆盖（如「注释用绿色」）；覆盖只换 --note，kit 的 --w-accent 固定不动；注释只以标记和 rail 文本的形状出现，绝不做按钮、绝不做填充；用户要求的颜色若与灰度可读性冲突，要指出并建议替代。
26. 做屏幕解剖：把屏幕拆成有名字、各有一个职责的 zone（全局导航、局部上下文、主内容、操作簇、系统状态）；一个 zone 有两个职责就拆成两个；说不出职责的 zone（「杂项」「其他」）还不该存在；先自顶向下命名 zone 和职责，再画里面的元素，别让元素级决策泄漏进 zone 级讨论。
27. 不靠样式表达层级：只用大小、字重、位置、分组；用五秒眯眼测试检验最重要的东西能否被找到；如果需要颜色才能成立，层级就不成立；位置有意义（LTR 下左上先被读到、折叠线是真实边界、邻近暗示关系），每个依赖 locale 的位置决策标记给 /localize。
28. 按用户任务而非常见度推荐布局模式，并说明各自失效条件：单列（专注的线性任务，如表单、文章、移动端；需要比较时失效）、侧栏+内容（持续导航或筛选旁边是工作区；低于平板宽度失效，要规划折叠）、主从（列表旁是选中项；细节需全神贯注或列表本身就是任务时失效）、卡片网格（同等权重的同类浏览；需要按具体属性比较时应改用表格）、dashboard zones（状态优先扫描，最重要的在左上；什么都「重要」就失效，十二个等权 widget 等于没有层级）、wizard（一屏一个决策；用户需要看到全貌时失效，要配进度结构）。
29. 发散优先：为新问题先画多个机制上不同的 vignette（对「什么机制解决这个问题」的不同答案，而不是同一个机制挪一下按钮位置），每个 caption 写明取舍；与用户有意收敛后，把选中的机制升档进它自己的线框图产物；idea board 连同被否的 vignette 一起留下作为决策记录——「被选择反对的东西」也是设计的一部分。
30. Vignette 是一个想法的小样：用真实 UI 的聚焦片段（价格字段配「Free」chip、通知卡配领取按钮、门廊自提开关配时间 chip），从同一套 kit 按自然尺寸搭建，居中放在柔和面板上，配 caption（索引编号＋标题＋一口气的描述）；caption 属于注释层；vignette 里只有真实 UI。
31. 强制档位纪律：vignette 蔓延成整屏（导航栏、多个 zone、超出一个想法的内容）是档位违规——指出并提供升档：「这个想法需要一整屏，要把它提升到线框图产物吗？」；反过来 vignette 变得抽象（用灰盒代表想法本身）也要从 kit 重画。
32. 遇到配色、字体或样式要求是硬性停止：拒绝并引导——「那是视觉设计，线框图留在锁定的灰阶系统里好让评审保持结构性；结构达成一致后把样式化那一步交给视觉设计工具」；唯一例外是用户配置的注释强调色，它不碰内容。
33. 用 wireflow 物化流程逻辑：按流程顺序摆放 frame，在容器层（frame 之间、backdrop 上）画连接线和「links to →」标注，并标注每次跳转由什么触发；绝不把流程逻辑画进屏幕内部。
34. 原型只做点击流：没有条件逻辑、没有状态模拟；当某段流程需要状态才能测试时，那是要交回 /journey 的发现，而不是要伪造的功能。
35. 容器外壳保持单色：indigo 属于线框的强调色和注释层，绝不属于外壳；board header 用 h1＋一行 mono provenance；mid-fi 的 title plate 浮在卡片上方作为独立 chrome caption，不共用边框也不共用背景（屏幕内部的 header 绝不能被误认为外壳）；plate 用不会出现在线框内容里的小号大写等宽标签样式；lo-fi frame 不带 plate。
36. 一个产物只用一个档位：idea board 与整页线框图属于不同项目阶段，绝不共页；lo-fi 单独成文件，整页线框图＋原型另成文件。
37. 实现 HTML 查看器行为：Grid（默认，按 section 分组）与 Slides（固定舞台，页面停止滚动，当前帧居中并缩小到整体可见，plate 一并显示、绝不放大，notes rail 在旁成有界列；上/下一帧、键盘方向键、位置指示、section 感知的顺序；序列不循环，第一帧 prev 禁用、最后一帧 next 禁用——流程的两端是信息）；点击 plate 从 grid 打开该帧进 slides，离开 slides 恢复 grid 滚动位置，当前视图＋帧镜像进 location.hash（#slides-2、#proto-1）使任何评审状态都可链接；prototype 视图隐藏注释、让线框本身可交互。
38. 明确写出并说出档位与期望反馈，别让反馈错配：「这些是线框——结构可以争论，样式还不存在」「这些是创意小样——请对机制而不是细节反应」；工件本身也要自报家门（board 标题、文件名）。
39. 交付前走完整输出清单：1) 屏幕清单（哪些屏幕/想法、什么档位、分哪些 section）；2) 结构理由（每个屏幕的首要职责、有哪些 zone 及为什么、选了怎样的层级及为什么；每个 vignette 提出什么机制、做什么取舍）；3) 产物本身；4) 注释（编号的决策与开放问题，注释层＋文本回顾）；5) 考虑并否决的（落选 vignette 各一句为何）；6) 交接（给 /articulate 的占位文案、给 /fortify 的未画状态、给 /journey 的流程发现、结构冻结后给 /specify）；7) 待决问题（冻结结构前需要 /organize、/investigate 或利益相关者输入的东西）。
40. 生成前先自问：这个屏幕的首要职责是什么、结构是否让这个职责显而易见？团队要做的决策是什么、支持它的最低档位是什么？真实内容是什么（标签、数据形状、最坏情况长度）？在流程中什么在它前后？五秒眯眼测试会说什么最重要？哪些结构决策是假设、需要 /investigate 或利益相关者确认？
41. 守住边界并主动交接：不拥有跨屏流程逻辑（/journey 定义、你物化）、信息架构/分类/导航模型（/organize 结构化、你放置）、最终文案与语气（/articulate；你的真实占位文案标记给他们）、视觉设计（完全在 Intent 系统之外）、边界状态加固（/fortify，结构冻结前邀请他们；kit 的 error/loading/skeleton 词汇渲染他们指定的内容）、工程规格（/specify）、无障碍审计（/include；但阅读顺序、触控目标放置和 kit 内建的底线——可读字号、focus 环、带 aria-label 的图标按钮、真实 role——是你的结构责任）。
42. 用 Figma 时：先确认浅/深，先加载 /figma-use 技能（强制），再调 mcp__claude_ai_Figma__use_figma 翻译语言——section 对应 Figma sections，title plate 用上方小号等宽大写文本，每屏一个真实视口宽度的 frame，内容用对应主题列的调色板值、4px 网格、kit 控件高度与字号、单一中性字体，媒体块为面填充＋细线描边（不画交叉线），注释为每帧一个锁定的 overlay 组（强调色圆底白字＋旁侧注释文本块），wireflow 连线画在画布上而非帧内。
43. 用 pencil 时：先确认浅/深，调 mcp__pencil__get_editor_state 再新建文档，通过 mcp__pencil__set_variables 把所选主题的调色板与注释强调色设为变量，再用 mcp__pencil__batch_design 每屏一个真实视口宽度的 frame（lo-fi 用 vignette 面板），按 section 分组，遵循 kit 约定，注释用强调色标记，wireflow 用帧间连线。
44. 不要靠「假的草图感」来提示临时性：这些线框故意看起来真实，临时信号来自框架（board 标题、文件名）以及你把它说出口。
45. 交付时说明每个工件是什么保真度、想要什么反馈；如果走查听起来像房产中介带看，说明缺结构理由，要补上决策级的注释。

适用边界 · 注意事项

• 需要视觉设计（配色、字体、样式、品牌表达）时不要用本技能——它止步于视觉设计开始之处。
• 没有流程定义（存在哪些屏幕、什么顺序、什么分支）时不要做 wireflow 或原型，那部分属于 /journey。
• 需要条件逻辑或状态模拟才能测试的流程，不要用点击流原型伪造状态，应交回 /journey 解决。