AI复刻网站功能初体验-创锋一号

AI复刻网站功能初体验

1-个人实现：我让不同的Agent分别针对同一个网站进行代码复刻，每个Agent的思路和效果都不一样，我想把这些思路整理可以复用的复刻思路，帮我编写一个SKILLS，仓库地址：https://gitee.com/enzoism/html_foreign_website_guide
2-开源项目实现：【空前端框架】+【SKILLS约束】
1-空前端框架下载：git clone https://github.com/JCodesMore/ai-website-cloner-template
2-移除远程仓库地址：git remote remove origin
3-启动本地Agent(项目中有一个skills是clone-website)：claude --dangerously-skip-permissions
4-告诉Agent使用技能进行网站复刻：/clone-website https://muse.8dd8.com/
3-个人对比开源：
前端复刻->【ai-website-cloner-template】大家都是使用SKILLS去对AI进行约束
后端复刻->【REA（Reverse Engineer Anything）】借助的是反编译能力，把二进制文件部分翻译为源码，借助AI的能力，将那些模糊的功能实现
开源实现提供了一个稳定的前端框架：Next.js （个人感觉只能算一个先锋的技术尝试，提出了一个可验证的概念：**【空前端框架】+【SKILLS约束】**进行网站复刻）
一句话本质：Prompt提示词，编写SKILLS要求对LLM进行约束

文章目录

AI复刻网站功能初体验
- 1-应用-REA（Reverse Engineer Anything）
- - 一、它是什么
  - 二、准备工作
  - 三、它能分析什么
  - 四、两种使用方式
  - 方式 A：通过 Agent 对话（推荐，最符合 REA 的设计初衷）
  - 方式 B：命令行直接使用
  - 五、更新
  - 六、实战案例参考（官方 Showcases）
  - 七、注意事项
- 2-前端-AI网站复刻ai-website-cloner-template
- - 前置准备
  - 第一步：设置项目
  - 第二步：克隆一个网站
  - 常用命令
  - 注意事项
- 3-REA（Reverse Engineer Anything）是不是只适用于电脑上的应用，不适用与网站的复刻，有没有什么开源的网站复刻工具或者提示词
- - 🧭 REA 分析网站：能做什么，不能做什么
  - 🛠️ 专门的网站复刻工具与提示词方案
  - - 1. AI Website Cloner Template（最主流的方案）
    - 2. Open Lovable（Firecrawl 出品）
    - 3. SnapCode — Site to Prompt（提示词生成工具）
    - 4. Strot（逆向网站内部 API）
    - 5. 通用提示词模板
  - 💎 总结
4-脑洞大开

1-应用-REA（Reverse Engineer Anything）

个人感觉更适合【电脑软件】，本质是【反编译】–>应用程序被打包为二进制文件，但是反编译就可以把这些二进制文件部分翻译为源码，借助AI的能力，将那些模糊的功能实现，改写为真实的业务代码，从而实现【应用复刻】，参考网址：https://mp.weixin.qq.com/s/opomqvcruvmcQr4fzTT5Sg

我已经读完了那篇新智元的文章和 REA 的 GitHub 官方仓库（morluto/rea），下面帮你整理一份完整的使用指南。

一、它是什么

REA 是一个基于MCP（模型上下文协议）的逆向工程工具，核心逻辑一句话概括：让大语言模型（Claude Code、Codex、Cursor 等 Agent）直接调用 Ghidra / Hopper / IDA 这类专业逆向工具，自动完成"反编译 → 读汇编 → 追踪逻辑 → 用人类语言汇报并重构代码"的全过程。你不需要懂汇编，只需要像老板一样下指令即可。

所有分析都在本地运行，不会上传你的目标文件。

二、准备工作

1. 环境要求

Node.js：22.x（≥22.19）、24.x（≥24.11）或 26+
npm

2. 安装

# 方式一：全局安装（推荐长期使用）npminstall--globalrea-agents# 方式二：不安装，直接用 npxnpx rea-agents setup

3. 配置 Agent（最关键的一步）

npx rea-agents setup

运行后按提示：

选择你要接入的 Agent（支持 Claude Code、Codex、Cursor、Gemini CLI、Grok Build 等）
审查它提议的配置修改并确认（会自动备份已有配置）
重启你的 Agent使配置生效

