AI 一键克隆网站

为什么需要像素级克隆

当你想在 Angular 项目里实现一个复杂的响应式导航栏，或在 React 应用中复刻某个 SaaS 产品的仪表盘布局时，手动检查目标站点的 DOM 结构、计算 CSS Grid 参数、比对不同断点的媒体查询，往往要耗费数小时。更棘手的是，即使视觉相似度做到九成，缺失的交互逻辑（如拖拽排序、虚拟滚动）也会让原型在演示时直接「翻车」。

技能如何工作

这个技能通过 AI 编码代理解决上述痛点，核心是学习实现手法而非搬运代码。执行流程分五步：

1. 抓结构：代理读取目标页 DOM 或截图，输出组件树（如 Header > Nav > MenuItem）而非整页拷贝
2. 还原样式：复用目标站的设计 token（颜色、间距、字体），保持观感一致
3. 生成可跑项目：输出带 package.json 和启动脚本的工程，本地 npm run dev 即可运行
4. 去标识化：替换 logo、文案、品牌色，变成自己的版本
5. 补交互：把静态还原补成真实组件与状态管理

适用边界与红线

技能明确区分合法学习与侵权抄袭：

• 可做：学习布局与交互实现、制作内部原型、复刻开源页面后改造
• 不可做：直接搬运商用代码、冒充原站、抓取并转售受版权内容

技术陷阱需特别注意：

• 依赖在线抓取可能被反爬机制挡住，要准备本地截图兜底
• 克隆前核实目标站 robots.txt 与版权许可，商用前取得授权
• 静态还原不等于完整原型，交互逻辑需单独验证（如 onScroll 触发懒加载）

最终产出应满足：本地可运行、品牌资产已替换、实现思路可追溯至开源许可。