用途
generate-mockups 用于把 UI 渲染成单文件 HTML，无需构建步骤，并基于项目真实的设计语言，让决策通过“看”而不是阅读文字或 ASCII 图来完成。它覆盖两种意图：
- PREVIEW（预览）：渲染某个功能的一个或多个屏幕/状态，用于可视化，保留并迭代。
- COMPARE（比较）：为单个视觉选择并排渲染 2 个以上方向，从中挑选一个。
主要能力
技能按一套协议执行，分为六个步骤：
- 框定与确认：确定请求形态——意图（PREVIEW 或 COMPARE）、数量（PREVIEW 每个屏幕/状态一条；COMPARE 默认 3 个方向，最多 5 个）。打印计划列表并通过 AskUserQuestion 确认（“生成这些”/“调整”）后再投入生成。
- 获取设计语言：读取 meta/DESIGN.md 中管辖目标界面的部分；若已有 UI 但缺少该文件或目标界面，则先调用 map-design-language 技能；若没有既有 UI，则提议调用 frontend-design 进行视觉发明，用户拒绝时仅在明确要求下继续。COMPARE 还需调用 jtbd 技能，写出该选择所服务的 job-story，并命名分歧轴。可选地使用 UI Skills 透镜（如 better-layout、fixing-accessibility、harden、interaction-design、fixing-motion-performance、adapt、better-typography、better-writing），通过
npx ui-skills get <skill-slug>获取，默认用一个透镜，仅在需求独立且各自实质改变产物时用两个。 - 生成：按风险调整投入——简单/低歧义单次完成；多屏幕或高歧义 COMPARE 则并行派发通用子代理，每个负责一个 mockup。渲染约束：每个产物一个 HTML 文件，无构建步骤；样式来源优先级为工具包 CDN（若无需构建即可加载）、项目自身 CSS（复制而非按路径链接）、手写内联 CSS（工具包无法加载时）；不使用装饰性外部资源；在 375/768/1024/1440 宽度下响应式，布局变化处用标签页切换宽度。
- 评判：质量底线（始终）——文本对比度 ≥ 4.5:1、交互热区 ≥ 44×44、跨断点渲染、无装饰性外部资源，交接前修复。COMPARE 额外用透镜套件批判每个方向并清除反模式，然后按加权标准评分（job-fit 权重最高，其次可用性、视觉质量、与现有系统的契合度、可行性/风险），给出结论（首选 + 原因）。
- 组装与打开：自行组装最终产物；若第 3 步派发了子代理，则合并返回文件（用 iframe srcdoc 或作用域包装隔离各屏幕），重新运行质量底线，丢弃子代理文件。PREVIEW 产出一个产物（非每屏幕一个文件），每个携带其卡片；布局遵循展示内容：流程中的屏幕按流程顺序堆叠；单元素单变量变化用标签页，元素固定位置，方向键切换。COMPARE 产出一个 options.html：方向并排，各自紧邻真实同类控件，每张卡片携带其字段，代理结论置顶。写入持久位置后打开：规格上下文中写入调用方传入的 mockups/ 路径；独立场景写入 meta/mockups/NNN-name/（编号为现有最大 +1，从 001 开始）。用
open <file>.html打开，绝不通过 Artifact 工具发布。 - 结果：PREVIEW 由用户审阅，审阅期间就地迭代同一产物；设计发布后适用快照规则。COMPARE 由用户通过看挑选；若由 product-interview 调用，返回选择 + 被拒方向（含原因）供其记录；若直接指向现有规格，则把选中与被拒方向写入其 UX 部分并标记链接。每个 mockup 链接都需加注：Mockups 是方向性的，非最终版——它们展示所选布局与意图，而非精确像素；真实 UI 用实际组件与令牌构建，间距、颜色和字体可能不同；若两者不一致，以设计系统 / meta/DESIGN.md 为准。
使用方式
技能通过上述协议自动执行，用户只需在框定阶段确认计划列表。生成产物为单文件 HTML，在浏览器中打开查看。
适用场景
- 需要预览某个功能的屏幕或状态，以便可视化并迭代。
- 需要在多个视觉方向之间做选择，通过并排比较来决策。
- 需要记录设计决策，作为时间点快照。
限制
- Mockup 是时间点产物，是快照而非活代码，设计发布后可能过时，应保留为视觉记录，不要维护。
- 保真度取决于真实工具包能否加载：能加载则为高保真，渲染通过真实工具包，移植约 1:1；不能加载（需要构建或安装，或仅在厂商沙箱中渲染）则为近似，仅传达布局与层级，精确颜色/字体/圆角在移植时来自库。
- 不使用装饰性外部资源，图片用占位框，不使用图库照片、图标包 CDN 或项目自身不加载的字体。
- 每个方向必须在至少 2 个分歧轴上不同；分歧轴包括密度、层级驱动、可供性、容器、披露、惯例、动效。
- 需避免上下文反模式（如过度动效、不适合的默认深色、损害可读性的装饰性渐变）。
- 每张 mockup 卡片必须包含权衡与风险字段，缺少成本的卡片不算完成。
分类
该技能用于生成 UI 线框稿，属于设计与创作范畴。