clone-website

克隆网站

在当前应用中重新创建所提供的页面。在添加新的设计方向之前，先与源站保持一致。交付可运行、可编辑的代码：截图、iframe 和下载的生产构建包是参考资料，而不是实现本身。

1. 梳理工作

阅读项目说明、实际的框架/脚本以及现有路由。使用可用的浏览器打开源 URL。在可行的情况下，优先使用直接的 HTTP、资源工具或 API 进行提取；使用浏览器来确定外观和行为。

记录一份简短的源到本地路由映射，以及每个页面所拥有的文件。遵循应用的约定；在此模板中使用 src/app/、src/components/sites/<site>/、public/sites/<site>/ 和 docs/research/<site>/。为来源、页面和下载内容分配不同的名称；当可读名称冲突时，添加端口或 URL 哈希。

• 首次根克隆可以替换未改动过的模板首页。
• 对于来自同一来源的多个页面，保留源路径名。查询/片段变体通常表示同一路由的不同状态；请复现这些状态。
• 保留现有已编写的路由/资源。在被要求时更新它们；在替换任何内容之前，先解决未被要求的路径冲突。
• 向现有克隆添加页面时，扩展其布局和全局样式，而不要替换现有页面所使用的样式。
• 除非用户想要一个合并应用，否则为不同来源使用单独的应用。合并的网站需要不同的路由前缀，以及作用域限定的字体、样式和布局。
• 使用框架支持的机制转义与框架语法冲突的字面 URL 片段（_、@、方括号、圆括号），然后验证实际请求的 URL。

现有克隆是有用的起点：将它们与当前源进行比较，并记录哪些被复用了。当每个请求的 URL 都有目的地，且文件归属清晰时，即可完成。

2. 构建前先观察

在桌面和移动宽度下检查整个页面。从上到下滚动以加载延迟媒体，并显示粘性/固定场景。然后操作菜单、选项卡、手风琴、轮播、悬停状态和主要链接。区分由滚动、点击、悬停或时间驱动的变化；用点击来模仿滚动驱动的区块是另一种产品。

将每次观察视为规则的一个样本。阅读声明的值（计算样式、CSS 变量、库的实时选项），而不是从单次渲染中推断它们，并不断改变视口宽度（包括比设计更宽的宽度）、视口高度、输入和状态，直到你了解是什么驱动了每项变化。使用访问者会用的输入（滚轮、触摸、键盘、指针）来驱动页面；脚本化滚动会绕过附加于这些输入的行为，例如平滑滚动。

保存源截图，并标注视口、滚动位置和交互状态。捕获替代状态的内容/资源。保留一份紧凑的页面简报：区块顺序、排版、布局尺寸、资源映射和交互。仅当区块简报有助于独立构建者时，才添加它们。

阅读检查参考以了解提取和状态比较。对于 Framer 生成的页面、粘性场景、揭示动画或动画媒体，请阅读 Framer 与动效。

使用源站的真实文本及其实际加载的文件：字体、图片、SVG 和视频。来自其他提供商或图标集的同名替代品具有不同的度量或形状。测量重要的几何/计算样式。在将视觉元素重建为 HTML 之前，先检查分层图像和媒体元素。跟踪源 URL → 本地资源路径，并验证内容类型/尺寸：一个 .png URL 可能返回 AVIF。

当每个区块和有意义的状​​态都有足够的证据可供构建，且已识别出不可用的细节时，即可完成。大量的 DOM 转储不能替代对页面的查看。

3. 构建完整的首轮实现

先确立字体、页面宽度、颜色、资源、路由、页面级行为和共享组件。构建每个共享组件时覆盖所有已观察到的状态（hover、focus、断点），以便构建者原样复用。复用合适的组件。布局和简单动效优先使用 CSS，当源行为需要时再使用动画库。

用真实内容构建连贯的区块。在共享文件有明确负责人之后，再委派独立的页面/区块。向构建者提供截图、相关测量值/状态说明、资源路径、目标文件以及明确的完成标准。一份带有精确文件引用的简洁说明就足够了；不需要固定的 Agent 数量或逐组件的文书工作。

重建范围内的交互。保留真实的外部跳转目标。当本地路由已包含在范围内时，将链接改写为本地路由；将范围外的目标保留指向源站并予以披露。可见控件必须执行其承诺的行为。

在完成一个集成切片后，运行相应的项目检查。当每个要求的区块/路由都能用真实资源渲染，且重要控件可正常工作时，本轮实现即告完成。

4. 对比、修复、重复

在相同的视口、滚动位置和状态下打开源站页面/本地页面。让字体、媒体和揭示动画稳定下来。在步骤 2 发现规则发生变化的所有位置审查整个页面，外加一个比设计更宽的视口；用真实输入判断滚动和指针行为。并排拼图可定位偏差；全尺寸区块可确认细节。

优先修复最大的可见差异：几何布局、缺失的区块/图层、排版/换行、资源裁剪，然后是间距和动效。重新检查受影响的视图。在初始、激活和稳定状态下对比动画区域，相关时包括反向滚动。

演练真实的本地工作流：克隆路由之间的导航、移动端菜单、标签页/手风琴状态、轮播边界、主要操作、媒体控件，以及观察到的滚动联动过渡。检查运行时错误、缺失资源和水平溢出。添加页面时，验证现有路由仍然可用。在这些边界处使用少量浏览器检查，而不是对类名进行断言。

运行项目的生产检查。完成要求构建成功且渲染对比通过。精确说明残余差异，而不是把未经检查的结果称为像素级完美。

交付

返回预览/运行说明、源到本地路由映射、具有代表性的桌面端/移动端对比、实际运行的检查，以及残余的视觉/功能差距。在维护可复用模板时，将参考克隆保留在独立应用中。