把参考网站重建为可编辑的 Next.js 代码

关于这个 Skill

该仓库将 Next.js 起步项目与通用 clone-website Skill 结合。向编程 Agent 提供一个或多个参考 URL 后，流程会映射路由、检查桌面与手机页面及素材、构建可编辑组件，并在相同视口和交互状态下对照结果。项目还提供页面检查及 Framer、动效重建参考。

为什么推荐

JCodesMore 提供的网站重建流程与 Next.js 项目模板。封面为作者仓库中的效果对比图；实际效果取决于参考网站、Agent 和检查工具。

适合用来做什么

• 将自己拥有的网站迁移为可编辑的 Next.js 项目。
• 在原始源码不可用时重建已有页面。
• 通过实际实现研究响应式布局、素材和交互方式。

从参考页面到可运行网站

Agent 将参考 URL 映射到本地路由，观察内容、素材与交互，再实现组件并对照源页面和本地页面。交付包括运行说明、路由映射、代表性的桌面与手机对比，以及尚存差异。

Skill 要求交付可编辑代码和可工作的控件，截图与 iframe 用作参考。视觉相似度和功能完整性仍需实际检查。

官方仓库与安装说明Clone Website Skill 说明

安装与开始使用

将仓库克隆到新项目，使用 npm install 安装依赖并运行 npm run check。用支持的 Agent 打开项目并启用浏览器访问。README 展示了在 Claude Code 或 Cursor 中使用 /clone-website 加参考 URL；Codex 和 OpenCode 可直接使用通用 Skill。

官方仓库与安装说明

使用前需要了解

• 需要 Node.js 24 或更新版本、具备浏览器访问能力的编程 Agent，以及访问参考网站和素材的网络。
• 作者列出的工具包括 Claude Code、Codex CLI、Cursor 和 OpenCode。模板使用 Next.js 16、React 19、TypeScript、Tailwind CSS 和 shadcn/ui。
• 请使用有权复制的素材，并检查参考网站条款以及品牌、文案和素材的权利。

支持的 Agent