Back to Details

clone-page

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/clone-page

/clone-page

What This Does

功能介绍

Analyzes a webpage and generates equivalent code in your chosen format. Creates production-ready, accessible code that matches the visual design.
分析网页并生成所选格式的等效代码。创建符合视觉设计的生产就绪、可访问性代码。

Usage

使用方法

/clone-page https://example.com                     # Auto-detect from project stack
/clone-page https://example.com --format html       # Plain HTML + CSS
/clone-page https://example.com --format react      # React components
/clone-page https://example.com --format nextjs     # Next.js App Router
/clone-page https://example.com --format native     # React Native
/clone-page https://example.com --format vue        # Vue.js SFCs
/clone-page https://example.com --format svelte     # Svelte components
/clone-page https://example.com                     # 根据项目栈自动检测
/clone-page https://example.com --format html       # 纯HTML + CSS
/clone-page https://example.com --format react      # React组件
/clone-page https://example.com --format nextjs     # Next.js App Router
/clone-page https://example.com --format native     # React Native
/clone-page https://example.com --format vue        # Vue.js单文件组件
/clone-page https://example.com --format svelte     # Svelte组件

Output Formats

输出格式

FormatOutputUse Case
html
HTML + CSS filesStatic sites, email templates, prototypes
react
JSX + CSS Modules/styled-componentsReact SPAs, Vite apps
nextjs
Next.js App Router componentsNext.js projects
native
React Native + StyleSheetMobile apps with Expo
vue
Vue 3 SFCs with 
<script setup>
Vue.js projects
svelte
Svelte componentsSvelteKit projects
auto
Detect from projectDefault behavior
格式输出内容适用场景
html
HTML + CSS文件静态站点、邮件模板、原型
react
JSX + CSS Modules/styled-componentsReact单页应用、Vite应用
nextjs
Next.js App Router组件Next.js项目
native
React Native + StyleSheet使用Expo的移动应用
vue
带
<script setup>
的Vue 3单文件组件		Vue.js项目
svelte
Svelte组件SvelteKit项目
auto
根据项目自动检测默认行为

Requirements

要求

MCP Browser (recommended): For best results, configure the Puppeteer or Playwright MCP server in your settings.json. This enables screenshots and full DOM access.
Without MCP Browser: Falls back to WebFetch which provides HTML content but no screenshots or JavaScript-rendered content.
MCP Browser（推荐）： 为获得最佳效果，请在settings.json中配置Puppeteer或Playwright MCP服务器。这将支持截图和完整DOM访问。
无MCP Browser时： 将降级为WebFetch，仅提供HTML内容，但无法截图或获取JavaScript渲染的内容。

How It Works

工作原理

  1. Analyze the page. Delegate to the site-analyzer agent to:
    • Fetch the page content (via MCP browser or WebFetch)
    • Take source reference screenshots (desktop + mobile) — saved to 
      .agent-pipeline/screenshots/source-desktop.png
      and 
      source-mobile.png
    • Extract structure, components, and design tokens
    • Write analysis to 
      .agent-pipeline/site-analysis.md
  2. Generate theme. Extract design tokens and create/update theme:
    • Colors (primary, secondary, accent, etc.)
    • Typography (fonts, sizes, weights)
    • Spacing scale
    • Border radii and shadows
  3. Generate components. Delegate to the ui-cloner agent to:
    • Create components in the specified format
    • Use appropriate styling approach for the format
    • Follow conventions for each framework/library
  4. Compose the page. Create the full page component that:
    • Imports and arranges all sections
    • Applies the theme
    • Handles responsive behavior
  5. Verify with visual comparison. Delegate to the frontend-verifier agent to:
    • Open the cloned page in the browser
    • Take screenshots of the clone at matching viewports
    • Compare clone screenshots against source screenshots (visual diff)
    • Score the visual match (0–100) across layout, colors, typography, spacing, content, responsive
    • If score < 70: fix and re-verify (up to 3 iterations)
    • Write verification report with final score to 
      .agent-pipeline/frontend-verification-report.md
  6. Report results. Write summary to 
    .agent-pipeline/clone-report.md
    including:
    • Files created
    • Visual match score
    • Any remaining differences
  1. 分析页面：委托给site-analyzer代理完成以下操作：
    • 获取页面内容（通过MCP浏览器或WebFetch）
    • 拍摄源参考截图（桌面端 + 移动端）——保存至
      .agent-pipeline/screenshots/source-desktop.png
      和
      source-mobile.png
    • 提取结构、组件和设计令牌
    • 将分析结果写入
      .agent-pipeline/site-analysis.md
  2. 生成主题：提取设计令牌并创建/更新主题：
    • 颜色（主色、辅助色、强调色等）
    • 排版（字体、字号、字重）
    • 间距比例
    • 边框圆角和阴影
  3. 生成组件：委托给ui-cloner代理完成以下操作：
    • 创建指定格式的组件
    • 使用对应格式的合适样式方案
    • 遵循各框架/库的约定
  4. 组合页面：创建完整页面组件：
    • 导入并排列所有区块
    • 应用主题
    • 处理响应式行为
  5. 视觉对比验证：委托给frontend-verifier代理完成以下操作：
    • 在浏览器中打开克隆后的页面
    • 在匹配视口下拍摄克隆页面的截图
    • 对比克隆截图与源截图（视觉差异）
    • 对布局、颜色、排版、间距、内容、响应式等维度的视觉匹配度打分（0–100）
    • 若分数<70：修复并重新验证（最多3次迭代）
    • 将含最终分数的验证报告写入
      .agent-pipeline/frontend-verification-report.md
  6. 结果报告：将摘要写入
    .agent-pipeline/clone-report.md
    ，包括：
    • 创建的文件
    • 视觉匹配度分数
    • 剩余差异

