AI Website Cloner Template项目架构总览：从README到AGENTS.md，一张图看懂项目全貌

AI Website Cloner Template项目架构总览从README到AGENTS.md一张图看懂项目全貌【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-templateAI Website Cloner Template是一个一条命令克隆任何网站的开源模板项目——把目标网站 URL 交给 AI 编程智能体如 Claude Code它就能逆向还原出像素级一致的 Next.js 代码。本文带你从 README 到 AGENTS.md用一张结构图快速看懂这个热门 AI 克隆工具的项目全貌。上图是项目的官方演示对比左边是原始网站右边是 AI 智能体克隆出来的版本布局、字体、卡片几乎 1:1 还原。 项目架构一个目录一张图整个项目本质是一个预装配好的 AI 克隆工作台目录职责非常清晰目录 / 文件职责一句话说明src/app/Next.js 路由App Router 页面入口克隆产出的页面挂在这里src/components/React 组件含ui/shadcn/ui 基础组件和icons.tsx提取的 SVG 图标src/lib/utils.ts工具函数shadcn 的cn()类名合并工具src/hooks/自定义 Hooks预留的 React Hook 位置public/images/、public/videos/静态资源自动下载目标网站的图片和视频public/seo/SEO 资源favicon、OG 图、webmanifestdocs/research/逆向研究输出设计令牌、组件规格、布局档案docs/design-references/视觉参考目标网站截图、对比图scripts/同步脚本智能体指令与 Skill 的多平台生成器AGENTS.md 项目大脑所有 AI 智能体的统一指令源single source of truthCLAUDE.md、GEMINI.md平台配置各自只有一行AGENTS.md直接导入主文件几个关键版本信息可以佐证它的现代技术栈见package.jsonNext.js 16.3 React 19 TypeScript 5strict 模式Tailwind CSS v4 shadcn/uiRadix 原语 oklch 设计令牌部署目标Vercel也可用 DockerDockerfile/docker-compose.yml AGENTS.md项目的大脑在哪里打开 AGENTS.md你会看到它是整个项目的灵魂文件承担了四件事定义技术栈明确 Next.js 16、shadcn/ui、Tailwind v4避免 AI 写出过时代码设定命令规范npm run dev/build/lint/typecheck/check一套齐灌输设计哲学像素级还原、先 1:1 复刻后定制、使用真实内容而非占位符规定协作规则多智能体并行时必须各用独立 git worktree 分支最后由编排者统一合并它的最后一行docs/research/INSPECTION_GUIDE.md还会引入一份 80 行的《网站检查指南》教智能体如何截图、提取设计令牌、盘点组件——这是克隆质量不靠猜的关键。 README.md 与其他文档各司其职README.md 是给人看的门面核心内容一览Quick Start六步流程——基于模板建库 → clone →npm install→ 启动 AI 智能体 → 运行/clone-website 目标URL→ 自定义Supported Platforms支持 13 个平台Claude Code 推荐Codex、Cursor、Gemini、Copilot、Cline 等均支持How It Works五阶段流水线见下文Use Cases平台迁移WordPress/Webflow → Next.js、找回丢失源码、学习真实网站实现其余文档分工极简文件内容CLAUDE.md仅一行AGENTS.md让 Claude Code 导入主指令GEMINI.md同样一行AGENTS.md供 Gemini CLI 使用CONTRIBUTING.md、SECURITY.md贡献流程与安全政策README.zh-CN.md、README.ja.md简体中文 / 日文版文档CHANGELOG.md版本更新记录 多平台同步机制改一处生效全平台这是该项目架构里最优雅的设计之一。两个真相源文件驱动全部平台支持智能体指令只维护AGENTS.md运行bash scripts/sync-agent-rules.sh见 sync-agent-rules.sh自动为 Cline、Continue、Amazon Q 等不原生识别 AGENTS.md 的平台生成副本克隆技能只维护.claude/skills/clone-website/SKILL.md运行node scripts/sync-skills.mjs自动生成.kiro/skills/、.cline/skills/、.roo/skills/、.roo/commands/等平台专属技能而/clone-website技能本身是一条五阶段流水线侦察全量截图、提取设计令牌、交互走查滚动/点击/悬停/响应式奠基更新字体、颜色、全局样式下载全部素材组件规格在docs/research/components/写入带精确计算 CSS 值的规格文件并行构建每个组件一个智能体各自在独立 git worktree 中开发组装与 QA合并分支、拼装页面、与原站做视觉 diff 校验 从 0 到 30K Star 的爆款之路 上手只需一条命令确认环境满足Node.js 24后基于模板创建你自己的仓库不要直接 clone 模板主库npm install启动 Claude Codeclaude --chrome输入/clone-website 目标URL等待你的新网站诞生⚠️ 注意本项目仅可用于迁移自己拥有的站点、找回源码或学习用途切勿用于钓鱼、仿冒等违法场景。总结AI Website Cloner Template 的架构精髓在于——用AGENTS.md作为单一真相源统一指挥 13 个 AI 平台用预装配的 Next.js 16 技术栈保证产出质量再用同步脚本把一处修改、全平台生效变成现实。这就是它能成为 AI 编程智能体时代标杆模板的原因。【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考