AI Website Cloner Template + Gemini CLI 完整使用教程：GEMINI.md配置与一键克隆技能运行
项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template AI Website Cloner Template 是一个用 AI 编码代理一条命令克隆任意网站的开源模板：把目标网址交给 Gemini CLI 等智能体，它就能逆向出结构、配色与组件，最终生成一个干净的 Next.js 项目。本教程面向新手，以 Gemini CLI 为例，完整讲清 GEMINI.md 配置原理和 /clone-website 克隆技能的运行方法，5 个步骤即可上手 🚀
一、AI Website Cloner Template 是什么？
简单来说：给它一个 URL，它帮你把网站"重建成代码"。
- 输入：一个或多个网站地址
- 过程：截图、提取设计令牌（颜色/字体/间距）、生成组件规格、并行构建
- 输出：基于 Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui 的现代代码库
适合三类场景：
| 场景 | 说明 |
|---|---|
| 🔄 平台迁移 | 把 WordPress / Webflow 站点重建为 Next.js |
| 🛠 源码丢失 | 线上站点还在，但仓库找不到了 |
| 📚 学习拆解 | 逆向分析生产级站点的布局与动效实现 |
⚠️ 请勿将其用于钓鱼、仿冒或违反目标站点服务条款的行为。
二、环境准备与获取项目
前置要求：Node.js 24+、一个已登录的 Gemini CLI。
1️⃣ 安装 Gemini CLI
npm install -g @google/gemini-cli
首次运行 gemini 时按提示完成账号授权即可。
2️⃣ 获取项目模板
git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template
cd ai-website-cloner-template
npm install
💡 最佳实践：在模板平台上点击 "Use this template" 创建属于你自己的副本仓库，这样克隆产物不会污染主模板。
3️⃣ 验证环境
npm run dev # 能启动 Next.js 开发服务器即环境正常
三、GEMINI.md 配置原理：一份规则，全平台生效 🔑
很多新手会问：GEMINI.md 里为什么只有一行 @AGENTS.md？
这正是项目的单一数据源设计：
AGENTS.md—— 所有 AI 代理规则的"唯一事实来源"，包含技术栈、代码风格、像素级还原原则、项目结构说明GEMINI.md—— Gemini CLI 专用的"瘦指针"文件，内容就是@AGENTS.md，表示导入主规则文件CLAUDE.md—— 同样的导入方式，供 Claude Code 使用
好处显而易见：改一处，处处生效。当你调整项目规则（如新增代码风格约定），只需编辑 AGENTS.md，再执行同步脚本即可：
bash scripts/sync-agent-rules.sh
该脚本会把 AGENTS.md（含 @docs/research/INSPECTION_GUIDE.md 站点检查指南的展开内容）自动复制生成到 .clinerules、.continue/rules/project.md、.github/copilot-instructions.md 等平台对应文件，无需手动维护多份。
四、Gemini 克隆技能是怎么生成的 ⚡
/clone-website 技能的源头是 .claude/skills/clone-website/SKILL.md。运行同步脚本后，会为每个平台生成对应格式的技能文件：
node scripts/sync-skills.mjs
对 Gemini CLI 而言，生成物是 .gemini/commands/clone-website.toml，采用 TOML 格式：
name/description：命令元信息prompt：完整的工作流提示词{{args}}：占位符，运行命令时自动替换为你传入的目标 URL
📌 小贴士：如果改过技能源文件后 Gemini 里
/clone-website没有更新，重新执行一次node scripts/sync-skills.mjs即可。
五、运行克隆技能：5 步完成网站克隆
Step 1 — 启动 Gemini CLI
gemini
Step 2 — 执行克隆命令（支持一次传多个网址）
/clone-website https://example.com
如果你的客户端通过自然语言触发技能，也可以直接说："Clone https://example.com using the clone-website workflow"。
Step 3 — 侦察（Reconnaissance）：智能体自动截图、提取设计令牌、遍历交互状态（悬停/点击/滚动/响应式）。
Step 4 — 基础与规格（Foundation + Specs）：更新字体、颜色、全局样式，下载全部素材，并在 docs/research/ 下写出含精确计算样式值的组件规格文件。
Step 5 — 并行构建与 QA：每个区块分派独立构建代理（git worktree 隔离），合并后与原始站点做视觉比对，完成像素级校验 ✅
Step 6（可选）— 定制化：克隆基线完成后，再按自己的需求修改配色、文案与组件。
六、常见问题速查 📋
| 问题 | 解决方法 |
|---|---|
/clone-website 命令不存在 | 确认在项目根目录启动 Gemini，并执行 node scripts/sync-skills.mjs 重新生成 |
| 克隆结果细节有偏差 | 检查 docs/research/ 下的组件规格是否完整，必要时让智能体对照截图微调 |
| 规则改了不生效 | 编辑 AGENTS.md 后执行 bash scripts/sync-agent-rules.sh |
| Node 版本报错 | 项目基线已提升至 Node.js 24，升级后重试 |
七、写在最后
借助 GEMINI.md 指针式配置 + 技能同步脚本，AI Website Cloner Template 把"逆向一个网站"变成了标准流水线：规则集中管理、技能多平台复用、一条 /clone-website 命令启动全流程。按上面的步骤配置好环境，你就可以开始克隆自己的第一个网站了 🎯
<输出文章>
（完）
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
