用途：该技能面向 UI 与视觉设计，先用图像生成探索目标视觉方向，再让真实实现与用户选定的概念保持一致。交付物是“可运行的设计”，并且要与已批准的参考图在视觉上匹配。若只是探索性需求，则先交付方案并等待选择。
主要能力与流程：
- 框定决策：阅读相关设计技能并截取真实界面，明确哪些可变、哪些必须保持（内容、取景、配色、交互、周边 UI），保留原始截图。
- 生成备选：以该截图为参考，用可用的图像生成技能/工具产出少量、带标签、彼此不同的视觉方向，作为概念展示，而非已实现代码的截图。
- 冻结选定目标：通过已有审批或授权设计裁量，或取得用户选择；把选定图像、提示词与来源保存在项目参考区，并列出其可见要求（间距与内边距、轮廓、字体、透明度、边缘柔和度、层级与位置）。编码前完成参考测量。
- 实现设计：使用项目真实组件与视觉原语；生成稿不是源码，CSS 简单不等于还原。实现约束需换机制时保留原本关系；生成文本错误或虚构细节应标为瑕疵，不能为对齐像素而上线。
- 对比迭代：以可比尺度、取景与状态截取真实实现，对已批准概念运行 compare-screenshots，并做边界/重叠检查（比较效果两侧及其穿越的前景，而非只看整体柔和度与间距）。保留逐项通过/修复/不确定记录。前后代码截图对比只是补充，证明的是改动而非还原度。列出实质不符项，改代码、重截、再比，直到每项意图匹配或用户明确修改目标；功能测试通过、距离分数更低或凭记忆“差不多”都不是停止条件。
- 验证与交接：在相关状态与尺寸下检查真实设计，包括拥挤与低对比场景；用 screenshot-critique 做无预设评审，把已批准参考与实际结果并排清晰标注展示。实质反馈走同一对比循环解决后再宣称完成。
规则：概念、旧实现与当前实现须区分；不得用最新代码截图替换已批准参考；以实际尺寸截图为主要证据，标注派生对齐，不得改缩放或裁掉缺陷来提升一致性；按意图设计特征评判生成参考，而非文字或场景的逐字相等，并明确记录此类排除项；选定概念是需求，不是可随意重新诠释的灵感，无法忠实实现时应展示具体冲突并寻求修改目标。
限制：资料未提供具体安装命令、依赖、平台支持、收费或价格信息。