用途
hi-fi-design 是一个用于制作高保真、精致界面设计的技能，触发场景为把 UI 稿打磨成像素级精准、可直接用于生产的高保真界面。它强调高质量设计应根植于现有设计上下文，而非从零开始。
主要能力
- 设计上下文收集：要求先寻找现有 UI 套件与设计资源，复制所有相关组件、阅读所有相关示例；可通过导入菜单关联本地代码库、提供截图或 Figma 链接，或链接其他项目。若找不到，必须主动向用户索取。从零模拟整个产品被视为最后手段。
- 早期对齐流程：按待办清单推进：先提问；再收集设计上下文；然后以“初级设计师向经理汇报”的口吻在文件开头写明假设、上下文与设计推理，并留出设计占位，尽早展示给用户；接着尽快产出设计并再次展示，附上后续步骤；最后用工具检查、验证并迭代。
- 多方案探索：鼓励跨多个维度给出 3 个以上变体，混合符合既有模式的常规设计与新颖交互、有趣布局、隐喻和视觉风格；部分选项使用色彩或高级 CSS，部分含图标、部分不含；从基础到进阶逐步展开，重混品牌资产与视觉基因（尺度、填充、纹理、视觉节奏、层叠、排版处理），目标是让用户自由混搭原子级变体。
- 多选项展示规范：同一页面展示多个设计时，在“带调节面板的单一全尺寸响应式原型”与“纵向堆叠的锚定选项卡片”之间选择。后者要求：每轮选项为独立
<section>，新轮次置顶，选项使用稳定编号（1a、1b、2a…）用于聊天引用与跨轮交叉链接；在<helmet>中加入<meta name="design_doc_mode" content="canvas">，由宿主提供平移缩放，方便浏览超出视口的宽设计。结构上先在<helmet>放一个<style>块，再以<section class="dv-turn">作为根节点直接子元素；新一轮插入到已有轮次之上，不重排、不重编号、不删除旧轮次。 - 占位与自检：缺少图标、资产或组件时绘制占位符；高保真设计中使用占位符优于拙劣模仿。可利用起始组件（设备外框等）获得高质量脚手架。
使用方式
按技能内的通用设计流程执行，借助待办清单跟踪阶段；通过导入菜单提供代码库、截图或 Figma 链接建立设计上下文；以规定的 HTML/CSS 结构组织多轮多选项展示，每个选项 id 放在最外层元素上，使锚点滚动到完整选项；每轮末尾附一行 2–3 条可直接粘贴到对话的后续建议。
适用场景
适合需要探索多个视觉方向、精细调整布局/间距/排版/配色、将草图升级为高保真生产界面的 UI 设计工作；也适合在既有设计系统基础上做变体与重混。
限制
资料强调必须投入时间获取设计上下文与组件，找不到时应向用户索取；从零构建完整产品仅作为最后手段。技能未提供具体收费、平台支持或效果承诺等信息，相关事项暂未提供。