AI仿站不再瞎猜！用这个Skill把「抄网站」变成正经工程流程
看到喜欢的网站，想把效果「搬」到自己项目里，结果一顿操作复制粘贴——最后发现：根本跑不起来。
这种情况，做设计、搞前端的同学应该不陌生。AI 时代虽然 Copilot、Cursor 一键生成很爽，但「仿站」这件事，靠 AI 瞎猜永远是下策。
今天挖到一个宝藏 Skill——Web Clone（网站复刻），来自 GitHub 82k Star 的超级开源项目 Open Design。它不是简单帮你抄代码，而是教 AI 学会一套正经的「网站逆向工程方法论」，把「仿站」变成一个可复制、可标准化的工作流程。
核心逻辑：源码至上，拒绝 AI 瞎猜
这个 Skill 定了一条铁律：「任何 AI 生成的复刻分析，代码块默认全是臆造的，必须用真源码逐行核对。」
什么意思？比如某个炫酷的 WebGL 效果，AI 可能把「光线求交+SVG 滤镜扭曲 DOM」的实现，臆想成完全不同的 Ray-marching+SDF 方案。照着抄？做不出来，且性能差 N 倍。
所以第一步永远是：拿真源码。决策树会引导 AI 先去 GitHub 搜源码（很多站直接就是开源的），找不到才用 Playwright 浏览器自动化探测。
三步走，覆盖所有网站类型
Skill 里内置的决策树，把网站分为三大类分别处理：
- 静态站（GitHub Pages / 纯 HTML）→ 直接 curl 拿源码
- React/Vue/Next 内容站→ 框架识别 + 源码重建
- WebGL/Canvas 重前端站→ Playwright 深度探测 + 逐帧截图 + 资源清单
每一步都有对应脚本：截图三档（1440/768/390）、字体资产采集、网络请求捕获、交互探针……全链路可量化。
适用场景
- 设计师想把参考站的视觉语言迁移到自己的设计系统
- 前端同学需要「复刻某个炫酷交互」但不知道从哪下手
- 想把某个老旧网站的可视化效果迁移到新项目
- 做竞品分析时需要深入理解对方的技术实现路径
一句话总结
Web Clone 解决的不是「能不能复制」的问题，而是「如何正确地、系统地复制」的问题——让 AI 从「瞎猜代码」变成「先读源码、再做分析、最后重建」的正经工程师思维。
如果你经常需要「看看别人怎么做的，然后搬到自己项目里」，这个 Skill 值得装。
GitHub: https://github.com/nexu-io/open-design/tree/main/skills/web-clone
评论区
登录后可评论。