Format-Specific Output

格式专属输出

HTML (
--format html
)

HTML（
--format html
）

output/
├── index.html          # Semantic HTML structure
├── styles/
│   ├── reset.css       # CSS reset
│   ├── variables.css   # CSS custom properties (theme)
│   └── main.css        # Component styles
└── assets/
    └── (placeholder images)
output/
├── index.html          # 语义化HTML结构
├── styles/
│   ├── reset.css       # CSS重置样式
│   ├── variables.css   # CSS自定义属性（主题）
│   └── main.css        # 组件样式
└── assets/
    └── (占位图片)

React (
--format react
)

React（
--format react
）

src/
├── components/
│   ├── ui/             # Atomic components
│   ├── sections/       # Page sections
│   └── layout/         # Layout components
├── styles/
│   ├── theme.ts        # Design tokens
│   └── global.css      # Global styles
└── App.tsx             # Composed page
src/
├── components/
│   ├── ui/             # 原子组件
│   ├── sections/       # 页面区块
│   └── layout/         # 布局组件
├── styles/
│   ├── theme.ts        # 设计令牌
│   └── global.css      # 全局样式
└── App.tsx             # 组合后的页面

Next.js (
--format nextjs
)

Next.js（
--format nextjs
）

src/
├── components/
│   ├── ui/
│   ├── sections/
│   └── layout/
├── styles/
│   └── theme.ts
└── app/
    └── page.tsx        # App Router page
src/
├── components/
│   ├── ui/
│   ├── sections/
│   └── layout/
├── styles/
│   └── theme.ts
└── app/
    └── page.tsx        # App Router页面

React Native (
--format native
)

React Native（
--format native
）

src/
├── components/
│   ├── ui/
│   ├── sections/
│   └── layout/
├── theme/
│   └── index.ts        # Design tokens
└── screens/
    └── ClonedScreen.tsx
src/
├── components/
│   ├── ui/
│   ├── sections/
│   └── layout/
├── theme/
│   └── index.ts        # 设计令牌
└── screens/
    └── ClonedScreen.tsx

Vue (
--format vue
)

Vue（
--format vue
）

src/
├── components/
│   ├── ui/             # Base components
│   └── sections/       # Section components
├── styles/
│   └── variables.css   # CSS custom properties
└── views/
    └── ClonedPage.vue  # Page component
src/
├── components/
│   ├── ui/             # 基础组件
│   └── sections/       # 区块组件
├── styles/
│   └── variables.css   # CSS自定义属性
└── views/
    └── ClonedPage.vue  # 页面组件

Svelte (
--format svelte
)

Svelte（
--format svelte
）

src/
├── lib/
│   ├── components/
│   │   ├── ui/
│   │   └── sections/
│   └── styles/
│       └── theme.ts
└── routes/
    └── +page.svelte    # SvelteKit page
src/
├── lib/
│   ├── components/
│   │   ├── ui/
│   │   └── sections/
│   └── styles/
│       └── theme.ts
└── routes/
    └── +page.svelte    # SvelteKit页面

UI Library Support

UI库支持

When using 
--format react
or 
--format nextjs
, you can specify a UI library:
/clone-page https://example.com --format nextjs --ui mantine
/clone-page https://example.com --format nextjs --ui tailwind
/clone-page https://example.com --format nextjs --ui shadcn
/clone-page https://example.com --format react --ui chakra
/clone-page https://example.com --format react --ui mui
UI LibraryDescription
plain
Plain CSS/CSS Modules (default for react)
tailwind
Tailwind CSS utility classes
mantine
Mantine UI components (default for nextjs)
shadcn
shadcn/ui components
chakra
Chakra UI components
mui
Material UI components
使用
--format react
或
--format nextjs
时，可指定UI库：
/clone-page https://example.com --format nextjs --ui mantine
/clone-page https://example.com --format nextjs --ui tailwind
/clone-page https://example.com --format nextjs --ui shadcn
/clone-page https://example.com --format react --ui chakra
/clone-page https://example.com --format react --ui mui
UI库说明
plain
纯CSS/CSS Modules（React默认选项）
tailwind
Tailwind CSS工具类
mantine
Mantine UI组件（Next.js默认选项）
shadcn
shadcn/ui组件
chakra
Chakra UI组件
mui
Material UI组件

