Website_Replication_Skill

---
name: Website_Replication_Skill
description: 根据给定的 URL，通过视觉分析和结构拆解，使用指定技术栈（HTML5, React, Vue）高保重复刻目标网站。
---

简介

这是一个支持多种前端技术栈（HTML5, React, Vue）的专家级技能，旨在根据目标 URL 的视觉结构进行 1:1 高保重复刻。系统会根据用户选择的技术栈，自动调用相应的执行标准。

触发条件

• 当用户要求“复刻”、“克隆”、“重做”某个网站或特定的 URL 时。
• 当用户询问如何将现有网页转换为特定框架代码（HTML5, React, Vue）时。

核心任务流 (Execution Logic)

1. 深度扫描与逆向分析：
2. 提取全局视觉规范：包括十六进制调色板、字体系列、间距规范（Padding/Margin）和阴影。
3. 结构化拆解：识别页面语义化模块（如 Navigation, Hero, Features, Charts, Footer）。
4. 资产策略：图片统一使用 placehold.co，图标默认使用 Lucide。
5. 技术栈分发 (Stack Dispatching)：
   根据用户明确的要求，强制执行对应的资源规范：
6. HTML5 模式：调用并执行 RESOURCES/HTML5_SPEC.md。
7. React 模式：调用并执行 RESOURCES/REACT_SPEC.md（遵循 Functional Components + Tailwind 规范）。
8. Vue 模式：调用并执行 RESOURCES/VUE_SPEC.md（遵循 Vue 3 Composition API + Scoped CSS 规范）。
9. 迭代式开发标准：
10. 第一步：初始化项目骨架与全局配置（Tailwind Config / Theme / Fonts）。
11. 第二步：组件化实现。严格遵守对应技术栈的目录与文件规范。
12. 第三步：数据可视化集成。图表必须执行 RESOURCES/ECHARTS_SPEC.md 中的渲染与响应式协议。
13. 架构实施：执行 RESOURCES/CLEAN_CODE_STANDARD.md 中的文件拆分与逻辑封装协议。
14. 资产生成协议：
15. 图像处理：严禁使用静态本地图片或者使用原网站的图片URL。
16. 动态调用：必须根据当前复刻页面的业务属性，构造 text2image API 请求（详见资源规范）。

全局约束 (Strict Constraints)

• Zero Emoji Policy：严厉禁止使用 emoji。
• 布局规范：对齐内容（如卡片列表）必须使用 Tailwind 的 Flex 布局。
• 数据规范：列表数据必须 Mock 为数组并动态渲染，严禁硬编码 HTML。