如果看标题可能会奇怪，网站本身就是html，直接另存，有必要用AI复制吗？
从页面的生成方式看，网站可以分成动态网站和静态网站。
把网站看成一个页面提供者，静态网站相当于已经生成好了所有的网站页面，你想看随时来取就可以了。
动态网站是服务器上有一个页面生成系统。当你访问网站的页面时，系统立刻开始生成页面，然后再发给你。
从系统的可靠性来说，静态网站可靠性更高，对服务器的要求也更低。
世界上大约 80% 的网站是动态生成页面的，这样才能更好的服务用户，基于当前状态生成内容。
我们今天要处理的是动态网站。为了保留原来的功能，同时解决老网站安全和技术老化等问题，需要迁移到新系统：前台界面保持原样，后台需要更新。这个任务核心就是页面迁移，这也是本次 Skill 的起点。
我们的目标很简单，生成干净的独立的html
生成的html和原页面的布局、样式、特效保持一致。
期望找到一条长期可行、低成本、高效率的方案。
尝试的方案：
整体思路基于AI，这条路上前后尝试了几条路线：
1. 使用AI Agent，直接堆砌完善提示词
直接下达指令复制网页，例如给到 deepseek，输入指令：复制网站：huawei.com。
不断加强约束，堆砌更严格的提示词：
硬性技术约束
1. **CSS 内联（Tailwind 风格工具类 + 组件样式）**：每份 HTML 内部完整内联样式，禁止任何外部 CDN / 外部样式表 / 外部字体，离线双击直接打开、不需网络。
2. **资源内联 / 占位**：图片、图标、背景尽可能使用原图；无法处理的写注释 `<!-- 资源占位 -->`；**禁止 http / https 外部链接**；图标全部用**内联 SVG**，不引入第三方图标库、不引用字体图标 CDN。
3. **全站统一 UI**：所有页面共用同一套导航栏、移动端汉堡菜单、页脚、配色、圆角、阴影、间距、按钮、卡片等通用组件，视觉风格统一。
4. **手写轻量 JS**：严禁复制原站混淆 / 压缩 / 加密 JS；仅实现：导航 hover、移动端菜单展开收起、tab 切换、弹窗、轮播、返回顶部；**删除**埋点、统计、接口请求、业务逻辑；表单仅留 UI 不真实提交；JS 全部内联在对应 html 内。
5. **响应式**：PC / 平板 / 移动严格参考截图与文档描述，用 `sm / md / lg` 断点；栅格列数、容器宽度、组件折叠逻辑遵循文档。
6. **内容严格取自文档**：每个页面的标题、板块、文本、模块结构完全按文档，不擅自新增模块、不随意改写业务内容。
7. **像素 / 结构对齐**：若提供原站快照/截图或本地源站，用 MCP 浏览器打开「原站页」与「生成页」对比模块顺序、容器宽度、分区标题字号、Banner 高度等并修正，对比截图留存到 `qa\` 供复核。但最终结果还是差强人意。
2. 成熟的服务提供商
尝试业界成熟方案：v0.dev，Vercel 出品，支持自动脱敏。
工具能力很强，但会自动做很多改动，自动替换logo、图片等，而我们需要的是完整复刻。
生成出来的字体、颜色、特效依然存在偏差。
另外吐槽一点，首页还未完全生成就开始触发付费。
以上两个方案效果不理想：
- 方案一：样式、特效还原度差很多
- 方案二：效果不错，但输出不是原生html，而是 React 项目，技术栈为 Next.js
3. 最后尝试 Skill：ai‑website‑cloner‑template
一个 Skill 在灰暗的路径中照进了一束光。ai‑website‑cloner‑template 原本用来生成干净的 Next.js app。
分析这套 Skill 的完整流程：既然它可以输出 Next.js 应用，那么生成干净的 HTML 理论上也完全可行。
原来逻辑里“拼整页”的环节是输出 next.js 框架页面，我们只需要修改该环节，改为构建 HTML。
可以直接把 Skill 交给 AI 来做流程与文件调整。
原项目地址：
https://github.com/JCodesMore/ai-website-cloner-template
改造后的 Skill 已经开源：
https://github.com/ruanshan/ai-html-cloner
最终实际效果，个人比较满意, 有些页面的细节还需要再和AI沟通1次基本就可以了。
| 原网页截图 | skill复制截图 |
|---|---|
 |  |
复制网站到html的完整工作流
当前的方案流程：
- 收集网站的sitmap, 确定哪些页面需要复制。
- 使用skill复制sitemap中目标url。
- 人工查看复核，个别细节需要再和AI沟通几次。
顺着这个思路，理论上基于该 Skill，也可以扩展输出 vue、thinkphp 等其他框架页面。
最后
- 干净独立的 HTML，该产物可以直接给到客户做预览、迭代修改。
- 再基于这份 HTML，进一步生成其它框架模板。
本次项目的框架为 ThinkPHP，后面也是通过AI实现 HTML 转 ThinkPHP Views，后续有机会再详细展开。
