网页 UI 页面复刻 Skill（ui-site-clone-skill）
分析目标网页的视觉设计与交互结构，将其 UI 高质量还原为可运行的 HTML/CSS（及必要 JS）前端代码，做到布局、配色、字体、间距与响应式行为的一致性。
能力范围
| 复刻维度 | 手段 |
|---|---|
| 布局结构 | 语义化 HTML + Flex/Grid 还原 |
| 视觉样式 | CSS 变量还原配色/字体/间距 |
| 组件化 | 按区块拆分可复用组件 |
| 资源提取 | 图片/图标/字体/动画抓取 |
| 交互行为 | 必要 JS（轮播、菜单、表单校验） |
| 响应式 | 断点还原移动/平板/桌面 |
工作流程（6 阶段）
Stage 1：页面拆解
| 步骤 | 操作 |
|---|---|
| 1.1 | 截图目标页面（桌面 + 移动） |
| 1.2 | 用 DevTools 分析布局：容器宽度、栅格、定位方式 |
| 1.3 | 提取设计令牌：主色/辅色、字体族、圆角、阴影、间距尺度 |
Stage 2：资源提取
| 步骤 | 操作 |
|---|---|
| 2.1 | 下载图片、SVG 图标、背景图 |
| 2.2 | 提取字体文件（woff2/ttf）或对应 Web 字体 |
| 2.3 | 记录动画/过渡参数（duration、easing） |
Stage 3：结构重建
| 步骤 | 操作 | 产出 |
|---|---|---|
| 3.1 | 语义化 HTML 骨架（header/main/section/footer） | index.html |
| 3.2 | 按区块拆组件，去冗余 | 组件片段 |
| 3.3 | 建立设计令牌 CSS 变量 | tokens.css |
Stage 4：样式还原
| 步骤 | 操作 |
|---|---|
| 4.1 | 编写布局 CSS（Flex/Grid 对齐原稿） |
| 4.2 | 还原配色/字体/间距/圆角/阴影 |
| 4.3 | 还原 hover/active/动画态 |
Stage 5：交互与响应式
| 步骤 | 操作 |
|---|---|
| 5.1 | 还原菜单/轮播/弹窗等交互 JS |
| 5.2 | 设置媒体查询断点，还原各端布局 |
| 5.3 | 校验表单/按钮等基础可操作性 |
Stage 6：比对校验与交付
| 产出 | 说明 |
|---|---|
index.html + styles/ + assets/ |
可运行复刻工程 |
CLONE_REPORT.md |
还原度、差异、未还原项 |
| 并排比对截图 | 视觉一致性说明 |
注意事项
- 版权边界：复刻仅供学习/内部原型/授权项目；勿直接抄袭商用站点的受版权内容。
- 资源合规：图片/字体提取注意授权，优先用等价开源替代。
- 像素优先：以"视觉一致"为目标，而非逐元素复制 DOM 结构。
- 响应式必做：桌面单端还原常遗漏移动端，需双端校验。
- 轻量交互：优先纯 CSS 实现，仅在必要时引入 JS，保持工程轻量。
