💡 一句话种草

“一个命令扒下你想要的网站样式，像素级克隆，省掉手动扒皮的苦活。”

看到一个网站设计很心动？别再手动截图、盲猜样式、一点点抄代码了。这个 Claude Code Skill 项目让你 /clone-website 一键完成视觉复刻，新手也能像资深开发一样精准抓取设计规范。

🎯 它是做什么的？

这个项目是一个 Claude Code 的 Skill 插件，全称 ai-website-cloner-template。它的核心能力是：通过一个命令，自动克隆目标网站的视觉样式和交互行为。

安装完成后，只需运行 /clone-website，它会通过 Chrome MCP 自动完成一整套“逆向工程”：

1. 分析网站 – 自动截图、提取设计 token（颜色、字体、间距等）、记录交互行为
2. 生成规范 – 输出详细的组件级设计规范文档
3. 并行重建 – 使用多个 sub-agents 同时处理不同模块，快速生成像素级克隆代码
4. 质检合并 – 自动合并代码，并进行视觉差异 QA，确保还原度

作者提供了 demo，效果相当能打。虽然我还没亲自试过，但如果你经常需要“参考”某个网站的前端样式，这套流程能帮你省下大量手动逆向的精力。

🎨 对前端/独立开发者的特别加成

对于经常需要借鉴优秀网站设计的人来说，这个 Skill 简直是“抄作业加速器”：

✨ 设计 Token 白捡

不用再打开 DevTools 一个一个查颜色和字号。它会自动提取设计系统的核心变量，直接复用。

📐 组件级拆解

不只是截一张大图，而是把它拆成按钮、卡片、导航栏等组件规范。你可以只取自己需要的部分，拼接到项目里。

🔄 像素级还原 + QA

普通截图 + 肉眼对比容易漏细节。它自带视觉差异质检，哪里对不上会自动标出来，减少返工。

🚀 快速验证灵感

看到一个想参考的落地页，直接克隆下来改改文案和图片，就能快速出原型验证想法，不用从 0 搭结构。

🧩 我们应该如何使用？

三步上手，适合想省时间的懒人：

1. 安装项目
   克隆仓库：git clone https://github.com/JCodesMore/ai-website-cloner-template

2. 配置 Claude Code Skill
   按照项目 README 把 Skill 装进你的 Claude Code 环境（确保 Chrome MCP 依赖就绪）。

3. 一键克隆
   在 Claude Code 中运行 /clone-website，输入目标网址，等着收代码。

⚠️ 温馨提示：仅用于学习参考和合法用途，尊重原网站的版权和设计归属。

🌈 碎碎念总结

前端开发里最磨人的事情之一，就是“看到喜欢的网站布局，想参考一下”却发现要花几个小时去扒样式、拆组件、适配响应式。眼睛看会了，手还没跟上。

这个 Skill 的价值在于：把“肉眼扒皮”变成“自动拆解”。它不是让你无脑抄袭，而是让你更高效地学习优秀作品的实现原理，快速拿到可复用的设计 token 和组件结构，把时间留给真正需要动脑子的地方。

当然，工具再好也只是起点。真正拉开差距的，是你能不能在这个基础上做出自己的差异化设计，理解人家为什么那么设计，而不是只会复制粘贴。

记住：抄结构学思路，改细节出作品。

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

想省时间的朋友可以去试试，回来告诉我效果怎么样 👇