不同分析目标需要不同的后端引擎（见下表）。纯静态 JS / .NET 分析不需要原生分析引擎；原生二进制分析需要一个已安装的Hopper、Ghidra 或 IDA（setup 时可选经批准后安装 Hopper）。

三、它能分析什么

目标类型	返回内容	额外要求
原生二进制（ELF/Mach-O/PE）	伪代码、汇编、字符串、符号、调用关系	Hopper / Ghidra / IDA
JavaScript / Electron 应用	模块、导入、路由、IPC、原生插件关系	仅需 Node.js
网站	页面结构、脚本、网络请求、截图	Chrome 系浏览器
Android APK	Manifest、类、反编译方法、引用	JADX + 完整 JDK
.NET 程序集	元数据、CIL 指令、依赖	无（纯静态）
WASM / EVM 字节码 / Go 二进制 / SQLite / 固件 / 抓包 / pcap 等	各类结构与证据	见各专项指南

完整的支持矩阵见官方 README 的 “What you can analyze” 表格。

四、两种使用方式

方式 A：通过 Agent 对话（推荐，最符合 REA 的设计初衷）

直接在 Claude Code / Codex 里说人话，例如：

Understand how search works in the Notes app, show me the evidence, and build a similar feature for my project.

把 “Notes” 换成你的目标应用、把功能换成你想搞清楚的东西即可。Agent 会自动调用 REA 的 MCP 工具完成：检查目标 → 追踪相关代码 → 返回带证据的结论 → 追问 → 解释行为 → 写出并测试实现。工作流程是循环的：Ask → Inspect & trace → Read the evidence → Use what you learn。

方式 B：命令行直接使用

# 分析一个解包的 JS/Electron 应用目录或 ASAR 文件npx-yrea-agents@latest analyze-javascript-application /absolute/path/to/app--json

返回结果包含模块、导入、Electron 边界及其证据。Windows 下路径写成"D:/apps/example"这样的形式。

原生二进制分析需要先配置 provider，具体命令见官方 CLI 文档。

五、更新

REA 迭代非常快，官方建议保持更新：

# 全局安装的rea update# npx 方式接入 Agent 的npx rea-agents@latest setup

更新后需重新审查 setup 变更并重启 Agent。

六、实战案例参考（官方 Showcases）

DX-Ball：追踪声音调用到位置→声像（pan）辅助函数，把不完整的伪代码重构成 C，通过了 3,205 个原始 x86 测试用例，精确复现了全部 63 字节编译后的函数。
Notion：从渲染进程的剪贴板 API 出发，穿过 preload 和 IPC 进入主进程，解析出富文本剪贴板格式——即文章里举的"扒 Notion 剪贴板桥接"的例子。
TH04（东方旧作）：分析 PC-98 的 16 位指令，恢复了弹幕环形角度的计算逻辑，并对比了重构 C++ 与历史编译器输出。

七、注意事项

合法性：REA 仅用于合法研究、教育、互操作性、软件保存，以及分析你拥有或获授权检查的软件。对 IDA Pro、Hopper、JEB 等商业工具，你必须合法持有授权，REA 不授予任何工具许可。
大型二进制：如遇超时，可通过REA_GHIDRA_STARTUP_TIMEOUT_MS或REA_HOPPER_STARTUP_TIMEOUT_MS调大启动时限。
出 bug 先更新：大概率新版已修复；仍有问题则带上版本号、目标类型、复现步骤去开 issue。

一句话总结：装 Node.js →npx rea-agents setup接入你的 Agent → 重启 → 直接用自然语言让 Agent 去逆向任何你想搞懂的软件功能。技术门槛从"精通逆向工程的黑客手艺"降到了"会下指令"的程度。

2-前端-AI网站复刻ai-website-cloner-template

https://github.com/JCodesMore/ai-website-cloner-template 帮我整理出如何使用的，我需要最简单的步骤说清楚，每一步具体要做什么内容

根据这个GitHub项目的说明，使用它的步骤其实很简单，核心就是一句话：让AI编程助手帮你设置项目，然后给它一个网址，它就能克隆出一个网站。

