对象：<https://github.com/JCodesMore/ai-website-cloner-template（v0.4.0）>

目标：在 OpenCode 里用一条命令把任意网站克隆成 Next.js 应用

环境：Node.js 24+、一个可用的 LLM API Key

第一步：准备好 Node.js 24 环境

本项目锁定 Node 24（.nvmrc 指定，Next 16 依赖 24）。先确认版本：

node -v      # >= 24

如果低于 24，用 nvm 切：

nvm install 24
nvm use 24

第二步：用模板建你自己的仓库

不要直接 clone 原模板库当项目。打开项目页 → 点 Use this template → Create a new repository → 取名字、选公开/私有 → Create repository。

第三步：克隆到本地并安装依赖

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
npm install

装完会得到：AGENTS.md（项目指令，OpenCode 原生读取）+ .opencode/commands/clone-website.md（OpenCode 命令，已就位）。

第四步：安装 OpenCode

任选一种：

1、推荐：官方一键脚本（自动识别系统并加入 PATH）
curl -fsSL https://opencode.ai/install | bash
2、或者 npm
npm install -g opencode-ai
3、或者 Homebrew（macOS / Linux）
brew install anomalyco/tap/opencode
4、Windows：scoop / choco
scoop install opencode
choco install opencode
Windows 用户强烈建议用 WSL2 跑；原生 Windows 为实验性。

验证：

opencode --version    # 看到版本号即成功

第五步：配置模型 / API Key

OpenCode 支持任意 LLM 提供商。两种方式选一：

  • 交互式（推荐新手）：先进入项目目录启动 OpenCode（见第七步），在 TUI 里输入 /connect，选 opencode（官方精选模型）或你已有的提供商，按提示登录并粘贴 Key。
  • 配置文件：在 ~/.config/opencode/opencode.json（全局）或项目 .opencode/opencode.json 里写 provider 与模型，模型格式为 provider/model-id。
    • README 实测最佳是 Claude Opus 5；OpenCode 下请尽量选你可用的最强模型，克隆质量差异明显。

    第六步：给 OpenCode 接浏览器 MCP（强烈建议）

    克隆的「侦察阶段」需要真实打开目标站做截图、取色、扫描交互。Claude Code 用 --chrome 自带浏览器，OpenCode 没有内置浏览器，必须自己接一个。配 Playwright MCP：

    编辑 ~/.config/opencode/opencode.json（全局）或项目内 .opencode/opencode.json：

    {
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest"],
      "enabled": true
    }
  }
}

    保存后重启 OpenCode，在 TUI 里确认 Playwright 的 browser_* 工具已加载（可用 /mcp 或状态栏查看）。没接这个，代理只能靠你提供的素材工作，复刻质量会大幅下降。

    第七步：启动 OpenCode 进入项目

    cd YOUR-NEW-REPOSITORY
opencode

    启动后 OpenCode 会自动把根目录的 AGENTS.md 作为项目指令读入上下文（无需你做任何转换）。

    可选：输入 /init 让 OpenCode 再分析项目、补充 AGENTS.md。本项目已自带，可跳过。

    第八步：运行克隆命令

    在 OpenCode 会话里直接输入（命令文件用 $ARGUMENTS 接收网址）：

    /clone-website https://example.com

    克隆多个页面（每个 pathname 保留为独立路由）：

    /clone-website https://example.com https://example.com/pricing

    代理会自动走 5 阶段流水线：侦察 → 地基 → 组件规范 → 在 git worktree 里并行构建 → 合并并做视觉 diff。期间会调用 Playwright 截图、下载素材、写组件文件。

    第九步：本地预览与验证

    克隆完成后，用项目自带脚本查看效果：

    npm run dev        # 开发预览（默认 http://localhost:3000）
npm run build      # 生产构建
npm run lint       # ESLint
npm run typecheck  # TypeScript 检查
npm run check      # lint + typecheck + build 一次跑完

    浏览器打开 http://localhost:3000 对比原站，确认还原度。

    第十步：自定义与收尾

    基础复刻建好后按需改文案、配色、增删页面即可（README 强调：先 1:1 还原，再自定义，不要在还原阶段夹带个人审美改动）。

    注意合规边界：仅用于学习/迁移/重建你有权处理的站点；勿用于钓鱼、冒充、剽窃或违反目标站服务条款。

    速查（按步骤对应命令）

    步 命令
    1 node -v
    3 npm install
    4 opencode --version
    7 cd 项目 && opencode
    8 /clone-website https://目标网址
    9 npm run dev

    基于项目 README / AGENTS.md / .opencode/commands/clone-website.md 及 OpenCode 官方文档整理，版本对应 v0.4.0。