imagine-it 是做什么的？
将一个规格说明转化为推测性原型：一组简单的纯 .html 文件，展示某个功能在当前产品中可能的外观。它旨在供人类讨论和反馈，而非生产代码——因此速度和合理性比完整性更重要。
输入（全部可选，顺序不限）：一个 Issue/PR 链接或 #123、一个 Jira 关键字或链接、一个文件路径、自由文本，以及以下标志：
--wireframe— 强制使用灰度线框图，而非仓库现有风格。--out <dir>— 输出根目录（默认为仓库根目录下的.imagine-it/）。输出始终保存在<out>/<slug>/下。--screens <n>— 限制或强制指定屏幕文件的数量。--screenshot[=png|jpeg]— 同时捕获屏幕图像（默认为 PNG）。--states— 配合屏幕截图使用，捕获所有状态，而不仅仅是初始状态。--viewport <WxH>— 截图视口尺寸（默认 1440x900；移动端优先产品为 390x844）。--notes— 截图时显示规格注释覆盖层（默认关闭）。
无输入时，规格来源为当前对话。
工作流程
按顺序执行以下步骤。每一步产出的工件将作为下一步的输入；请将它们保留在工作笔记中——只有 HTML 会被写入磁盘。
1. 规格摘要
获取并提炼规格说明，形成一份规格摘要：标题、slug、目标、参与者、入口点、主要流程、包含真实示例值的实体、状态、编号为 AC-1… 的验收条件、范围外内容、假设、待决问题。
你填补的每一个空白都构成一条假设；只有人类才能做出的决策列为待决问题。持续推进——只在没有任何规格来源（无参数、对话中也无内容）时询问用户。
完成标志：每个摘要字段都已填写（或明确标注“无”），且每个 AC 都已编号。 详情、按来源获取数据的方法和示例：references/context-intake.md。
2. 设计简报
以只读方式扫描仓库，撰写设计简报：模式（高保真或线框图）、技术栈、一个即贴即用的 :root token 块（使用规范变量名）、暗色模式、应用外壳、组件说明、最接近该功能的 1–3 个参考屏幕、图标风格、UI 语言环境以及所有信息的来源文件。
如果你的环境支持子代理，可将此扫描任务委托给一个子代理并仅取回简报；若不支持，则在相同的读预算内内联完成扫描。当指定了 --wireframe 或仓库没有任何可模仿的 UI 时，模式为线框图；需在简报中说明原因。然后使用找到的真实路由/标签更新摘要中的“入口点”字段。
完成标志：token 块使用了每个规范变量名（除非线框图模式：Tokens = 无），且每个 token 组均引用了来源文件。 技术栈检测矩阵、token 隐藏位置、规范名称：references/design-discovery.md。
3. 屏幕规划
在编写任何 HTML 之前先决定文件清单：一个包含 # | 文件 | 用途 | 状态 | 覆盖的 AC 的表格，按流程顺序排列。每个不同的视图或内容繁重的覆盖层对应一个文件；状态（空、加载、错误、成功……）作为屏幕内的章节。数量按需而定，尽可能少——通常 2–6 个。
完成标志：每条 AC 都至少出现在一行的“覆盖的 AC”列中。 规则和示例：references/screen-planning.md。
4. 生成
写入 <out>/<slug>/：
index.html 核心页面：摘要总结、流程、AC 覆盖、假设、待决问题、设计来源
styles.css 设计简报 token + assets/base.css 原文 + 功能组件样式
ii.js 从 assets/ii.js 原样复制（原型工具栏：导航、笔记、状态、主题）
01-<screen>.html 屏幕规划表中的每一行对应一个文件
02-<screen>.html
从 assets/index-template.html 和 assets/screen-template.html 开始；从本技能文件夹复制 assets/base.css 和 assets/ii.js。模仿参考屏幕：相同的外壳、导航标签、组件形状和文案风格，使用仓库的 UI 语言。填充真实的领域数据。用 data-note="AC-n: …" 标记每个满足 AC 的元素，用 data-note="NOTE: …" 标记每个推测性设计选择。
输出为自包含的纯 HTML/CSS，附带小型原生 JS；可直接从磁盘打开：仅使用相对链接、内联 SVG 图标、系统字体作为仓库字体的后备方案。 完整输出规范和交付前检查清单：references/html-conventions.md。
5. 验证
执行 references/html-conventions.md 中的交付前检查清单。完成标志：每个检查项均通过；否则修复并重新检查。
6. 截图（仅配合 --screenshot）
未指定截图标志则完全跳过此步骤。否则，将规划的屏幕（最后截图核心页面）渲染为 <out>/<slug>/screenshots/ 中的图像，并在 index.html 中添加“截图”章节。截图问题不会阻塞运行。
完成标志：每张规划图像都存在、非空、具有正确的魔术字节，且第一张图像已被查看；跳过的截图需报告手动命令。 标志、亮/暗模式、命名规则、工具梯度和后备方案：references/screenshots.md。
7. 交付
回复内容：index.html 的路径、屏幕规划表格、截图路径（以及任何跳过的截图及其手动命令）、假设和待决问题，并提供打开它的建议（Windows 使用 start，macOS 使用 open，Linux 使用 xdg-open）。如果 <out> 位于仓库内部且尚未被忽略，建议将其添加到 .gitignore。
后续操作：从 <out>/<slug>/index.html（假设、设计来源）和 styles.css 重建上下文；不要重新扫描仓库；保留 slug；更新 index.html 以匹配；重新执行步骤 5（如果之前存在截图，则重新捕获受影响的屏幕和核心页面）。