ai-website-cloner-template
用AI代理反向工程任意网站生成Next.js代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ai-website-cloner-template。 它的用途是：用AI代理反向工程任意网站生成Next.js代码 完整的 Skill 内容见：https://321skill.com/skills/ai-website-cloner-template/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'/clone-website https://example.com'，它会自动分析网站结构，提取颜色、字体等设计令牌，生成组件代码，并并行构建每个页面部分，最终输出一个完整的Next.js项目。
介绍
这个Skill解决了手动复制网站设计费时费力的问题。在实际开发中，开发者经常需要参考现有网站的设计风格、布局和交互，但传统方式需要手动截图、测量间距、复写CSS，效率极低且容易失真。
使用方式很简单，你只需要在GitHub上使用这个模板创建自己的仓库，然后安装依赖并启动AI代理（推荐Claude Code）。之后就可以通过自然语言指令来运行 /clone-website <目标网址>，AI代理会自动分析网站结构，提取设计令牌和素材，编写组件规格说明，并并行构建每个页面部分，最终生成一个完整的Next.js项目。
它非常适合需要快速复刻网站设计的前端开发者和全栈开发者。尤其是那些已经承担了产品原型或竞品分析任务，需要将现有网站转化为可编辑、可二次开发的代码库的团队或个人。
建议在需要批量克隆多个网站或频繁参考设计时统一使用此工具。需要注意的是，它主要依赖AI代理的视觉理解能力，对复杂交互动画或高度动态内容的网站克隆效果可能有限，建议使用Claude Code + Opus 4.8组合以获得最佳效果。
常见问题
是否需要OpenAI或Anthropic的API密钥？
是的，需要对应AI代理的API密钥（如Claude Code需要Anthropic API密钥）。
支持哪些AI代理？
推荐Claude Code（Opus 4.8），同时也支持Codex CLI、OpenCode、Cursor、Windsurf、Gemini CLI等主流代理。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ai-website-cloner-template/raw/index.md 读取 ai-website-cloner-template 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ai-website-cloner-template/raw/index.md（查看排版版本）