前端 仿站开发 前端页面开发

克隆网站提词语

负责将目标网站做成“前端静态高保真复刻版”。

可直接使用

提示语详情

你现在负责将目标网站做成“前端静态高保真复刻版”。

【授权与目标】
我确认对以下目标网站拥有复刻/使用授权:
目标网站:<填写目标网址>
本地项目目录:<填写本地目录>
最终线上地址/FTP:<如需部署则填写;否则写“暂不部署”>

目标:使用 Bootstrap + 原生 JavaScript + CSS,完成前端静态复刻;不做后台、数据库、登录、接口逻辑。要求所有公开页面、详情页、列表页、菜单层级、桌面端和移动端都尽可能与目标站一致。

【硬性要求】
1. 不要只做首页。必须先梳理目标站全部公开页面、导航菜单、二级/三级菜单、详情页、列表页、搜索页、联系/预约页等;我没有单独指出的页面也必须逐个检查、复刻、验证。
2. 必须等待目标站每个页面完全加载后再采集、截图和对比;包括懒加载图片、动画完成状态、地图、弹窗、菜单、轮播等。
3. 先采集,后开发。开发前完整记录:
   - 桌面端页面全长截图与区块结构
   - 移动端 390×844 截图与响应式状态
   - 字体、字号、字重、颜色、行高、宽高、边距、栅格、背景、阴影、圆角
   - 图片、Logo、图标、SVG、字体文件、背景、视频及其加载方式
   - 所有交互:悬停、点击、菜单、下拉菜单、Tab、轮播、图片缩放、滚动动画、吸顶、返回顶部、弹窗、地图拖拽/缩放等
4. 最终页面不能使用目标站的图片、字体、CSS、JS、地图瓦片或其他资源热链。所有可用资源下载并本地化:
   - 图片统一放在 /images/
   - CSS 统一放在 /style/css/
   - JavaScript 统一放在 /style/js/
   - 字体统一放在 /style/fonts/
   - 第三方前端库放在 /style/vendor/ 或明确的本地目录
5. 页面必须是可直接部署的静态文件,优先使用 HTML + Bootstrap + CSS + 原生 JS;不要引入不必要的框架、构建工具或后台依赖。
6. 详情页要求:如暂时没有真实数据,可复刻一个完整详情模板;列表中每一项应链接到对应详情页或同一个详情模板,不允许空链接。
7. 地图要求:如果目标站有可拖动、缩放、切换地点、Marker、弹窗等地图效果,必须实现可交互地图,不能用静态截图代替。
8. 不允许为了“看起来差不多”使用截图当整页背景、占位图、临时文字图标、Emoji 或粗糙替代品。找不到原资源时,先说明,再使用最接近的合法替代资源。
9. 保留用户已有文件和无关功能;未经确认不要删除、重置、覆盖无关内容。
10. 不要在没有完成视觉对比和交互测试前说“已完成”。

【页面与交互复刻标准】
- 桌面端以目标站实际主视口为准;移动端必须以 390×844 验证。
- 每页比较:总高度、首屏、各区块高度、容器宽度、文字换行、页脚位置、图片裁切、间距和响应式断点。
- 每个菜单层级必须可正常展开、收起、跳转。
- 所有鼠标经过、点击、图片缩放、遮罩、动画、滚动显示、轮播、Tab、返回顶部等效果,都要逐项测试和复刻。
- 对地图、轮播、弹层等状态,要分别截图并比较。
- 如果目标站某处本身有异常,不要擅自“优化设计”;以目标站实际呈现为准,并在验收报告中注明。

【开发流程】
1. 使用浏览器逐页打开目标网站,确认页面正确且完全加载。
2. 建立页面清单、导航清单、交互清单、资源清单。
3. 下载并归类所有前端资源到本地目录。
4. 先完成公共头部、页脚、字体、颜色变量、按钮、导航和响应式基础。
5. 再完成全部页面及其详情页/列表页链接。
6. 启动本地预览,逐页进行桌面端和移动端可视化对比。
7. 修复所有明显差异后,再验证全部链接、图片、字体、控制台错误和横向溢出。
8. 如我提供 FTP,先完成本地验收后再上传;上传后下载关键文件进行 SHA256 校验,并打开线上页面再次检查。

【验收输出】
完成后必须提供:
1. 可访问的本地或线上地址。
2. 已完成页面清单。
3. 桌面端与移动端的逐页对比结果。
4. 已复刻的交互效果清单。
5. 未能完全一致的资源、字体、图标或效果及原因;没有则明确写“无”。
6. design-qa.md 验收报告,包含页面高度、布局、图片、字体、交互、移动端、控制台错误、横向溢出检查。
7. 最终项目压缩包。
8. 如已 FTP 部署:上传结果、远端文件校验结果和线上复查结果。
9. 不要在回复中暴露 FTP 密码、Cookie、Token 或其他敏感信息。

现在开始执行。先输出“目标站页面与资源采集清单”,然后采集和开发;不要跳过任何未单独指定的公开页面。