---
name: frontend-style-clone
description: 根据截图、录屏、明确样式要求、参考网页或代码，高保真调整现有前端页面局部的字体、颜色、控件外观、间距、尺寸、列表排版与动画，保留现有逻辑与数据。适用于局部视觉复刻、样式对齐和视觉差异修正；完整模块与业务逻辑克隆使用 frontend-page-clone。
---

# 前端局部视觉复刻

只调整用户指定区域的视觉及必要局部结构，保留现有业务逻辑、接口、数据、事件和状态绑定。独立执行本技能，不继承 frontend-page-clone 的全量 mock 或完整模块重建规则。

## 技能协作

| 技能 | 应用阶段 | 职责 |
| --- | --- | --- |
| `$grill-me` / `$grilling` | 存在关键未决选择时 | 集中澄清无法自行查明、且会实质影响结果的选择。 |
| `$ponytail` | 编码与审查 | 复用已有能力，按下述子任务规则动态应用 lite、ultra 或 full。 |

grill-me/grilling 仅在下述澄清条件成立时加载，不作为启动步骤；ponytail 在编码与审查阶段加载。按当前技能列表或安装目录解析名称，不写死路径或版本。有 Skill 工具时调用，否则读取对应 SKILL.md 并应用；已加载指令直接沿用。grill-me 入口转交 grilling 时继续加载后者；若入口受自动调用限制，直接调用其 grilling 实现并说明映射。ponytail 使用用户指定的本地技能或插件入口，二选一。依赖缺失先查别名，仍缺失则说明受阻步骤，不擅自安装或假称执行。

## 确认范围与参考

先利用用户输入、已有决定和项目事实确定目标路由或组件、参考区域、目标状态及允许调整的内容。信息足够时简述实施范围后直接开始，不要求用户再次确认完整需求清单。视口、字体加载、组件版本和已有实现等事实自行查明；能按下列默认值处理的内容不转成问题。

**仅在需要用户作出关键选择时调用 grill-me/grilling**：该选择无法从现有输入、项目或默认规则确定，且不同答案会改变目标区域、参考依据、验收状态或必要取舍。例如两份同等优先级的参考冲突，或组件限制、素材缺失使已确认效果无法实现。单纯缺少文件或访问入口时，直接简短请求所需信息，不启动完整访谈。

调用时将访谈限定为这些未决选择，沿用 grilling 的依赖顺序和推荐答案：每轮只问当前可回答的问题，合并相关项，通常 1–3 个简短问题，不为凑数追问；后续轮次仅处理答案新引出的阻塞。不要展开无关的产品、业务或技术选型访谈，也不重问已确认内容。用户回答解决了全部未决选择，即视为该范围已达成共识；简述采用的决定后继续，不再追加“是否开始”的确认。等待期间继续不依赖答案的工作，依赖该选择的修改待答复后进行。

- **保留逻辑和数据**：只修改样式及必要的局部结构，不替换为 mock，不新增业务交互，不按截图改写业务文案或列表记录。测试需要固定数据时使用已有测试设施，不改变页面正式数据来源。
- **视觉依据优先级**：本次明确要求 → 用户指定截图或录屏 → 参考网页或源码。截图用于静态状态，录屏用于动画及状态变化；两者有实质冲突时确认，不静默混搭。源码可以解释实现，但不覆盖指定视觉目标。
- **复用优先**：优先项目现有封装与已安装组件库，通过组件公开能力和局部样式调整。无法消除的显著差异先确认取舍，不擅自替换组件。
- **视口与素材**：参考尺寸优先对齐，其他尺寸沿用现有断点适配；缺失字体、图标或图片先查项目资源，仍缺失则说明影响并确认替代，继续不依赖该资源的工作。

## 原样复刻与 ponytail 强度

视觉验收参照 frontend-page-clone 的“原样复刻”标准：在用户指定范围内复用现有组件，通过公开 props、插槽、主题能力和局部样式尽可能 1:1 对齐参考，并在相同视口与状态下修正可修复差异。本技能默认采用这一视觉目标，无需另问复刻档位；只借鉴外观标准，仍保留当前业务文案、数据和交互，不引入 mock 或完整模块重建。用户明确限定只改某些属性时，以该范围验收。

按有意义的子任务阶段应用强度，编码与对应审查使用同一规则：

| 当前子任务 | 强度 | 实施边界 |
| --- | --- | --- |
| 组件选用、局部结构、布局、视觉样式及动画外观 | **lite** | 允许为已确认的还原度增加必要样式，仍优先复用已有组件；不以减少代码为由保留可修复的视觉差异。 |
| 文字内容、按钮文字、toast/alert 等提示文案 | **ultra** | 保留当前文案、动态插值和数据绑定，不按参考改写；只质疑未经需求支持的新增或改写，不反复质疑已确认要求。 |
| 数据与状态绑定、事件、必要动画逻辑、无障碍和测试 | **full** | 保留原有行为，以最小完整修改支持已确认效果；不新增业务交互，不省略清理、取消、失败路径及相关验证。 |

例如弹窗外观用 lite，已有标题和按钮文案用 ultra，开关状态、焦点恢复和回归验证用 full；动画的位移、缓动用 lite，监听器与计时器清理用 full。进入阶段前记录原强度，结束后恢复；仅作用于本次子任务，不写持久配置，不代表切换模型或推理强度。用户明确锁定强度、指定其他强度或停止 ponytail 时，遵从最新指令。

强度只约束实现方式，不改变已确认范围、还原度、无障碍或验收要求。lite 的更小方案可用一句话说明；若已确认目标无需取舍，直接按目标实施，不再次要求用户选择。确有影响目标的取舍时才回到上述澄清流程。

## 定位与测量

先读项目约束。

