ui-options — 本地对比页让她选样式

触发与不触发

• 触发：用户就某个 UI 呈现 / 交互点说要比较、参考、看看样式、出方案让她选；或她对已上线的 界面说「不明确 / 不好看，想想怎么设计」。
• 不触发：她只说做、没说要比较。那就直接交付，自选最合理的一版，交付评论里单列「我替你拍的 可逆选择」并附一句「要比较方案就说」——她随时可以补一句触发本 skill。
• 验收入口与本 skill 无关：对比页是选型材料，不是验收环境；验收入口仍只给生产实例（常驻验收实例已停用，TODOHUB-493）。

产物与位置

• 一页静态 HTML，放项目草稿目录 _sxg/artifacts/<卡号小写>/<slug>.html（_sxg/ 被 git 忽略；卡号里的 - 换成 _），如 _sxg/artifacts/todohub_302/blocker_layout_options.html。 没有卡的对话放 _sxg/artifacts/<agent>_<12 位时间戳 YYYYMMDDHHMM>/<slug>.html，看板给了具体 目录名就用它的。目录第一次写文件时才建。
• 草稿目录对「只读」会话同样可写（共同讨论预调研轮、评论回应只读轮、看板 AI 对话只读档），所以 讨论卡可以带着对比页来讨论；目录之外仍然只读。约定原文见 todo_hub todo_convention.md 「草稿目录」一节。
• 不用 Artifact、不起服务、不开新端口：SendUserFile 带 display: "render" 让桌面端侧栏直接 渲染，同时给出路径。她在别的客户端时直接开文件。
• 页面自包含：CSS / JS / 图标全部内联，不引外部资源。

页面怎么做

1. 拿项目真实的视觉词表：先读项目的 token / 主题文件与目标组件的现有 CSS（字号、行高、 间距、圆角、颜色令牌、明暗两套），mock 用同样的数值画，不用自己的配色重新发明。项目有 深色模式就做明暗两版（prefers-color-scheme + 页内切换按钮）。
2. 先摆现状：单独一排「现状（对照）」，一句话说清现在的问题，再摆方案——她要能对着现状看。
3. 方案 × 情形矩阵：方案 3～4 个、彼此真正不同（同一方案的旋钮写进那个方案的附加条件， 不单列）；每个方案至少给主情形 + 边界情形（空 / 单个 / 全满 / 文案最长），需要时给不同宽度 （桌面列宽、手机撑满）。方案名用 4～10 字的描述性名字，不用 A/B/1/2 当名字。
4. 每个方案两句话：一句「它怎么解决问题」、一句「代价」，代价必须写（没有代价 = 没想清楚）。 有评审推荐就标出来并给理由，不替她选。
5. 可叠加的附加条件单列在页尾（如「单个时不画」「对齐正文缩进」），她回复时可以一起说。
6. 一次预览就发：本地用 headless 浏览器截一张图看一眼排版（重叠、溢出、单列落单），改一轮 就发；不为自己的页面搭验证循环。
7. 方案不够多或视角单一时，可以先开一轮多视角推演（不同视角各出 1～2 案 + 一个评审去重打分）， 再拿收敛后的 3～4 案画页。

选定之后

• 把方案名、她的选择与附加条件回写到卡片评论（拍板要回写卡片）；页面路径也写进去。
• 有被否方案且下个会话可能再提的，按项目的决策记录约定（conventions.md §13）记一条。
• 页面留在草稿目录不删；它不进 git，也不当验收材料。