webpage-cloner

name	webpage-cloner
description	分析网页截图或设计图片，生成完整可运行的 HTML/CSS/JS 代码，忠实还原布局、配色、字体、间距和视觉风格。 当用户提供网站或 Web UI 的截图/图片，并要求"复刻"、"还原"、"仿写"、"重现"、"克隆"、"重建"、"复制"为代码时触发。 也适用于"把这个设计变成代码"、"把截图转成HTML"、"做一个和这个一样的网页"、"根据这个截图生成网页"等请求。 支持响应式设计，自动判断最佳输出格式（HTML/CSS/JS 或 React）， 可处理导航栏、卡片、网格、表单、仪表盘、落地页等复杂布局。

网页复刻器

分析网页截图，生成高保真、响应式的代码复刻。

工作流程

图片输入 → 样式分析 → 结构拆解 → 代码生成 → 响应式适配 → 输出交付

第一步：图片分析

收到截图后，系统化提取以下信息：

1. 布局结构 — 识别整体页面架构：

   • 顶部导航栏位置和样式（固定、粘性、透明等）
   • 内容区块及其垂直排列顺序
   • 侧边栏（左侧/右侧/无）
   • 页脚结构
   • 网格/弹性布局模式（列数、行数、间距）

2. 色彩系统 — 提取完整色板：

   • 主色/辅色/强调色
   • 背景色（页面、区块、卡片）
   • 文字色（标题、正文、次要文字、链接）
   • 边框/分割线颜色
   • 渐变定义（方向、色标）
   • 阴影定义（颜色、模糊、扩展、偏移）

3. 字体排版 — 识别字体特征：

   • 字体族（从视觉风格推断：衬线/无衬线/等宽）
   • 字号（h1-h6、正文、小字、注释）
   • 字重（常规、中等、半粗、粗体）
   • 行高
   • 字间距
   • 文本对齐和变换（大写、首字母大写）

4. 间距系统 — 测量空间关系：

   • 区块内边距（垂直、水平）
   • 元素外边距
   • 卡片/容器内边距
   • 网格项之间的间距
   • 圆角值

5. 交互元素 — 识别 UI 组件：

   • 按钮（样式变体：主要、次要、描边、幽灵、图标按钮）
   • 表单输入（文本、搜索、选择、复选、单选）
   • 导航项（激活状态、悬停效果）
   • 卡片（阴影、边框、悬停效果）
   • 图标（风格：线框、填充、品牌）
   • 徽章/标签/胶囊

6. 视觉效果 — 注意特殊处理：

   • 圆角模式
   • 盒阴影和层级关系
   • 背景模糊 / 毛玻璃效果
   • 透明度和遮罩效果
   • 图片处理（圆角、裁切、object-fit）
   • 动画或过渡效果（如果可见）

第二步：结构拆解

将视觉布局映射为 HTML 结构树：

• 识别语义化区块：<header>、<nav>、<main>、<section>、<footer>
• 确定容器宽度和最大宽度
• 将视觉列映射为 CSS Grid 或 Flexbox
• 识别可复用的组件模式（卡片、按钮、表单组）
• 注意 z-index 层级（弹窗、下拉菜单、固定导航栏）

第三步：输出格式选择

根据页面复杂度选择输出格式：

页面类型	推荐格式
静态落地页、营销网站	HTML + CSS + JS（单文件）
仪表盘、类 SPA 界面	React（JSX + CSS Modules）
简单页面、少量交互	HTML + CSS（无需 JS）

默认使用 HTML + CSS + JS 单文件，除非页面明显需要组件化架构。

第四步：代码生成规则

CSS 架构

• 使用 CSS 自定义属性管理色彩系统和间距令牌：

  :root {
    --color-primary: #...;
    --color-bg: #...;
    --spacing-sm: ...px;
    --radius-md: ...px;
    --shadow-card: ...;
  }
  

• 一维布局使用 Flexbox，二维布局使用 CSS Grid
• 适当使用 响应式单位（rem、em、%、vw/vh）
• 按逻辑分组样式（布局 → 组件 → 工具类）
• 使用 BEM 风格命名或语义化类名

响应式设计

采用移动端优先的响应式策略：

1. 以移动端布局为默认样式
2. 使用 @media (min-width: 768px) 适配平板
3. 使用 @media (min-width: 1024px) 适配桌面端
4. 使用 @media (min-width: 1280px) 适配大屏
5. 在每个断点适配网格列数、字号、间距和导航模式

组件模板

常见 UI 模式的详细 CSS/HTML 模板，参见 references/components.md。

图标处理

• 简单图标：使用内联 SVG
• 图标密集的页面：推荐通过 CDN 引入 Font Awesome 或 Material Icons
• 匹配截图中可见的图标风格（线框/填充/圆角）

图片占位

• 使用 https://picsum.photos/{width}/{height} 作为占位图片
• 匹配截图中可见的宽高比
• 应用相同的 object-fit、border-radius 和 filter 处理

第五步：质量检查清单

交付前，逐项验证：

• 色板与截图匹配（主色、辅色、背景、文字）
• 字体层级正确（大小、粗细、间距）
• 布局结构匹配（区块、列、对齐方式）
• 间距一致（内边距、外边距、间隙）
• 圆角和阴影与原图匹配
• 按钮和交互元素外观正确
• 响应式断点正常工作
• 无占位文字残留（使用与原图匹配的真实内容）
• 交互元素已定义悬停/聚焦状态

资源文件

• 组件模板库：参见 references/components.md，包含导航栏、卡片、表单、网格、页脚等常见 UI 组件的即用型 HTML/CSS 模板
• 样式分析指南：参见 references/style-analysis.md，包含颜色提取、字体推断、间距估算、阴影系统、布局模式识别等系统化分析方法
• CSS 重置样式：参见 assets/reset.css，每个生成文件顶部应包含的现代 CSS 重置