下面是整理好的具体操作步骤，每一步该做什么都写清楚了。

前置准备

在开始之前，你需要确保电脑上已经安装了这两个东西：

Node.js 24+：这是项目运行需要的环境。
一个AI编程助手：比如Claude Code、Codex CLI、Cursor或OpenCode。项目推荐使用Claude Code + Opus 5.5的组合，效果最好。

第一步：设置项目

这一步的目的是把项目的模板代码下载到你的电脑上，并安装好所有依赖。

你有两种方式来完成：

方式一（推荐）：让AI助手帮你做
打开你的AI编程助手（比如 Claude Code），直接把下面这段话粘贴进去，然后发送：
```
Set up https://github.com/JCodesMore/ai-website-cloner-template as a standalone project in a new folder on my computer. Ask me where to put it. Clone the repository, remove its origin remote, install dependencies, and run npm run check. Leave it ready for me to clone a website.
```
之后，AI助手会问你希望把项目放在电脑的哪个文件夹里。你告诉它一个位置就行。它会自动完成克隆代码、安装依赖和检查环境的全部工作。
方式二：手动操作
如果你更习惯自己动手，可以这样做：
1. 在GitHub上创建一个新的空仓库。
2. 把你的新仓库地址给AI助手，让它帮你克隆到本地，并执行npm install安装依赖，最后运行npm run check检查是否一切正常。

第二步：克隆一个网站

项目设置好之后，就可以开始克隆网站了。

在你的AI助手中打开这个项目，确保助手开启了“浏览器访问”权限（因为克隆过程需要它去访问和分析目标网站）。
在 Claude Code 或 Cursor 中，输入以下命令（把网址换成你想克隆的网站）：
```
/clone-website https://example.com
```
接下来，AI助手会按照“分析、观察、构建、对比”四个步骤自动工作，为你生成一个干净的 Next.js 应用。
生成完成后，如果你对页面有任何修改想法，直接告诉AI助手，它就能帮你调整。

常用命令

在项目文件夹里，你可能会用到这些命令：

npm run dev：启动开发服务器，在浏览器里预览效果。
npm run build：构建生产版本。
npm run check：一次性运行代码检查、类型检查和构建，确保项目没问题。

注意事项

用途限制：这个工具不能用于钓鱼、仿冒他人网站或任何违法活动。克隆前请确认你有权使用目标网站的设计和内容。
项目原理：它通过一个叫/clone-website的技能，让AI模拟人类浏览网站的过程，提取真实的资源和字体，然后用 Next.js 和 Tailwind CSS 重新实现出来。

3-REA（Reverse Engineer Anything）是不是只适用于电脑上的应用，不适用与网站的复刻，有没有什么开源的网站复刻工具或者提示词

REA 并非只适用于电脑上的应用，它同样可以分析网站，但其能力有明确的边界。对于网站复刻，确实有专门的开源工具和提示词方案，而且玩法比 REA 更聚焦。

🧭 REA 分析网站：能做什么，不能做什么

REA 的官方定位支持分析“websites”，通过观察网站脚本和网络流量来工作。但它本质是一个逆向理解工具，而不是一键复刻工具。

REA 能做的：

理解前端逻辑：分析网站的 JavaScript 代码，理解某个功能的实现思路。
观察网络行为：监控网站发出的 API 请求和响应，推断后端接口。
提供技术证据：输出伪代码、调用关系、字符串等线索，帮助你理解“它是怎么做到的”。

REA 不能做的（关键限制）：

看不到后端：REA 只能看到运行在你电脑上的部分和网络请求，服务器端的逻辑、数据库和核心业务代码对它完全不可见。对于依赖复杂后端的网站，REA 能提供的信息非常有限。
不会自动复刻：REA 的产出是理解材料，而非可直接运行的源码。它不会“一键还原”整个网站，从理解到实现，中间还有大量的重写、测试和维护工作。
遵守边界：REA 的设计明确不会绕过 DRM、许可证检查或网站的反爬/认证机制。

结论：REA 可以用于研究网站某个前端功能的实现思路，但它不适用于需要复刻整个网站（尤其后端逻辑）的场景。

🛠️ 专门的网站复刻工具与提示词方案

