# Yxz Game Site Builder > 游戏攻略站搭建与部署。基于已收集的素材，复刻竞品站结构、填充真实内容、提交 GitHub 部署。当需要把调研成果变成真实网站、复刻对标站、部署上线时调用。 - Skill: `byte886/yxz-game-site-builder` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add byte886/yxz-game-site-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/byte886/yxz-game-site-builder/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: byte886 (https://skillmd.com/u/byte886) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/byte886/yxz-game-site-builder --- # 游戏站搭建器 (Game Site Builder) ## 核心原则 **先上线，再打磨。** 一个花两天匆忙上线但抢占了先机的"垃圾"站，很可能比一个花两周精心打磨但姗姗来迟的完美网站，能带来多得多的流量。 新词竞争窗口很短，你越早上线，越容易获得优势。首版再烂，能访问就是胜利。 **不要从零搭前端。** 新手从空白项目开始写前端，耗时耗 token，而且 SEO 和页面结构容易不专业。更推荐的做法：找一个同类型的竞对游戏攻略站 → 参考它的前端效果和页面结构 → 打磨成自己的模板。 **一句话原则：抄结构，不抄内容。** - ✅ 能参照：页面结构（首页放哪几块）、导航方式、内容组织、配色风格 - ❌ 必须改：所有文字内容、游戏名、具体数据——这些必须是你自己调研的真实内容 **本技能由 AI 直接执行，不需要用户复制提示词给外部工具。** AI 自主完成：浏览器分析对标站 → 生成项目代码 → 填充真实内容 → 提交 GitHub。 --- ## 前置条件 用户需提供： - **游戏主词**（已确定的游戏名称，由 yxz-hot-word-miner 输出） - **关键词清单 + 页面矩阵**（由 yxz-keyword-miner 输出） - **首页信息文档 + 内页素材文档**（由 yxz-game-info-collector 输出） - **对标站 URL**（可选，若用户已找到参考对象；否则由本技能第一阶段辅助查找） - **GitHub 用户名 + 仓库名**（用于提交代码） ### 账号与工具准备清单（用户需提前准备） | 工具 | 用途 | 注册地址 | |------|------|----------| | 域名账号 | 购买域名 | spaceship.com | | GitHub 账号 | 存储代码 | github.com | | Vercel 账号 | 部署网站 | vercel.com | | Cloudflare 账号 | DNS 解析 | cloudflare.com | > 注：本技能聚焦**代码生成、内容填充、GitHub 提交**，由 AI 直接自动完成。域名购买、Vercel 部署、Cloudflare DNS 配置等后续环节由用户手动完成。 --- ## 工具与数据获取方式 **浏览器操作**：使用 `mcp_playwright-extension` MCP 服务（server_name = `mcp_playwright-extension`）。下文 `run_mcp(server_name=..., tool_name=..., args=...)` 均为**伪代码**；真实调用用 `mcp__playwright-extension__browser_*` 工具（如 `browser_navigate` / `browser_snapshot` / `browser_take_screenshot` / `browser_console_messages` / `browser_run_code_unsafe`）。用于访问对标站、截图分析页面结构、本地预览验证。**全量自动验证优先用 `browser_run_code_unsafe`**（一次脚本循环所有页，见踩坑 26）。 ``` # 导航到 URL run_mcp(server_name="mcp_playwright-extension", tool_name="browser_navigate", args={"url": "https://..."}) # 等待页面加载 run_mcp(server_name="mcp_playwright-extension", tool_name="browser_wait_for", args={"time": 3}) # 截图（分析页面结构、配色、布局） run_mcp(server_name="mcp_playwright-extension", tool_name="browser_take_screenshot", args={"type": "png", "scale": "css", "fullPage": false}) # 提取页面结构（DOM 分析，用于复刻布局） run_mcp(server_name="mcp_playwright-extension", tool_name="browser_evaluate", args={"function": "() => { /* 提取页面结构 */ return data; }"}) # 提取页面可访问性快照（用于交互/识别元素） run_mcp(server_name="mcp_playwright-extension", tool_name="browser_snapshot", args={}) ``` **文件操作**：使用 `Write` 工具创建项目文件，`Edit` 工具修改内容，`Read` 工具读取素材文档，`Grep` 工具全项目搜索旧游戏名残留。 **命令执行**：使用 `RunCommand` 工具执行 git 命令、npm 命令。 **抓取流程通用模式**：`navigate → wait_for → screenshot/evaluate → 分析结构 → Write 生成代码` --- ## 执行流程 ### 第一阶段：找到参考对象 & 分析结构 #### 步骤 1.1：查找参考对象（如用户未提供对标站） 如果用户已提供对标站 URL，直接跳到步骤 1.2。否则，AI 辅助查找： **查找策略**：优先挑选**新站、DR（域名评级）接近 0、排名靠前**的网站。DR=0 说明没怎么发外链，单靠网页结构就能把排名顶上去，更值得参考。 **所有查找均通过 `mcp_playwright-extension` 浏览器抓取**，禁止用 WebSearch/WebSearch 替代（Google 搜索结果依赖 JS 渲染，WebSearch 拿不到真实排名和域名列表）。 ``` # 1. 用浏览器访问 Google 搜索：游戏词 + wiki # 目标：找到 DR 接近 0 的新游戏 wiki 站 run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "https://www.google.com/search?q={游戏词URL编码}+wiki&hl=en"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => document.body.innerText.substring(0, 4000)"}) # 从结果文本中找排名靠前的 wiki 站域名 # 2. 搜索同类游戏 wiki 站（如 Big Walk 是合作冒险类，搜同类游戏的 wiki 站） run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "https://www.google.com/search?q=co-op+adventure+game+wiki+guide&hl=en"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => document.body.innerText.substring(0, 4000)"}) # 3. 访问候选 wiki 站，评估页面结构 run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "{候选站URL}"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) run_mcp("mcp_playwright-extension", "browser_take_screenshot", args={"type": "png", "scale": "css", "fullPage": false}) # 截图评估：导航栏、Hero 区、Tab 按钮、大标题等 UI 元素是否齐全 ``` **优秀参考站的共性特征**： - 导航栏：清晰的主导航结构 - Hero 区：大标题 + 游戏核心信息展示 - Tab 按钮：分类信息组织 - UI 美观：视觉风格统一 - 首页承接高搜索量需求：板块布局合理 **值得借鉴的站**（示例参考）： - https://vvultimatum.net - https://farevergame.wiki - https://gamblewithyourfriends.net - https://miniwars.art **输出**：收集 5-10 个候选站，挑选出最值得复刻的 1 个，记录其首页 URL、列表页 URL、详情页 URL。 #### 步骤 1.2：深度分析对标站结构（AI 自动执行） 确定对标站后，AI 用浏览器逐页深度分析，提取页面结构、配色、布局信息，为代码生成提供依据。 ``` # 1. 访问对标站首页，截图 + 提取结构 run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "{对标站首页URL}"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) # 截图（用于配色、布局参考） run_mcp("mcp_playwright-extension", "browser_take_screenshot", args={"type": "png", "scale": "css", "fullPage": true}) # 提取页面结构信息（导航栏、Hero 区、内容板块、侧边栏、页脚） run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => { const nav = document.querySelector('nav, header'); const hero = document.querySelector('section, .hero, [class*=hero]'); const sidebar = document.querySelector('aside, .sidebar, [class*=sidebar]'); const footer = document.querySelector('footer'); const main = document.querySelector('main, .main, .content'); return { nav: nav ? nav.innerText.substring(0, 500) : null, hero: hero ? hero.innerText.substring(0, 500) : null, sidebar: sidebar ? sidebar.innerText.substring(0, 500) : null, main: main ? main.innerText.substring(0, 2000) : null, footer: footer ? footer.innerText.substring(0, 500) : null, bgColor: getComputedStyle(document.body).backgroundColor, textColor: getComputedStyle(document.body).color }; }"}) # 2. 访问列表/导航页（如 /classes），提取列表结构 run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "{对标站列表页URL}"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) run_mcp("mcp_playwright-extension", "browser_take_screenshot", args={"type": "png", "scale": "css", "fullPage": false}) run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => { const items = document.querySelectorAll('a, .card, .item, .list-item, article'); return Array.from(items).slice(0, 20).map(el => ({ tag: el.tagName, text: el.innerText.substring(0, 100), href: el.href || '' })); }"}) # 3. 访问详情页，提取文章结构 run_mcp("mcp_playwright-extension", "browser_navigate", args={"url": "{对标站详情页URL}"}) run_mcp("mcp_playwright-extension", "browser_wait_for", args={"time": 3}) run_mcp("mcp_playwright-extension", "browser_take_screenshot", args={"type": "png", "scale": "css", "fullPage": false}) run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => { const article = document.querySelector('article, main, .content, .post-body'); const headings = document.querySelectorAll('h1, h2, h3'); return { structure: article ? article.innerText.substring(0, 3000) : null, headings: Array.from(headings).map(h => ({ level: h.tagName, text: h.innerText })) }; }"}) # 4. 提取 CSS 主题色 run_mcp("mcp_playwright-extension", "browser_evaluate", args={"function": "() => { const root = document.documentElement; const styles = getComputedStyle(root); return { primary: styles.getPropertyValue('--primary') || styles.getPropertyValue('--theme') || styles.getPropertyValue('--color-primary'), bg: styles.getPropertyValue('--bg') || styles.getPropertyValue('--background'), text: styles.getPropertyValue('--text') || styles.getPropertyValue('--color-text') }; }"}) ``` **AI 分析要点**（从截图和 DOM 数据中提取）： - **页面板块**：首页有哪些区块（Hero / 新手引导 / 游戏介绍 / 兑换码 / 底部号召），各区块的布局方式 - **导航结构**：主导航有哪些分类（Guide / Classes / Codes / Tier List 等） - **配色方案**：主色、背景色、文字色（提取 CSS 变量或从截图判断） - **列表页结构**：卡片式 / 表格式 / 列表式，每项展示哪些信息 - **详情页结构**：文章布局（标题 / 正文 / H2 小节 / 侧边栏 / 相关推荐） - **响应式设计**：移动端适配方式 #### 步骤 1.3：生成项目骨架（AI 直接生成代码） AI 基于步骤 1.2 提取的结构信息，直接用 `Write` 工具生成完整项目代码。 **技术栈（推荐稳健栈）**：Next.js (App Router) + **手写 CSS（`app/globals.css` 定义全套设计 token）** + **静态导出 `output: "export"`**。 > **实战首选，为什么不默认 Tailwind/MDX/i18n**：受限环境（npm 安装脆弱、构建易挂）下，Tailwind 构建步骤 + MDX 编译 + 动态 `[lang]/[slug]` 路由会显著放大不确定性。已验证最稳组合是：**手写 CSS + 固定 `app/.jsx` 页面（每关键词一页）+ 静态导出**，产物 `out/` 可直接拖到 GitHub Pages。若确需多语言/内容驱动再上 MDX + next-i18n。 **项目结构**（AI 直接生成；实战首选**简化版**：去掉 `[lang]/[slug]` 动态路由与 `content/*.mdx`，改为 `app/.jsx` 固定页面 + `components/Sections.jsx` 共享区块 + 手写 `globals.css`，见下方说明）： ``` {游戏名}-wiki/ ├── app/ │ ├── layout.tsx # 全局布局（含导航栏、页脚） │ ├── page.tsx # 首页 │ ├── about/page.tsx # 关于页（定位/团队/联系方式） │ ├── contact/page.tsx # 联系页（mailto:contact@域名） │ ├── privacy/page.tsx # 隐私政策页（≥300字，含 cookies/数据/广告） │ ├── [lang]/ │ │ ├── page.tsx # 多语言首页 │ │ └── [slug]/ │ │ └── page.tsx # 内页动态路由 │ └── globals.css # 全局样式（含主题色 CSS 变量） ├── components/ │ ├── Navbar.tsx # 导航栏（参照对标站结构） │ ├── Hero.tsx # Hero 区 │ ├── Sidebar.tsx # 侧边栏（兑换码等） │ ├── Footer.tsx # 页脚 │ ├── GameCard.tsx # 游戏卡片（列表页用） │ └── ArticleLayout.tsx # 文章布局（详情页用） ├── content/ │ ├── en/ # 英语 MDX 内容 │ │ ├── guide.mdx # 新手引导 │ │ ├── tips.mdx # 技巧 │ │ └── ... # 其他内页 │ └── i18n.json # 多语言配置 ├── lib/ │ ├── seo.ts # SEO 元数据配置 │ └── content.ts # 内容加载工具 ├── public/ │ └── favicon/ # 网站图标（来自 yxz-game-info-collector） ├── next.config.js ├── tailwind.config.js ├── package.json └── README.md ``` **AI 生成顺序**： 1. `package.json` + `next.config.js` + `tailwind.config.js`（项目配置） 2. `app/globals.css`（主题色 CSS 变量，用调研的 HSL 色值） 3. `components/` 下所有组件（参照对标站截图和 DOM 结构） 4. `app/layout.tsx`（全局布局，组合导航栏 + 页脚） 5. `app/page.tsx`（首页，组合 Hero + 各内容板块） 6. `app/[lang]/[slug]/page.tsx`（内页动态路由，读取 MDX 内容） 7. `lib/seo.ts`（SEO 元数据配置工具） 8. `content/en/` 下占位 MDX 文件（下一步填充真实内容） 9. `app/about/page.tsx`、`app/contact/page.tsx`、`app/privacy/page.tsx`：建站即生成三个必备页面（AdSense 审核底线，详见下方说明） **建站即生成「必备三页面」（AdSense 审核底线，不要等审核前才补）**： - `app/about/page.tsx`：关于页——网站定位、编辑团队、联系方式。 - `app/contact/page.tsx`：联系页——提供 `mailto:contact@<你的域名>`（域名邮箱的转发配置由 `yxz-site-data-monetizer` 步骤 3.2.1 检查/确认）。 - `app/privacy/page.tsx`：隐私政策页——≥300 字，覆盖 cookies / 数据收集 / 第三方广告（AdSense 必查）。 这三者与首页、内页一并作为骨架生成；`yxz-site-data-monetizer` 阶段只做"是否齐全 + 邮箱转发是否配好"的检查确认，不重复创建。 **关键**：组件结构和布局完全参照对标站，但所有文字内容先用占位符（如 `{GAME_NAME}`、`{TODO_CONTENT}`），下一步再填充真实内容。 --- ### 第二阶段：填充真实内容 AI 读取 yxz-game-info-collector 输出的素材文档，直接编辑项目文件填充真实内容。 #### 步骤 2.1：读取素材文档 ``` # 读取首页信息文档 Read(file_path="{工作目录}/{日期}-{游戏主词}-首页信息.md") # 读取关键词清单 Read(file_path="{工作目录}/{日期}-{游戏主词}-关键词清单.md") # 读取页面矩阵 Read(file_path="{工作目录}/{日期}-{游戏主词}-页面矩阵.md") # 逐个读取内页素材文档 Read(file_path="{工作目录}/{日期}-{游戏主词}-{内页关键词}-素材.md") ``` #### 步骤 2.2：填充首页内容 AI 根据首页信息文档，直接 `Edit` 项目文件填充内容： **填充清单**： | 文件 | 填充内容 | 数据来源 | |------|----------|----------| | `app/layout.tsx` | 游戏名（全站替换）、导航栏分类 | 首页信息文档 | | `components/Hero.tsx` | Hero 标题、副标题、stats 数据 | 首页 JSON 的 hero 字段 | | `app/page.tsx` | 新手引导卡片、游戏介绍 stats、底部号召 | 首页 JSON 的 start/aboutGame 字段 | | `components/Sidebar.tsx` | 兑换码列表（真实码或"暂无"） | 首页 JSON 的 sidebarCodes 字段 | | `components/Footer.tsx` | 官方链接（官网/Discord/YouTube）、关于文字 | 首页 JSON 的 footer 字段 | | `lib/seo.ts` | SEO title/description/keywords | 首页 JSON 的 metadata 字段 | | `app/globals.css` | 主题色 HSL 值 | 首页信息文档的主题色 | | `content/i18n.json` | 多语言配置 | 首页信息文档的多语言优先级 | **AI 填充规则**： 1. **全站游戏名替换**：将所有占位符 `{GAME_NAME}` 替换为真实游戏名，检查 header、footer、sidebar、法律页无残留 2. **Hero stats**：选 5 个最贴近玩家直觉的真实数据（发行日期、Metacritic、Steam 评测、玩家数、成就数），纯字符串数组 3. **新手引导卡片**：4 张卡片，第 1 张固定 Beginner Guide，后 3 张根据游戏特点选玩家前 2 小时最常搜的内容 4. **兑换码**：买断制游戏填"暂无"，有兑换码系统的游戏填真实码，**绝不编造** 5. **官方链接**：全部用真实链接，AI 用浏览器抽检 1-2 个确认非 404 6. **SEO 元数据**：title ≤ 60 字符，description 140-160 字符，keywords ≤ 100 字符 7. **不确定的标"待确认"**：不要编造数值、角色名、兑换码 #### 步骤 2.3：填充内页内容 AI 逐个读取内页素材文档，为每个关键词创建一个 MDX 内容文件。 **填充顺序**（按优先级）： 1. P0 级：首页（已在 2.2 完成） 2. P1 级：Guide（新手引导）、Tips（技巧）、Best Tower Order（最佳顺序） 3. P2 级：Codes（兑换码）、Crossplay（联机）、Review（评测） 4. 其他内页：按关键词清单逐个填充 **每个内页的 AI 执行步骤**： ``` # 1. 读取该关键词的素材文档 Read(file_path="{工作目录}/{日期}-{游戏主词}-{内页关键词}-素材.md") # 2. AI 整合素材，过滤无效信息，交叉验证多源数据 # 3. 生成 MDX 内容文件 Write(file_path="{项目目录}/content/en/{slug}.mdx", content=""" --- title: "{含关键词的标题，40-60字符}" description: "{含关键词的描述，140-160字符}" keywords: "{关键词}" --- # {开头直接回答玩家的搜索问题，不绕弯} ## {H2 小节 1} {3-4 句，适合扫读} ## {H2 小节 2} {3-4 句，适合扫读} ... """) # 4. 确保内页路由可访问（检查 app/[lang]/[slug]/page.tsx 能正确加载该 MDX） ``` **AI 内页内容要求**： 1. 页面 title 含关键词，40-60 字符 2. meta description 含关键词，140-160 字符 3. 开头直接回答玩家的搜索问题，不绕弯 4. 全文 1200 字左右；分 H2 小节，每段 3-4 句，适合扫读 5. 只写素材文档中的真实信息，不确定的标"待确认" 6. 不要编造数值、角色名、兑换码 #### 步骤 2.4：全站残留检查（游戏名 / 参考站名 / 占位符 / CJK） AI 用 `Grep` 工具全项目搜索，确保零残留。**重点三类**： 1. **旧游戏名 / 对标站游戏名**：不仅替换自己的旧占位符，还要确认**对标站游戏名**（如 farever）零残留——它常藏在 CSS 注释、`globals.css` 的 `Structure mirrored from ...` 注释、JS 字符串里，肉眼易漏。 2. **占位符**：`{GAME_NAME}`、`{TODO_CONTENT}`、`{TODO}`，以及内容里含糊的 `WIP` / `待补充` token（正文诚实标注改用 `to be documented` / `still being confirmed`）。 3. **CJK 字符泄漏**：英文站正文误混入中文词（往返 / 默契 / 入门 等）。**必须源码 + 产物 `out/*.html` 双重扫描**（build 后产物才是最终交付）。 ``` # 1. 旧游戏名 + 对标站游戏名（大小写不敏感） Grep(pattern="旧游戏名|对标站游戏名(如 farever)", path="{项目目录}", output_mode="content") # 2. 占位符 / WIP token（正文诚实标注用 to be documented） Grep(pattern="\{GAME_NAME\}|\{TODO_CONTENT\}|\{TODO\}|WIP|待补充|Lorem|placeholder", path="{项目目录}", output_mode="content") # 3. CJK 泄漏（源码） Grep(pattern="[\u4e00-\u9fff]", path="{项目目录}/app", output_mode="content") ``` > **build 后务必再扫一次产物**：用 Python 脚本扫描 `out/*.html` 的 旧游戏名/对标站名/CJK/占位符 + SEO 长度（title≤60, desc 140–160, kw≤100），见踩坑 27。发现残留后用 Edit 逐个替换。 --- ### 第三阶段：构建 + 本地验证（静态导出优先） AI 本地构建静态导出产物，并用浏览器验证所有页面可访问、无报错、无残留。 #### 步骤 3.1：构建（绕过 WorkBuddy 构建挂死） ```bash # 安装依赖 npm install # ⚠️ WorkBuddy 的 genie-safe-delete shim 会在 build 收尾清理阶段挂死。 # 绕过：清空 NODE_OPTIONS 再 build（最稳） NODE_OPTIONS="" npm run build # 若 out/404.html 被文件监视器锁住，rm/fs.rmSync 删不动（EPERM）： # 重建到新目录（如 {游戏名}_build2/），用 junction 软链 node_modules， # 完整复制源码后重新 build： # PowerShell: New-Item -ItemType Junction -Path /node_modules -Target /node_modules ``` 产物写入 `out/`，可直接用于 GitHub Pages（见第四阶段）。 #### 步骤 3.2：本地静态服务 ```bash # 静态服务验证（不触发 build 挂死，且贴近真实部署形态） python -m http.server 4321 --bind 127.0.0.1 --directory out ``` #### 步骤 3.3：Playwright 全量自动扫描（替代逐页肉眼截图） 用 `mcp__playwright-extension__browser_run_code_unsafe`（真实工具名；SKILL 中 `run_mcp(...)` 为伪代码），一次脚本循环所有页，断言： - `console error` / `pageerror` == 0 - 失败 / 404 请求 == 0 - `body` 背景色 == 主题色（CSS 已生效） - `title` / `h1` 正确、`main` 文本长度 > 阈值（内容已渲染） - 全量截图存 MCP runtime 目录后抽查关键页 > 比逐页 `browser_navigate` + 肉眼看截图**更快更可靠**（自动捕获 console/404）。脚本模板见踩坑 23、26。 **本地检查清单**： | 检查项 | 要求 | AI 验证方式 | |--------|------|------------| | 构建成功 | `out/` 生成、无挂死 | `NODE_OPTIONS="" npm run build` | | 首页可访问 | 浏览器打开正常渲染 | 静态服务 + 全量扫描 | | 所有内页可访问 | 内容完整、无 404 | 全量扫描断言 | | 全站游戏名/参考站名无残留 | 无旧游戏名/对标站名/占位符/CJK | Grep + 产物 HTML 扫描（见 2.4、27） | | 链接有效 | 内部链接可达 | 全量扫描 goto 目标 URL | | 官方链接有效 | 官网/Discord/YouTube 非 404 | 浏览器抽检 1-2 个 | | 兑换码真实 | 无编造数据 | 对照素材文档 | --- ### 第四阶段：提交到 GitHub 代码在本地验证通过后，AI 直接执行 git 命令提交到 GitHub。 #### 步骤 4.1：确认 GitHub 仓库已创建 ``` ⏸️ 暂停等待人工处理 需要你手动完成以下操作： 1. 打开 https://github.com/new 2. 填写仓库名（建议：{游戏名}-wiki） 3. 类型选 Private（外人不可见） 4. 不要勾选自动生成 README 5. 点击 Create repository 6. 把仓库地址（https://github.com/{用户名}/{仓库名}.git）告诉我 我会等你处理完后继续执行 git 提交。 ``` > 若用户已提供仓库地址，跳过此暂停。 #### 步骤 4.2：AI 直接执行 git 提交 ``` # 1. 初始化 git 仓库 RunCommand(command="git init", cwd="{项目目录}", blocking=true, requires_approval=false) # 2. 添加所有文件 RunCommand(command="git add .", cwd="{项目目录}", blocking=true, requires_approval=false) # 3. 首次提交 RunCommand(command='git commit -m "first version"', cwd="{项目目录}", blocking=true, requires_approval=false) # 4. 添加远程仓库 RunCommand(command="git remote add origin https://github.com/{用户名}/{仓库名}.git", cwd="{项目目录}", blocking=true, requires_approval=false) # 5. 推送到远程 RunCommand(command="git push -u origin main", cwd="{项目目录}", blocking=true, requires_approval=false) ``` **认证问题处理**： - 若 git push 需要认证，暂停提示用户配置 GitHub Personal Access Token 或 SSH key - 认证配置完成后，AI 重新执行 push 命令 #### 步骤 4.3：验证推送成功 ``` # 检查远程仓库状态 RunCommand(command="git remote -v", cwd="{项目目录}", blocking=true, requires_approval=false) RunCommand(command="git log --oneline -1", cwd="{项目目录}", blocking=true, requires_approval=false) ``` AI 确认推送成功后，告知用户刷新 GitHub 仓库页面查看代码。 --- ## 模式二：本地克隆镜像（设计稿 + 全量素材按 URL 结构保存） 适用场景：用户要求"克隆网站设计 / 镜像参考站 / 把素材按结构保存"，目标是把参考站原样存到本地目录作为**复刻前的模板**，不是立即从零搭 Next.js 项目（那是模式一）。典型命令：`/yxz-game-site-builder 帮我克隆网站设计： 所有素材按结构保存，根目录是：`。 ### 工作流 #### 步骤 M.1：侦察（recon） - `GET /robots.txt`：确认是否允许抓取。Next.js 站常见 **content-signals** 格式：`Allow: /`、`ai-train=no`、`use=reference`。`ai-train=no` 只禁止用于**训练模型**，一次性设计结构镜像允许；`Allow: /` 表示标准爬虫可抓。 - `GET /sitemap.xml`：用正则 `(.*?)` 提取全部页面 URL（Next.js 静态站通常有完整 sitemap，含多语言 `/de/ /es/ /fr/`）。 - `GET /` 首页：识别技术栈。Next.js App Router 表现为唯一的 `_next/static/css/*.css` + 多个 `_next/static/chunks/*.js` + 内联 `self.__next_f.push(...)` flight payload。 #### 步骤 M.2：下载镜像（保存为 `//index.html`） - 用 Python `requests`（managed venv）逐 URL 抓取；Git Bash 通常**无 wget/curl**，优先用 managed runtime 路径。 - URL→本地路径映射：`/x/y` → `/x/y/index.html`；`/` → `/index.html`；去掉 query/fragment。 - 共享资源（`/_next/...`、`/icon.png`、`/favicon*`）单独抓取一次，落到对应目录；可顺带解析各页 `` flight payload、Cloudflare beacon 等外部脚本。 - 删除：`` 预加载（避免离线 console 404 噪声）。 - **保留**：CSS ``、``、JSON-LD（SEO 数据，不操作 DOM）、所有 `_next/` 原始资源文件。 - BeautifulSoup 改写 `