Options

选项

OptionDescription
--format <fmt>
Output format: html, react, nextjs, native, vue, svelte, auto
--ui <library>
UI library for React/Next.js (see above)
--section <name>
Clone only a specific section (hero, features, footer)
--components
Extract reusable components without composing page
--theme-only
Extract only the design tokens/theme
--no-theme
Use existing theme, don't extract new one
--output <dir>
Custom output directory for components
选项说明
--format <fmt>
输出格式：html、react、nextjs、native、vue、svelte、auto
--ui <library>
React/Next.js的UI库（见上表）
--section <name>
仅克隆指定区块（hero、features、footer等）
--components
仅提取可复用组件，不组合页面
--theme-only
仅提取设计令牌/主题
--no-theme
使用现有主题，不提取新主题
--output <dir>
组件的自定义输出目录

Example Workflows

示例工作流

Clone as plain HTML

克隆为纯HTML

User: /clone-page https://stripe.com/payments --format html

Agent: I'll clone the Stripe Payments page as static HTML.

[Analysis]
- Structure: Hero, Features Grid, Pricing Table, FAQ, Footer
- Colors: #635BFF (primary), #0A2540 (dark), #F6F9FC (light)
- Font: Inter, system-ui

[Generation]
Created:
- index.html (semantic HTML5)
- styles/variables.css (CSS custom properties)
- styles/main.css (component styles)

Open index.html in your browser to preview.
用户: /clone-page https://stripe.com/payments --format html

代理: 我将把Stripe Payments页面克隆为静态HTML。

[分析]
- 结构：Hero、功能网格、定价表、FAQ、页脚
- 颜色：#635BFF（主色）、#0A2540（深色）、#F6F9FC（浅色）
- 字体：Inter、system-ui

[生成]
已创建：
- index.html（语义化HTML5）
- styles/variables.css（CSS自定义属性）
- styles/main.css（组件样式）

在浏览器中打开index.html预览效果。

Clone for React SPA

克隆为React单页应用

User: /clone-page https://linear.app --format react --ui tailwind

Agent: I'll clone Linear's homepage as React + Tailwind components.

[Generation]
- src/components/ui/Button.tsx
- src/components/sections/HeroSection.tsx
- src/components/sections/FeaturesSection.tsx
- src/styles/theme.ts
- src/App.tsx
用户: /clone-page https://linear.app --format react --ui tailwind

代理: 我将把Linear主页克隆为React + Tailwind组件。

[生成]
- src/components/ui/Button.tsx
- src/components/sections/HeroSection.tsx
- src/components/sections/FeaturesSection.tsx
- src/styles/theme.ts
- src/App.tsx

Clone for mobile

克隆为移动端应用

User: /clone-page https://example.com --format native

Agent: I'll convert this design to React Native components.

[Generation]
- src/components/ui/Button.tsx
- src/components/sections/HeroSection.tsx
- src/theme/index.ts
- src/screens/ClonedScreen.tsx
用户: /clone-page https://example.com --format native

代理: 我将把该设计转换为React Native组件。

[生成]
- src/components/ui/Button.tsx
- src/components/sections/HeroSection.tsx
- src/theme/index.ts
- src/screens/ClonedScreen.tsx

Tips

提示

  • Start with simpler pages - Landing pages work best
  • Review the analysis first - Run 
    /analyze-site
    before cloning
  • Iterate - Clone, review, adjust, repeat
  • Match your stack - Use 
    auto
    format when in a project
  • Customize after - Clone gets you 80%, you refine the rest
  • 从简单页面开始 - 落地页效果最佳
  • 先查看分析结果 - 克隆前先运行
    /analyze-site
  • 迭代优化 - 克隆、审查、调整、重复
  • 匹配技术栈 - 在项目中使用
    auto
    格式
  • 后续自定义 - 克隆完成80%的工作量，剩余部分由你细化

Limitations

局限性

  • Cannot clone authentication-gated pages
  • JavaScript-heavy SPAs need MCP browser for full analysis
  • Some animations/interactions need manual recreation
  • Assets (images, fonts) need separate handling
  • 无法克隆需要认证的页面
  • 重度JavaScript单页应用需要MCP浏览器才能完成完整分析
  • 部分动画/交互需要手动重建
  • 资源（图片、字体）需要单独处理

Ethical Use

伦理使用规范

This tool is for learning and inspiration. Do not:
  • Directly copy proprietary designs without permission
  • Clone sites to deceive users (phishing)
  • Violate terms of service or copyright
Use cloned code as a starting point and customize to make it your own.
本工具用于学习和灵感启发。请勿：
  • 未经许可直接复制专有设计
  • 克隆站点用于欺骗用户（钓鱼）
  • 违反服务条款或版权法
将克隆代码作为起点，并进行自定义使其成为专属内容。