| name | webpage-cloner |
| description | 分析网页截图或设计图片，生成完整可运行的 HTML/CSS/JS 代码，忠实还原布局、配色、字体、间距和视觉风格。 当用户提供网站或 Web UI 的截图/图片，并要求"复刻"、"还原"、"仿写"、"重现"、"克隆"、"重建"、"复制"为代码时触发。 也适用于"把这个设计变成代码"、"把截图转成HTML"、"做一个和这个一样的网页"、"根据这个截图生成网页"等请求。 支持响应式设计，自动判断最佳输出格式（HTML/CSS/JS 或 React）， 可处理导航栏、卡片、网格、表单、仪表盘、落地页等复杂布局。
|
网页复刻器
分析网页截图，生成高保真、响应式的代码复刻。
工作流程
图片输入 → 样式分析 → 结构拆解 → 代码生成 → 响应式适配 → 输出交付
第一步：图片分析
收到截图后，系统化提取以下信息：
-
布局结构 — 识别整体页面架构：
- 顶部导航栏位置和样式（固定、粘性、透明等）
- 内容区块及其垂直排列顺序
- 侧边栏（左侧/右侧/无）
- 页脚结构
- 网格/弹性布局模式（列数、行数、间距）
-
色彩系统 — 提取完整色板：
- 主色/辅色/强调色
- 背景色（页面、区块、卡片）
- 文字色（标题、正文、次要文字、链接）
- 边框/分割线颜色
- 渐变定义（方向、色标）
- 阴影定义（颜色、模糊、扩展、偏移）
-
字体排版 — 识别字体特征：
- 字体族（从视觉风格推断：衬线/无衬线/等宽）
- 字号（h1-h6、正文、小字、注释）
- 字重（常规、中等、半粗、粗体）
- 行高
- 字间距
- 文本对齐和变换（大写、首字母大写）
-
间距系统 — 测量空间关系：
- 区块内边距（垂直、水平）
- 元素外边距
- 卡片/容器内边距
- 网格项之间的间距
- 圆角值
-
交互元素 — 识别 UI 组件：
- 按钮（样式变体：主要、次要、描边、幽灵、图标按钮）
- 表单输入（文本、搜索、选择、复选、单选）
- 导航项（激活状态、悬停效果）
- 卡片（阴影、边框、悬停效果）
- 图标（风格：线框、填充、品牌）
- 徽章/标签/胶囊
-
视觉效果 — 注意特殊处理：
- 圆角模式
- 盒阴影和层级关系
- 背景模糊 / 毛玻璃效果
- 透明度和遮罩效果
- 图片处理（圆角、裁切、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 架构
响应式设计
采用移动端优先的响应式策略：
- 以移动端布局为默认样式
- 使用
@media (min-width: 768px) 适配平板
- 使用
@media (min-width: 1024px) 适配桌面端
- 使用
@media (min-width: 1280px) 适配大屏
- 在每个断点适配网格列数、字号、间距和导航模式
组件模板
常见 UI 模式的详细 CSS/HTML 模板，参见 references/components.md。
图标处理
- 简单图标：使用内联 SVG
- 图标密集的页面：推荐通过 CDN 引入 Font Awesome 或 Material Icons
- 匹配截图中可见的图标风格（线框/填充/圆角）
图片占位
- 使用
https://picsum.photos/{width}/{height} 作为占位图片
- 匹配截图中可见的宽高比
- 应用相同的
object-fit、border-radius 和 filter 处理
第五步：质量检查清单
交付前，逐项验证：
资源文件