如果你目标是复刻网站的前端界面和结构，以下开源工具和提示词方案更直接、更高效。

1. AI Website Cloner Template（最主流的方案）

这是目前社区最活跃的网站克隆项目之一，定位就是“逆向工程任意网站，并用 AI 重建为像素级克隆版本”。

核心工作流：你只需提供一个 URL，运行/clone-website命令，它就会自动执行五阶段流程：

侦察：截图、提取设计令牌（颜色、字体），模拟滚动/点击/悬停等交互。
基础搭建：下载所有图片、图标等资源到本地。
组件规范：将每个 UI 组件写成精确的规范文件，包含getComputedStyle()计算值。
并行构建：分发多个构建代理，在不同 git 工作树中并行重建各区块。
组装与质检：合并代码，运行视觉差异对比，确保还原度。

支持平台：Claude Code（推荐）、Codex、Cursor、Gemini CLI、GitHub Copilot 等十余种 AI 助手。

项目地址：https://github.com/JCodesMore/ai-website-cloner-template

2. Open Lovable（Firecrawl 出品）

由 Firecrawl 团队开发，定位是“在几秒钟内将任何网站克隆并重建为可编辑的 React 应用”，上线 5 天即获得 8.4K Star。

项目地址：https://github.com/firecrawl/open-lovable

3. SnapCode — Site to Prompt（提示词生成工具）

这是一个Chrome 扩展，专门用于将网站转化为详细的 AI 复刻提示词。它的工作方式很直观：访问目标网站 → 点击扩展图标 → 获得完整的复刻提示词 + 全页截图 → 粘贴到 Claude、Codex、Cursor 中，AI 就会构建出精确的克隆。

它捕获的内容包括：完整的 HTML DOM 结构、色彩/字体/间距/阴影、悬停和聚焦状态、CSS 动画、响应式断点、真实图片 URL 等。

4. Strot（逆向网站内部 API）

如果你关心的是网站数据接口而非界面，Strot 是一个用自然语言逆向网站内部 API 的工具。它能分析网页加载数据的 AJAX 请求，检测分页参数，并生成提取代码来复刻网站自身的 API 调用。

安装：pip install strot

5. 通用提示词模板

一个高效的网站复刻提示词通常包含以下要素：

目标 URL：明确要复刻哪个页面。
技术栈指定：例如 “用 Next.js + Tailwind CSS 重建”。
保真度要求：例如 “像素级还原，包括间距、字体、颜色和交互动效”。
组件拆解：将页面按区块（Header、Hero、Features、Footer）分别描述。
证据要求：要求 AI 在复刻时说明它从原网站提取了哪些设计令牌（颜色值、字体大小等）。

你可以直接在 AI 助手中使用类似这样的提示词：

“请分析这个网站 [URL]，提取它的设计系统（颜色、字体、间距、圆角值），然后用 Next.js + Tailwind CSS 重建它的首页。要求：1）像素级还原布局和间距；2）保留所有交互动效（悬停、点击）；3）下载并本地化所有图片资源；4）组件按 Header / Hero / Content / Footer 拆分为独立文件。”

💎 总结

需求	推荐工具/方案
理解网站某个前端功能的实现思路	REA（但受限于后端不可见）
像素级复刻网站前端界面	AI Website Cloner Template或Open Lovable
生成高质量的复刻提示词	SnapCodeChrome 扩展
逆向网站内部数据 API	Strot
通用提示词方案	上述结构化提示词模板

一句话：REA 是“理解工具”，而专门的网站克隆工具（如 AI Website Cloner Template）才是“复刻工具”。如果你要复刻网站界面，直接使用后者会更高效。

4-脑洞大开

AI前端复刻开源仓库：https://github.com/JCodesMore/ai-website-cloner-template

个人理解：这个项目是一个空的前端项目，只是编写了一个skills来约束LLM进行前端内容编写
我尝试把skills翻译为了中文，个人感觉这个仓库只能算一个先锋的技术尝试，提出了一个可验证的概念：**【空前端框架】+【SKILLS约束】**进行网站复刻
个人推测，可以把这个项目改为一个其他前端框架的项目，比如转化一个 vite 前端框架

企业官网建设流程全解析