AI复刻网站功能初体验1-个人实现我让不同的Agent分别针对同一个网站进行代码复刻每个Agent的思路和效果都不一样我想把这些思路整理可以复用的复刻思路帮我编写一个SKILLS仓库地址https://gitee.com/enzoism/html_foreign_website_guide2-开源项目实现【空前端框架】【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进行约束后端复刻-【REAReverse Engineer Anything】借助的是反编译能力把二进制文件部分翻译为源码借助AI的能力将那些模糊的功能实现开源实现提供了一个稳定的前端框架Next.js 个人感觉只能算一个先锋的技术尝试提出了一个可验证的概念**【空前端框架】【SKILLS约束】**进行网站复刻一句话本质Prompt提示词编写SKILLS要求对LLM进行约束文章目录AI复刻网站功能初体验1-应用-REAReverse Engineer Anything一、它是什么二、准备工作三、它能分析什么四、两种使用方式方式 A通过 Agent 对话推荐最符合 REA 的设计初衷方式 B命令行直接使用五、更新六、实战案例参考官方 Showcases七、注意事项2-前端-AI网站复刻ai-website-cloner-template前置准备第一步设置项目第二步克隆一个网站常用命令注意事项3-REAReverse Engineer Anything是不是只适用于 电脑上的应用 不适用与网站的复刻有没有什么开源的网站复刻工具或者提示词 REA 分析网站能做什么不能做什么️ 专门的网站复刻工具与提示词方案1. AI Website Cloner Template最主流的方案2. Open LovableFirecrawl 出品3. SnapCode — Site to Prompt提示词生成工具4. Strot逆向网站内部 API5. 通用提示词模板 总结4-脑洞大开1-应用-REAReverse 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.js22.x≥22.19、24.x≥24.11或 26npm2. 安装# 方式一全局安装推荐长期使用npminstall--globalrea-agents# 方式二不安装直接用 npxnpx rea-agents setup3. 配置 Agent最关键的一步npx rea-agents setup运行后按提示选择你要接入的 Agent支持 Claude Code、Codex、Cursor、Gemini CLI、Grok Build 等审查它提议的配置修改并确认会自动备份已有配置重启你的 Agent使配置生效不同分析目标需要不同的后端引擎见下表。纯静态 JS / .NET 分析不需要原生分析引擎原生二进制分析需要一个已安装的Hopper、Ghidra 或 IDAsetup 时可选经批准后安装 Hopper。三、它能分析什么目标类型返回内容额外要求原生二进制ELF/Mach-O/PE伪代码、汇编、字符串、符号、调用关系Hopper / Ghidra / IDAJavaScript / Electron 应用模块、导入、路由、IPC、原生插件关系仅需 Node.js网站页面结构、脚本、网络请求、截图Chrome 系浏览器Android APKManifest、类、反编译方法、引用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-agentslatest analyze-javascript-application /absolute/path/to/app--json返回结果包含模块、导入、Electron 边界及其证据。Windows 下路径写成D:/apps/example这样的形式。原生二进制分析需要先配置 provider具体命令见官方 CLI 文档。五、更新REA 迭代非常快官方建议保持更新# 全局安装的rea update# npx 方式接入 Agent 的npx rea-agentslatest setup更新后需重新审查 setup 变更并重启 Agent。六、实战案例参考官方 ShowcasesDX-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-templatehttps://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助手会问你希望把项目放在电脑的哪个文件夹里。你告诉它一个位置就行。它会自动完成克隆代码、安装依赖和检查环境的全部工作。方式二手动操作如果你更习惯自己动手可以这样做在GitHub上创建一个新的空仓库。把你的新仓库地址给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-REAReverse 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-template2. Open LovableFirecrawl 出品由 Firecrawl 团队开发定位是“在几秒钟内将任何网站克隆并重建为可编辑的 React 应用”上线 5 天即获得 8.4K Star。项目地址https://github.com/firecrawl/open-lovable3. SnapCode — Site to Prompt提示词生成工具这是一个Chrome 扩展专门用于将网站转化为详细的 AI 复刻提示词。它的工作方式很直观访问目标网站 → 点击扩展图标 → 获得完整的复刻提示词 全页截图 → 粘贴到 Claude、Codex、Cursor 中AI 就会构建出精确的克隆。它捕获的内容包括完整的 HTML DOM 结构、色彩/字体/间距/阴影、悬停和聚焦状态、CSS 动画、响应式断点、真实图片 URL 等。4. Strot逆向网站内部 API如果你关心的是网站数据接口而非界面Strot 是一个用自然语言逆向网站内部 API 的工具。它能分析网页加载数据的 AJAX 请求检测分页参数并生成提取代码来复刻网站自身的 API 调用。安装pip install strot5. 通用提示词模板一个高效的网站复刻提示词通常包含以下要素目标 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 扩展逆向网站内部数据 APIStrot通用提示词方案上述结构化提示词模板一句话REA 是“理解工具”而专门的网站克隆工具如 AI Website Cloner Template才是“复刻工具”。如果你要复刻网站界面直接使用后者会更高效。4-脑洞大开AI前端复刻开源仓库https://github.com/JCodesMore/ai-website-cloner-template个人理解这个项目是一个空的前端项目只是编写了一个skills来约束LLM进行前端内容编写我尝试把skills翻译为了中文个人感觉这个仓库只能算一个先锋的技术尝试提出了一个可验证的概念**【空前端框架】【SKILLS约束】**进行网站复刻个人推测可以把这个项目改为一个其他前端框架的项目比如转化一个 vite 前端框架