GitHub 2万星！这个AI工具能一键克隆任何网站，前端工程师要紧张了
2026-06-29
发生了什么？跟你有什么关系？
一个在GitHub上获得2万星的开源项目火了——它能让AI帮你“照抄”一个网站的前端代码。你只需要输入网址，AI就会自动把那个网站的页面设计、交互效果、颜色字体全部扒下来，生成一套可以直接在电脑上运行和修改的代码。对不懂技术的人来说，这意味着你可以快速复刻一个好看的网站模板；对前端工程师来说，这简直就是“抄作业神器”兼“饭碗威胁器”。
它是怎么工作的？
这个工具叫ai-website-cloner-template，使用非常简单：
- 准备环境：从GitHub模板仓库生成自己的项目，然后在电脑上安装依赖（就像安装手机App一样简单）。
- 启动AI助手：运行
claude --chrome命令，让AI能操控浏览器。 - 输入命令：键入
/clone-website https://目标网站.com，然后等着AI自己干活。
AI会分五步完成克隆：
- 全覆盖扫描：AI像人一样滚动页面、点击按钮、悬停鼠标，记录下所有颜色、字体、间距、圆角等设计细节。注意：它只能复制静态样式和交互，不能复制需要登录或第三方插件的动态内容。
- 搭好基础框架：把扫描到的颜色、字体等设置成全局规则，并把所有图片、图标等资源下载下来。
- 写组件说明书：把页面拆成导航栏、卡片、表格等各个区块，并为每个区块写一份详细的规格文档，包括每个元素的位置、大小、动画方式等。
- 多人并行施工：AI分别给每个区块独立安排一个“工人”同时干活，互不干扰，效率很高。
- 拼装验收：把所有组件合并成完整页面，并自动检查代码有没有错误，确保能直接运行。
最终得到的是一个完整的Next.js前端工程（你可以理解为一套现代化、可修改的网站源代码），直接用npm run dev命令就能在浏览器里看到效果。
这个工具能用来做什么？
作者给出了三个正当用途：
- 网站迁移：如果你原来的网站是用WordPress、Webflow之类的平台搭建的，想换成Next.js技术栈，可以先用它生成基础代码再修改。
- 源码恢复：网站还在线，但原始代码丢失了（比如之前的程序员跑路了），可以用它把活着的网站逆向成现代代码。
- 学习研究：想研究某个网站的布局、动画或响应式设计，用它生成代码后逐块分析，比手动查看网页元素高效得多。
⚠️ 重要提醒
作者特别强调：不能拿它做钓鱼网站，要尊重别人的版权，使用前务必检查目标网站的服务条款是否允许。工具虽好，但要合理合法使用。