企业官网建设流程全解析

AI Website Cloner Template+Windsurf使用教程：.windsurfrules指针文件全解

【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template

AI Website Cloner Template是一个"一条命令克隆任意网站"的 AI 建站模板：把它喂给 AI 编程智能体（如 Windsurf），输入目标网址，它就能自动还原成一个干净的 Next.js 项目。对使用 Windsurf 的开发者来说，项目根目录里的 .windsurfrules 是最关键的入口文件——它本身只有两行，却决定了智能体如何理解整个项目。本文将完整拆解这个"指针文件"的设计思路，并给出一份从零开始的 Windsurf 克隆网站实操教程。

▲ 上图左半部分是 Instruct 官网原版，右半部分是克隆后的 Next.js 站点，布局、配色、字体几乎 1:1 还原

一、AI Website Cloner Template 是什么？

简单说，它是一个"网站逆向工程"脚手架：

• 技术底座：Next.js 16 + React 19 + TypeScript 严格模式 + shadcn/ui + Tailwind CSS v4，开箱即用；
• 核心能力：运行/clone-website <网址>技能后，智能体会按"侦察 → 打地基 → 组件规格 → 并行构建 → 组装质检"五个阶段自动复刻页面；
• 适用场景：WordPress/Webflow 老站迁移、源码丢失找回、学习生产级网站的前端实现。

▲ 该模板的 Star 增长曲线，几个月内突破 3 万

二、.windsurfrules 指针文件全解

1. 文件内容：只有两句话

.windsurfrules 的完整内容如下：

This project uses AGENTS.md as the single source of truth for all AI agent instructions. Windsurf reads AGENTS.md automatically — see the project root for complete guidelines.

翻译成中文就是："所有 AI 智能体的指令以 AGENTS.md 为唯一事实来源，Windsurf 会自动读取 AGENTS.md。"

2. 为什么它叫"指针文件"？

它自己不包含任何规则，只负责"指路"，所以社区称之为pointer file（指针文件）。真正的规则全部集中在根目录的 AGENTS.md 中，里面定义了：

• 技术栈说明：Next.js 16 有哪些与旧版不同的破坏性变更，写代码前要先读node_modules/next/dist/docs/下的文档；
• 代码风格：TypeScript 严格模式、禁止any、PascalCase 组件命名、Tailwind 工具类、移动端优先；
• 设计原则：像素级还原（Pixel-perfect）、复刻阶段禁止个人审美改动、必须使用真实内容而非占位符；
• 项目结构：src/components/、public/images/、docs/research/各目录的用途约定。

3. 为什么不让 .windsurfrules 直接写规则？

这就是该项目最精妙的工程决策——单一事实来源（Single Source of Truth）：

项目里不同智能体的"指针"形式各不相同，可以在 scripts/sync-agent-rules.sh 的头部注释中看到完整清单：

• Windsurf→ .windsurfrules（纯文本指针）
• Claude Code→ CLAUDE.md（内容为@AGENTS.md导入语法）
• Gemini CLI→ GEMINI.md（同样是@AGENTS.md）
• Cursor→ .cursor/rules/project.mdc（指针规则）
• Aider→ .aider.conf.yml（配置read: [AGENTS.md]）

而 Cline、Continue、Amazon Q、Copilot Chat 这些不认识 AGENTS.md的平台，则由同步脚本bash scripts/sync-agent-rules.sh自动生成规则副本（文件顶部带"自动生成，勿手改"标记）。

💡 一句话总结：改规则只改 AGENTS.md 一个文件，其余全部自动对齐。

三、Windsurf 使用教程：5 步克隆你的第一个网站

第 1 步：获取项目模板

推荐使用平台的"使用模板"功能创建你自己的仓库副本；如用命令行，则克隆模板仓库：

git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template cd ai-website-cloner-template

第 2 步：安装依赖

环境要求 Node.js 24+：

npm install

第 3 步：用 Windsurf 打开项目

在 Windsurf 中打开该目录，确认根目录的 .windsurfrules 存在。启动后 Windsurf 会自动加载 AGENTS.md 的全部项目约定，无需任何额外配置。

第 4 步：执行克隆技能

在 Windsurf 的对话区输入技能命令（若你的客户端通过自然语言触发技能，可说"用 clone-website 工作流克隆 <目标网址>"）：

/clone-website https://example.com

智能体会自动开始截图侦察、提取设计令牌（颜色/字体/间距）、下载素材、编写组件规格并分派多个构建智能体并行搭建页面。技能完整流程定义在 .windsurf/workflows/clone-website.md 中。

第 5 步：预览与自定义

npm run dev

浏览器打开本地预览，看到与目标网站几乎一致的页面即宣告成功。之后可自由修改src/app/下的路由和组件，把它改造成自己的网站。

⚠️合规提醒：项目明确禁止将模板用于钓鱼、冒充他人或抄袭品牌资产。请只克隆你自己拥有或获得授权的网站，并留意目标站点是否禁止抓取（详见 SECURITY.md 与 README.zh-CN.md）。

四、常见问题 FAQ

Q1：.windsurfrules 和 AGENTS.md 内容不一致了怎么办？指针文件永远不需要改——它只负责指向。所有规则修改都应发生在 AGENTS.md，改完按需执行bash scripts/sync-agent-rules.sh重新生成其他平台的副本。

Q2：我在 IDE 里没看到 Windsurf 加载规则，是不是坏了？检查 .windsurfrules 是否在仓库根目录（不能放在子目录里），且当前打开的文件夹就是项目根。

Q3：除了 Windsurf 还支持哪些智能体？支持 13 款主流平台：Claude Code（推荐搭配 Opus 模型）、Codex CLI、Cursor、Gemini CLI、Cline、Roo Code、Copilot、Kiro、Continue、Amazon Q、Augment Code 等，全都在模板中预置了对应的规则文件。

五、写在最后

AI Website Cloner Template 的精髓，不只是"一条命令克隆网站"，更是它为多智能体协作设计的规则治理架构：用 .windsurfrules 这样的两行指针文件，把 13 个平台的 AI 助手统一到同一份 AGENTS.md 之下。理解了这一点，你就能轻松把这套模式复制到自己的项目里——哪怕不用 Windsurf，这套"指针 + 单一事实来源"的玩法也值得直接抄作业。🚀

【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template