最近发现一个叫 same.new 的工具，简直颠覆了我的认知！它能像素级地复制一个网站，连按钮的逻辑、交互都给你扒得明明白白，真有点“吓人”！

今天就带大家扒一扒 same.new^[1] 背后的技术，看看它是怎么做到这一切的。

same.new：网站克隆神器

先说说 same.new 这玩意儿有多牛。简单来说，你给它一个网址，它就能给你“克隆”出一个一模一样的网站。注意，这里说的可不是简单的复制粘贴 HTML/CSS，人家是把整个网站的结构、组件、样式，甚至交互逻辑都给你整出来，生成的是可维护的代码！

这不就是传说中的“像素级复制”吗？简直是前端工程师的福音（也可能是噩梦，哈哈）！

same.new 工作流程大揭秘

same.new 到底是怎么做到这一点的呢？我研究了一下，发现它的工作流程大概是这样的：

1. 1. 分析目标网站：先看清楚你要“抄”的网站长啥样。
2. 2. 创建项目结构：搭好架子，准备写代码。
3. 3. 生成组件代码：把网站拆成一个个小零件，分别写代码。
4. 4. 样式适配：给这些小零件穿上“衣服”，让它们看起来和原网站一样。
5. 5. 部署：把做好的网站发布到网上，让大家都能看到。

下面我就来详细说说每一步是怎么做的。

1. 分析目标网站：看透你的“心肝脾肺肾”

same.new 要“抄”一个网站，首先得搞清楚这个网站的结构。这就像医生做手术前，得先看清楚病人的“心肝脾肺肾”在哪儿。

• • 目标识别： same.new 会先访问你要“抄”的网址，获取网站的截图，然后分析这个网站的设计和结构。这一步很可能用了 Puppeteer 或 Playwright 这样的“无头浏览器”技术。这些技术能模拟用户访问网站，获取网页的 DOM 结构。
• • 组件拆分： 接下来，same.new 会把整个页面分解成一个个小组件，比如头部、Logo、搜索框、列表、页脚等等。这就像把一辆汽车拆成发动机、轮胎、座椅等等。这一步可不简单，same.new 可能会用到以下几种技术：
  • • 基于视觉的分割： 用计算机视觉技术，分析页面截图，识别出不同的区域和元素。
  • • DOM 树分析： 分析网页的 HTML 代码结构，通过标签、类名等，推断出组件之间的关系。
  • • 启发式规则： 结合一些预定义的规则（比如常见的导航栏、页脚等），来辅助组件的识别。

2. 创建项目结构：搭好架子，准备开工

分析完网站结构，same.new 就要开始搭架子了。它选择了 Next.js 作为前端框架，还用了一个叫 shadcn/ui 的组件库。

• • Next.js 框架： Next.js 是一个很流行的 React 框架，它支持服务端渲染（SSR）和静态站点生成（SSG），特别适合克隆这种静态内容为主的网站。
• • shadcn/ui 组件库：这是一个基于 Tailwind CSS 的 UI 组件库，提供了很多现成的组件，可以直接拿来用，省去了很多写样式的时间。
• • 依赖安装： same.new 会通过 npm install 安装项目所需的依赖，比如 Tailwind CSS、postcss、autoprefixer 等。

就像下面这样：

npm install tailwindcss postcss autoprefixer

3. 生成组件代码：给每个零件写代码

搭好架子，接下来就要给每个组件写代码了。这是 same.new 最核心的部分，也是最神奇的地方！

same.new 会为每个组件创建一个独立的 React 组件文件（.jsx 或 .tsx）。那么问题来了，它是怎么生成这些代码的呢？我猜可能有以下几种方式：

• • 模板引擎： 针对不同类型的组件（比如头部、搜索框），same.new 可能预先定义好了一些代码模板，然后根据实际情况填充数据（比如链接、Logo 图片地址等）。
• • AI 模型： same.new 可能会用到大型语言模型（LLM）或者专门训练的模型，根据组件的描述（比如“一个带有链接和登录按钮的头部导航栏”），生成对应的 React 代码。这就能解释为什么 same.new 能处理比较复杂的布局和交互。
• • 混合方法： 结合模板引擎和 AI 模型，对于常见的组件用模板，对于更复杂的组件用 AI 生成。

4. 样式适配：穿上“衣服”，打扮漂亮

组件代码写好了，还得给它们加上样式，让它们看起来和原网站一样。same.new 主要用了 Tailwind CSS 来实现样式。

• • Tailwind CSS： Tailwind CSS 是一种“实用类优先”的 CSS 框架，可以通过组合不同的类名来快速构建样式。
• • 颜色主题匹配： same.new 会自动调整 Tailwind CSS 的颜色配置，让它和目标网站的颜色风格一致。这可能是通过分析页面截图或 CSS 样式表来提取颜色信息的。
• • 布局调整： 通过 Tailwind CSS 的类名（比如 flex, justify-center, items-center 等）来调整组件的布局，让它和目标网站一模一样。

5. 部署：发布到网上，让大家看看

最后一步，就是把做好的网站发布到网上。same.new 选择了 Netlify 来部署。

• • Netlify： Netlify 是一个很流行的静态网站托管平台，提供了自动构建、部署、CDN 等功能。
• • 构建配置： same.new 会创建一个 netlify.toml 配置文件，指定构建命令和输出目录。
• • 版本控制与部署： same.new 内部可能用了 Git 这样的版本控制系统，每次修改都会创建一个新的版本，并尝试部署到 Netlify。

可能遇到的挑战

same.new 这么厉害，是不是就无敌了呢？当然不是，它也会遇到一些挑战：

• • 动态内容： 如果目标网站有很多动态内容（比如用户登录状态、实时数据等），same.new 可能就没办法完全复制了。它更擅长克隆静态内容。
• • 复杂交互： 对于复杂的 JavaScript 交互（比如复杂的表单验证、动画效果等），same.new 可能需要更高级的技术来实现。
• • 反爬虫机制： 有些网站有反爬虫机制，same.new 可能需要想办法绕过这些机制，避免被屏蔽。
• • 版权问题： 如果直接抄别人的网站,这里面可能会有法律风险,所以 same.new 也要考虑版权的问题.

竞品分析

市面上也有其他类似的工具，它们各有优缺点。我做了个简单的对比：

说了这么多

same.new 确实是一个很强大的网站克隆工具。它结合了多种前端技术和 AI 模型，实现了自动化分析、代码生成、样式适配和部署。虽然它还不能完美地复制所有类型的网站，但在克隆静态内容为主的网站方面，它已经做得很出色了。

作为一名开发者，我既惊叹于 same.new 的强大，也对它背后的技术充满了好奇。未来，随着 AI 技术的不断发展，我相信这类工具会越来越智能，越来越强大。

好了，今天就跟大家聊到这里。如果你觉得这篇文章对你有帮助，记得点赞、分享、在看三连哦！

引用链接

[1] same.new: https://same.new/