克隆一个网站
在当前应用中重建提供的页面。在添加新设计方向之前，先匹配源页面。交付可工作、可编辑的代码：截图、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. 构建完整首版
首先建立字体、页面宽度、颜色、资产、路由、页面级行为和共享组件。用每个观察到的状态（悬停、焦点、断点）构建每个共享组件，以便构建者按原样复用。复合适配的组件。对于布局/简单动画优先使用 CSS，当源行为需要时使用动画库。
用真实内容构建连贯的章节。在共享文件有所有者后，委托独立页面/章节。给构建者截图、相关测量/状态笔记、资产路径、目标文件和具体完成线。一个带有精确文件引用的简洁摘要就足够了；不需要固定的代理数量或每种组件的文书工作。
重建范围内的交互。保留真实的目标地址。当这些路由被包含时，重写链接到本地路由；将范围外的目标保留为指向源并披露它们。可见控件必须执行它们承诺的行为。
在集成切片后运行适当的项目检查。当每个请求的章节/路由使用实际资源渲染并且重要控件工作时完成此轮。
4. 比较、修复、重复
在相同视口、滚动位置和状态下打开源/本地页面。让字体、媒体和揭示动画稳定下来。检查步骤 2 中发现规则变化的整个页面，以及比设计更宽的视口；用真实输入判断滚动和指针行为。并排蒙太奇定位漂移；全尺寸部分确定细节。
首先修复最大的可见差异：几何、缺失章节/层、排版/换行、资产裁剪，然后是间距和动画。重新检查受影响的视图。在初始、活动和稳定状态下比较动画区域，包括相关反向滚动。
练习真实的本地工作流程：克隆路由之间的导航、移动菜单、选项卡/手风琴状态、轮播边界、主要操作、媒体控件和观察到的滚动相关过渡。检查运行时错误、缺失资源和水平溢出。添加页面时，验证现有路由仍然有效。在这些边界使用少量浏览器检查，而不是关于类名的断言。
运行项目的生产检查。完成需要成功构建和渲染比较。精确说明剩余差异，而不是将未检查的结果称为像素完美。
交付
返回预览/运行说明、源到本地路由映射、代表性的桌面/移动比较、实际运行的检查以及剩余的视觉/功能差距。当维护可重用模板时，将参考克隆保存在单独的应用中。