> ## Documentation Index
> Fetch the complete documentation index at: https://docs.step1.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 像素级克隆

> 一键克隆任意网站，效果与原网站完全一致

通过浏览器插件，一键克隆你看中的任意网站——不是截图，不是近似还原，而是和原网站一模一样的效果。克隆完成后，用自然语言告诉 AI 你想做哪些修改即可。

<Frame>
  <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-compare.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=0cab0958382b809bdae2d73a2bdc5090" alt="克隆结果" width="3112" height="1127" data-path="images/clone-compare.png" />
</Frame>

***

## 如何克隆一个网站

<Steps>
  <Step title="安装浏览器插件">
    在 [Chrome 应用商店](https://chromewebstore.google.com/detail/step1dev/jnoaoealbmcpkpfkafglmkfamdfkpnhi) 安装 Step1.dev 插件，安装完成后插件图标会出现在浏览器工具栏。
  </Step>

  <Step title="在目标网站点击克隆">
    打开你想克隆的网站，点击工具栏中的 Step1.dev 插件图标，在弹窗中点击 **Clone This Page**；鼠标悬停在页面元素上后，顶部会出现操作栏，选择 **Clone Full Page** 克隆完整页面。

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-popup-step.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=bcc32256cef7eca63a9d4f5959513bde" alt="在目标网站点击克隆" width="1896" height="1180" data-path="images/clone-popup-step.png" />
    </Frame>
  </Step>

  <Step title="自动跳转到编辑器">
    抓取完成后点击 **Remix**，Step1.dev 会自动分析页面、抓取上传素材、最后跳转至编辑器，克隆版本即刻生成。

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-demo.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=1c75636d83e50f6801e82debe2c7b599" alt="克隆结果" width="2878" height="1574" data-path="images/clone-demo.png" />
    </Frame>
  </Step>

  <Step title="用自然语言进行修改">
    在 AI 对话框中描述你的需求，替换品牌内容（Logo、文案、配色）或添加新功能。

    <Note>
      案例："把导航栏的 Logo 替换为我们的品牌 Logo，将所有文案改为中文，主色调改为深蓝色"
    </Note>
  </Step>

  <Step title="部署上线">
    每次修改后，Step1.dev 自动部署并生成公开链接，点击右上角 <Icon icon="share-2" /> 按钮即可分享。
  </Step>
</Steps>

***

## 使用场景

<AccordionGroup>
  <Accordion title="克隆任意公开网站">
    看中哪个网站的设计，直接克隆作为起点，再替换成自己的内容。

    **适用场景：**

    * 克隆竞品或喜欢的设计作为新项目起点
    * 对 v0 / Lovable / Bolt 等 建站工具生成的站点进行设计升级
  </Accordion>

  <Accordion title="导入已有网站（二次开发）">
    将你现有的网站导入 Step1.dev，在原有基础上继续开发，无需从零重建。

    操作方式与克隆完全相同——打开你的现有网站，点击插件克隆导入，然后在编辑器中继续开发。

    <Note>
      案例："保持整体布局不变，把首页的卡片区域改成三列，并增加鼠标悬停动效"
    </Note>

    **适用场景：**

    * 对现有网站进行改版升级
    * 将旧站迁移后融合新的设计风格
  </Accordion>
</AccordionGroup>

***

## 克隆后常见操作

<AccordionGroup>
  <Accordion title="替换品牌内容">
    克隆后第一步通常是替换原网站的品牌内容。建议一次性在一条指令中完成：

    <Note>
      案例："把 Logo 替换为上传的图片，将所有品牌名称改为我们的产品名，主色调改为 #0066FF，Hero 标语改为：更快地构建你的产品"
    </Note>
  </Accordion>

  <Accordion title="融合其他网站的设计风格">
    对克隆结果的设计还不够满意？使用 Magic Fusion 将其他网站的设计元素融入进来。

    <Card title="了解 Magic Fusion" icon="wand-sparkles" href="/zh/magic-fusion">
      从任意网站提取设计元素，点选 + 自然语言即可融合
    </Card>
  </Accordion>
</AccordionGroup>

***

## 进阶阅读

<CardGroup cols={2}>
  <Card title="Magic Fusion" icon="wand-sparkles" href="/zh/magic-fusion">
    将任意网站的设计风格融合到你的项目中
  </Card>

  <Card title="Prompt 指南" icon="message-circle" href="/zh/basics">
    克隆最佳实践与 Prompt 技巧
  </Card>
</CardGroup>