wireframes 是做什么的？
概述
UI方案的呈现应是图片，而非长篇说明文字。将每个变更绘制为轻量线框图：当前与提议并列，未改动部分用灰色条表示，仅在讨论中的元素上使用真实标签，并用一句话说明原因。它不追求应用的逼真外观：无品牌色、无真实字体、无像素级精度。用户一眼即可看到变更，绘制成本极低。
**不适用场景：**变更仅涉及视觉风格（颜色、对比度、字体、间距标记），此时应描述或展示真实CSS。或者用户已做出决定并让你构建，此时直接构建。或者布局、控件或流程没有变化。
输出规范
一个自包含的HTML文件，按如下方式构建：
- 路径： 在项目中的
docs/mockups/YYYY-MM-DD-<topic>.html，以便线框图与代码一同存放并可提交。如果项目已将线框图存放在其他mockups/文件夹中，则使用该文件夹。 - 头部： 原样复制kit.html中从
<!doctype html>到</style></head><body>的所有内容。仅更改<title>。仅使用kit类。内联style仅用于尺寸和间距（宽度、高度、外边距、.menu的位置），绝不用于颜色。 <h1>和一行.lede。- 每个变更对应一个章节：
<h2>N · 用用户的话描述期望结果</h2>，然后是一个布局：
| 情况 | 布局 | 标签 |
|---|---|---|
| 某元素存在且需要更改 | .pair：当前，然后提议 | .lbl.b “当前：问题是什么” · .lbl.g “提议：变更什么” |
| 修复方案未定 | .opts：2-3个选项，若元素已存在则在上面加一个小型.solo当前状态 | .lbl.o “A · 名称（推荐）”；.why “+ 优点 · − 缺点” |
| 全新页面 | .solo：仅提议 | .lbl.g；用数字编号.n标注，并在.why中解释 |
| 同一元素的不同状态或宽度 | .strip：每个状态一帧 | .lbl “空”、“加载”、“错误”、“手机”…；最多在strip下方加一个.why |
.pair的每一侧以及每个选项，都需有一个标签（不超过10个词）、其对应的帧或帧序列，以及一个.why句子。当变更为一个序列（如菜单，然后是菜单后的提示）时，在一侧使用两个帧。
请先阅读kit.html：在CSS下方有每种布局的示例以及所有类的索引。
绘制规则
- **仅在决策点上使用真实文本：**变更的控件、其直接相邻元素，以及用于定位的应用名称或面包屑导航。其余内容都用
.box（文本行，设置width）、.img（图片或图表）或灰色条的.row表示。 - **标记发生变更的控件：**用
.bad（红色虚线）标记当前状态的问题，用.good（绿色实线）标记提议状态的变更以及区分每个选项的特征。在.strip中不标记任何内容。勾勒控件轮廓，而不是全宽条或整个帧，因为帧会裁剪边缘的轮廓。 - **缺失元素：**在它应属的位置绘制一个空虚线槽（
<span class="in bad">此处无搜索</span>），而不是在附近元素上添加轮廓。 - **适配约800px宽度：**每个
.pair列约380px，因此保持.bar中的项目数约为5。 - **应用类型：**Web或桌面端 →
.f；窄屏或原生移动端 →.phone；终端UI →.f.mono.pad，包含真实文本行和未改动输出的灰色条。 - 待定问题放在对应侧的
.why中，以问句形式呈现。 - **预算：**每个文件不超过约15 KB。如果某个章节超过约1.5 KB，说明绘制了无人决策的内容，应将这些内容替换为灰色条。
展示前检查
如果有可截图的浏览器工具可用，则打开文件查看。在Claude桌面应用中，这意味着使用mcp__Claude_Browser__preview_start并设置url: file://<绝对路径>，然后使用mcp__Claude_Browser__computer并执行screenshot动作。如果浏览器拒绝本地文件，则将页面视为未查看（见下文）。检查每个轮廓是否位于预期的元素上，无内容被裁剪或换行，覆盖层不遮挡其解释的内容。修复后再次查看。
在没有截图工具的情况下（CLI、无头模式、子代理），对照上述检查点重新审阅标记，并在交接说明中说明页面尚未被查看。
交接说明
在聊天中，仅写：
- 文件链接，以相对于项目根目录的Markdown格式；
- 每个章节一行：编号、标题和状态（“就绪”、“选择A/B/C”或待解决问句）；
- 你需要用户决策的事项：每项一行，包含你的推荐及主要理由。
图纸及其.why行已包含细节和权衡，因此无需再次描述。在用户做出选择前不要构建。如果没有用户可询问（子代理、无头模式），则返回上述三项内容并停止。
常见错误
| 错误 | 正确做法 |
|---|---|
| 标记每个元素 | 仅标记与决策相关的元素 |
| 重新设计以匹配应用 | 原样使用Kit CSS；灰色条 |
| 在聊天中给每个图纸写一段说明 | 提供链接，每章节一行，附决策事项 |