Agent Skills
返回列表
💻

网页 UI 克隆

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_814dbe54/ui-site-clone-skill，将该网页 UI 页面复刻技能集成到 AI 助手中。

技能介绍

解决什么问题

拿到一个设计稿或线上站点，想把它变成可运行、可二次开发的前端代码时，工程师通常要花大量时间做「像素搬运」：截图比对、翻 DevTools 量容器宽度、逐个抠设计令牌，再手动还原布局和交互。这个技能的目标就是把这件事流程化——输入一个目标网页，输出一套结构清晰、样式接近原稿的 index.html + styles/ + assets/ 工程，而不是一坨复制粘贴的 DOM。

它是怎么工作的

核心能力覆盖六个维度：

  • 布局结构：语义化 HTML 骨架 + Flex/Grid 还原栅格和定位
  • 视觉样式：CSS 变量管理配色、字体、间距、圆角、阴影
  • 组件化：按 header / main / section / footer 区块拆分，去掉冗余节点
  • 资源提取：图片、SVG 图标、字体文件（woff2/ttf）、动画参数
  • 交互行为：菜单、轮播、弹窗、表单校验等必要 JS
  • 响应式：媒体查询断点还原移动端 / 平板 / 桌面布局

工作流分六个阶段：先截图拆解页面并提取设计令牌；再抓取静态资源并记录动画参数；随后重建语义化结构、建立 tokens.css；接着还原样式与交互态；最后做并排比对校验，并产出一份 CLONE_REPORT.md 记录还原度、差异和未覆盖项。

适用边界与注意点

  • 版权合规：复刻结果仅用于学习、内部原型或授权项目，不要直接用于商用站点的受版权内容
  • 资源授权：提取的图片和字体需注意授权，优先替换为等价开源资源
  • 像素优先而非 DOM 复制：目标是视觉一致，不要求逐元素还原原站点结构
  • 响应式是必选项：桌面端还原容易遗漏移动端，需双端截图校验
  • 保持轻量：能由纯 CSS 实现的交互（hover、动画）就不引入 JS

使用场景

  • 拿到一个授权站点的截图，需要把桌面和移动端布局还原成可运行的 HTML/CSS 工程。
  • 设计稿里有完整配色、字体和间距规范，需要转成 index.html、styles 和 tokens.css。
  • 官网首页有轮播、菜单和表单校验，需要克隆出可交互的前端原型供内部评审。
  • 准备学习某个页面的视觉结构，需要提取图片、图标、字体和动画参数后重建组件。

适合人员

  • 需要把竞品参考页快速转成可维护前端代码的工程师
  • 负责把视觉规范交付成静态页面和组件样式的前端开发者
  • 想做可点击页面原型、又不想逐像素手写 CSS 的设计师
  • 需要从参考站点提取资源并重建活动页的前端实现人员