定位目标组件、样式文件、主题令牌和相关调用方，检查项目已有等效组件。追踪实际生效的继承、选择器优先级、组件默认样式和弹层挂载位置，找到差异来源后再修改。共享组件或样式须确认影响范围，优先使用现有局部配置。

查看截图尺寸、裁剪范围与可识别的锚点；截图像素不直接等于 CSS 像素，结合视口、缩放和设备像素比判断。只有局部截图时避免推断整个页面尺寸，不能确定的值标为估计。参考网页使用已安装且允许的浏览器工具读取目标 DOM、计算样式与元素边界；参考源码只读分析相关样式和素材。工具或访问受限时记录缺口。

提供录屏时，定位触发动作及可见变化的开始、中间和结束状态。按实际时间戳或帧率分别估计尺寸、位移、缩放、透明度和旋转的时长、延迟与缓动；不同属性可有不同节奏。区分点击后的等待、加载、滚动、页面导航与组件动画，不将它们合并为动画时长。无法确定的参数及误差注明估计。

只对实际差异记录“当前值 → 目标值/依据”，用于指导修改与复查；简单调整可用简短笔记，无需为未涉及项建立清单：

| 视觉类型 | 对齐内容 |
| --- | --- |
| 文字 | 字体族、实际加载字体、字号、字重、颜色、行高、字距、对齐、换行与省略；先排除字体缺失造成的度量差异。 |
| 控件与按钮 | 宽高、内边距、图标大小与间距、边框、圆角、背景、阴影，以及适用的悬停、焦点、选中、禁用和加载样式。 |
| 布局与间距 | 容器宽高、内外边距、gap、对齐、分隔线、滚动范围与响应式行为；区分内容自然撑开和固定尺寸。 |
| 列表与表格 | 列宽、行高、表头、单元格留白、文字与图标对齐、边框、斑马纹、操作列、空状态与分页位置，保留原有排序筛选及分页逻辑。 |
| 弹层与素材 | 弹窗/抽屉/下拉层的尺寸、位置、留白、遮罩和层级；图片裁切、图标基线与素材比例。 |
| 动画（提供录屏时） | 触发条件、起止状态、方向、时长、延迟、缓动、重复或反向及动画中的遮挡和布局变化。 |

## 局部实现

- 沿用技术栈与样式方案；优先复用现有令牌，令牌与明确视觉目标不符时添加有依据的局部值。先调整容器和布局，再调文字与控件，最后处理装饰细节。
- 项目使用 Element UI 时，优先已有业务封装及对应组件，按本地版本核实 props、插槽和样式接口，不混用 Element Plus API；使用其他组件库时沿用该库。无需为视觉复刻另造列表、按钮、抽屉、弹窗或消息服务。
- 优先在已有样式来源修正，避免不断叠加覆盖规则。变化限制在目标区域；挂载到容器外的弹层采用项目支持的专用类或样式入口，避免全局修改其他实例。
- 仅在样式无法完成布局时调整最小局部结构，保留语义、事件、key、数据绑定和状态。不得通过隐藏真实内容、硬编码业务文本、整块截图代替界面或移除焦点状态来凑视觉效果。
- 录屏显示的动画优先复用项目已有过渡与组件动画；简单效果用局部 CSS transition/keyframes，还原触发与取消后的状态。仅在 CSS 无法表达已有状态变化时使用最少的现有事件逻辑，正确清理计时器与监听器，并尊重 `prefers-reduced-motion`。不为动画新增业务行为。
- 简化代码不降低已确认的还原度、可访问性或验证要求。参考与可访问性要求存在显著冲突时说明并确认。安装依赖、启动长期服务器等遵循项目授权，任务不授权 Git 写操作。

## 对照验证与交付

1. 保存修改前目标区域的基准截图；修改后在相同视口、缩放、区域、内容和状态下对照参考。截图前等待字体与图片加载，稳定动画。数据不同则区分样式差异与内容造成的尺寸变化，不为对齐截图改写正式数据。
2. 先检查几何布局，再看排版、颜色及细节；按需使用并排或叠加截图。修正后复查受影响区域。已确认的视口与状态完成对照、主要差异已修复且相关回归通过后交付；影响验收的剩余差异须确认取舍，轻微差异如实列出，不以交付记录代替仍可完成的主要修正。不报告未经测量的相似度百分比。
   提供录屏时，在相同视口和触发条件下录制或逐帧观察本地动画，分别对照开始、中间和结束状态的几何与有效透明度，以及各属性的时长与节奏。验证实际可见效果，接受过渡放在外层或内层等不同实现，不以 CSS 写法或总时长相同代替动态对照；检查快速重复操作、取消、中途离开和减少动态效果设置。缺少录屏分析或本地录制工具时说明哪些动画维度未验证，不仅凭静态截图声称动画一致。
3. 回归受影响的原有交互、键盘和焦点、适用视觉状态及移动端/桌面端；修改共享样式时检查相关其他实例。纯展示区域只验证展示，无需新增操作链或业务测试。
4. 运行项目已有且与改动相关的格式、lint、类型、测试或构建检查；结构或逻辑受影响时按需补充最小有效测试，不为纯样式改动新建测试框架。缺少浏览器、素材、数据或运行权限时报告未验证项，静态检查不能替代视觉验收。
5. 简要交付修改文件、主要视觉调整、各类子任务采用的 ponytail 强度、关键前后对照截图（可用时）、实际检查结果与剩余差异。涉及组件封装、复用或替换决策时补充组件来源及选择依据，未复用现有候选时说明原因；无需为简单样式调整重复制作组件清单。
6. 有仓库时展示 git status 与本次 diff 摘要，区分原有改动；完成后停止，不自动暂存、提交或推送。