这个 AI 技能让网站克隆进入像素级时代——clone-anywebsite

刷到一个喜欢的 landing page，想把它的设计”偷”过来，但手动量 CSS 累死人？

今天挖到一个 AI 编程神器——clone-anywebsite，就是干这个的。

它是干什么的

简单说：一个让 AI 帮你像素级克隆任意网站 landing page 的 Skill。

不是那种导出一堆乱七八糟 div 的低质量爬虫，而是一套视觉优先、结构化的工作流。你给它一个网址，它会：

• 截图三个视口（桌面1440p、大屏1920p、手机390p）
• 用”Sniper CSS”精准提取渐变、阴影等复杂样式
• 做 Deep DOM Interrogation，揪出隐藏的 canvas/WebGL 背景
• 最后用 React + Tailwind + Framer Motion 重建，还带物理动效

核心思路：先看再抄，80/20 原则

这个 Skill 最妙的是它的方法论：

80% 冲刺阶段——先跑结构，semantic HTML 搭框架，基本 Tailwind 布局搞定，不纠结细节，高速出活。

20% 精修阶段——看截图对比，用 Sniper CSS 提取精确颜色值、渐变坐标，把动画效果用 Framer Motion 物理引擎还原。

最后双屏并排对照，原站和克隆站并排截图，肉眼对比微调。

适合谁用

• 前端同学做竞品分析/灵感参考
• 独立开发者想快速参考某个设计
• AI 编程助手重度用户，想给 AI 一个标准化的”设计还原”工作流

上手方式

安装命令：

npx skills add https://github.com/SylphAI-Inc/skills --skill clone-anywebsite

也可以在 AdaL CLI 里用 /plugin install core-skills@adal-agent-skills 装整套技能包。

GitHub 仓库：https://github.com/SylphAI-Inc/skills，clone-anywebsite 在 skills/clone-anywebsite/ 目录下，SKILL.md 写得很详细，直接装就行。

注意：仅供学习参考，不要拿来直接抄人家的商业品牌和文案。

GitHub: https://github.com/SylphAI-Inc/skills