Awesome AI Pedia

Appearance

AI Website Cloner Template ​

项目地址：https://github.com/JCodesMore/ai-website-cloner-template

项目简介 ​

一个可复用的 Next.js 模板项目，通过 AI 编码代理将任意网站逆向工程为干净、现代的代码库。用户只需指定一个 URL，运行 /clone-website 命令，AI 代理便会检查网站、提取设计令牌和资源、编写组件规范，并派遣并行构建器重建每个部分。

技术栈 ​

  • Next.js 16：App Router、React 19、TypeScript 严格模式
  • shadcn/ui：基于 Radix primitives 和 Tailwind CSS v4
  • Tailwind CSS v4：使用 oklch 设计令牌
  • Lucide React：默认图标（克隆过程中会被提取的 SVG 替换）

使用方法 ​

给你的ai 说 帮我全局安装一下 https://github.com/JCodesMore/ai-website-cloner-template 这个skill 运行技能命令：/clone-website <target-url1> [<target-url2> ...]

工作流水线 ​

  1. 侦察阶段：截图、设计令牌提取、交互扫描（滚动、点击、悬停、响应式）
  2. 基础搭建：更新字体、颜色、全局样式，下载所有资源
  3. 组件规范：生成详细规范文件，包含精确的计算 CSS 值、状态、行为和内容
  4. 并行构建：在 git worktrees 中派发构建器代理，每个部分/组件一个
  5. 组装与 QA：合并 worktrees、连接页面、与原图进行视觉对比

平台支持 ​

推荐使用 Claude Code 搭配 Opus 4.8 获得最佳效果，同时支持 Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider 等多种 AI 编码代理。

适用场景 ​

  • 平台迁移：将自有网站从 WordPress/Webflow/Squarespace 重建为现代 Next.js 代码库
  • 源代码丢失：网站在线但代码库丢失或使用遗留技术栈时恢复代码
  • 学习用途：通过真实代码研究生产网站如何实现特定布局、动画和响应式行为

项目结构亮点 ​

  • AGENTS.md 作为代理指令的单一真实来源
  • scripts/sync-agent-rules.sh 和 scripts/sync-skills.mjs 用于为所有平台重新生成对应的配置文件
  • docs/research/ 存放提取输出和组件规范

许可证 ​

MIT