> ## 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.

# 快速开始

> 为您准备的分步上手指南。

Step1.dev 可以让你快速以像素级克隆任意网站，也可以方便地导入你已有的网站。之后，你可以通过自然语言借助 AI 对网站进行任意修改，也可以使用 Magic Fusion 融合任意其他网站的设计，最终一键发布上线。

## 1. 创建项目

Step1.dev 支持以下三种方式创建项目：

<AccordionGroup>
  <Accordion title="克隆任意网站">
    使用 Step1.dev 插件像素级克隆任意网站

    <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 应用商店安装 Step1.dev 插件，安装完成后插件图标会出现在浏览器工具栏。

        <Card title="安装 Step1.dev 插件" icon="chrome" href="https://chromewebstore.google.com/detail/ai-site-cloner-clone-any/kadbegcbiplbenlokcdjkmicjaophmif">
          前往 Chrome 应用商店免费安装
        </Card>
      </Step>

      <Step title="在目标网站点击克隆">
        打开你想克隆的网站，点击工具栏中的 Step1.dev 插件图标，选择 **Clone this page**。
      </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>
    </Steps>

    **适用场景：**

    * 克隆竞品或参考网站作为设计起点
    * 对 v0 / Lovable / Bolt 等 AI 工具生成的站点进行设计升级
  </Accordion>

  <Accordion title="导入你的网站">
    将你现有的网站通过浏览器插件导入 Step1.dev，在原有基础上继续开发，无需从零重建。

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-step1.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=7002b0005b96ad5bf0881b4af29df4eb" alt="导入已有网站" width="2872" height="1510" data-path="images/clone-step1.png" />
    </Frame>

    <Steps>
      <Step title="打开你的现有网站">
        在浏览器中打开你想继续开发的网站。
      </Step>

      <Step title="使用插件克隆导入">
        点击 Step1.dev 插件图标，选择 **Clone this page**，页面会自动导入到编辑器中。
      </Step>

      <Step title="在原有基础上继续开发">
        在编辑器中对已有页面进行修改或扩展，用自然语言描述你的需求即可。

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

    **适用场景：**

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

    <Note>
      只会导入网页的 UI 样式，不包含任何功能逻辑与交互。
    </Note>
  </Accordion>

  <Accordion title="从零开始（From Scratch）">
    只需用自然语言描述你的构想，Step1.dev 便会直接生成网站。

    在主页输入框中描述你想要的网站：

    <Note>
      案例：

      * "创建一个 SaaS 产品的 Landing Page，包含功能介绍、定价表和 FAQ"
      * "帮我做一个个人作品集网站，简洁现代，包含项目展示和联系方式"
    </Note>

    **使用建议：**

    * 描述越具体，生成效果越好
    * 初次生成后可随时通过对话继续调整
    * 如果想提升设计质感，配合 Magic Fusion 融合喜欢的网站风格
  </Accordion>
</AccordionGroup>

***

## 2. Magic Fusion 设计融合

将任意网站的设计风格或元素融合到你的项目中，点选你喜欢的部分，用自然语言告诉 AI 怎么用。

<Frame>
  <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/fusion-demo.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=c206a3b94de292e908a248bf8b6da889" alt="Magic Fusion 演示" width="2874" height="1572" data-path="images/fusion-demo.png" />
</Frame>

<Steps>
  <Step title="选择参考页面，激活 Fusion">
    在编辑器左侧 **Assets** 面板中，找到你之前采集的参考页面（如 Raycast 官网）。点击该资产卡片下方的 **Fusion** 按钮。
  </Step>

  <Step title="选取你想要的设计元素">
    **Magic Fusion** 窗口会完整呈现参考页面。鼠标悬停时，系统会自动识别并以**蓝框**高亮显示各个区域。点击选中后，选中区域变为**绿色**。

    <Tip>
      可以选中单个组件（如一组按钮、动画区块），也可以选中整个页面区域。
    </Tip>
  </Step>

  <Step title="告诉 AI 如何融合">
    点击 **Fuse Selection** 后回到主编辑器。在 AI 对话框中描述你想要的效果——放在哪里、要不要调整颜色或大小。

    <Note>
      案例："把刚才选中的按钮组放到产品页 Hero 区域下方，保持动效，颜色改为品牌主色"
    </Note>
  </Step>

  <Step title="AI 自动完成融合">
    Step1.dev AI 会自主分析页面，并根据你描述的需求进行融合。
  </Step>
</Steps>

<AccordionGroup>
  <Accordion title="Magic Fusion 支持哪些模式？">
    Magic Fusion 支持任意粒度的融合——从整体布局、视觉风格到微动效，只需用自然语言描述，AI 即可完成融合。

    * **组件融合**：选中特定设计元素（按钮、动画、卡片等）融合到目标项目
    * **整站融合**：选中整个页面，将其设计风格整体迁移到当前项目
    * **一键换肤**：选择参考页面后，让 AI 直接将当前项目的视觉风格切换为参考风格
  </Accordion>

  <Accordion title="典型用例有哪些？">
    * 把 Stripe 的渐变效果融入自己的落地页
    * 把 Linear 的动画应用到产品介绍页
    * 把 Notion 的简洁布局用于文档站点
    * 把 Glossier 的品牌质感迁移到客户的护肤品牌站
  </Accordion>
</AccordionGroup>

***

## 3. 优化与调整

<AccordionGroup>
  <Accordion title="添加/修改功能">
    只需描述你想新增的功能，Step1.dev 便会自动帮你实现。

    <Note>
      案例："帮我美化 UI，要求整体风格简洁、现代，风格接近 Notion"
    </Note>
  </Accordion>

  <Accordion title="添加图片素材">
    直接在对话框中上传素材，并描述你想如何使用它。Step1.dev 会自动将图片添加到项目中。

    <Note>
      案例："帮我添加这个图片，作为首页的背景图"
    </Note>
  </Accordion>

  <Accordion title="版本回滚">
    如果对当前版本不满意，点击对话框右上角的 <Icon icon="history" /> 按钮或对应对话下方的 `Restore` 按钮，选择历史版本回滚重新开始。
  </Accordion>

  <Accordion title="Ask Mode">
    当你不确定如何实现某个需求时，使用 Ask Mode 获取建议，不会对项目做任何修改。

    * 点击对话框右下角的 `Ask` 按钮进入 Ask Mode

    <Note>
      案例："如何实现日历拖拽调整日程时间的功能？"
    </Note>
  </Accordion>
</AccordionGroup>

***

## 4. 部署与发布

<AccordionGroup>
  <Accordion title="自动部署">
    每次修改后，Step1.dev 会**自动部署**你的项目，无需任何操作。每个版本都会生成一个独立的可访问链接。
  </Accordion>

  <Accordion title="分享与预览">
    点击编辑器右上角的 <Icon icon="share-2" /> 按钮，复制链接发给外部用户预览。

    <Note>
      链接始终指向最新版本，不需要每次更新后重新发送。
    </Note>
  </Accordion>

  <Accordion title="发布上线">
    项目准备好对外展示后，点击编辑器右上角的 **Publish** 按钮正式发布。

    <Note>
      发布链接不会随后续修改自动更新——每次有新版本需要对外生效时，需重新点击 **Publish**。
    </Note>
  </Accordion>

  <Accordion title="绑定自定义域名">
    在项目设置中绑定你自己的域名，让网站通过你的域名对外访问。

    <Steps>
      <Step title="进入项目设置">
        点击编辑器右上角的设置图标，选择 **Domain** 选项卡。
      </Step>

      <Step title="输入你的域名">
        填入想绑定的域名，按照页面提示完成配置即可。
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="导出项目">
    你可以随时将项目完整导出，部署到自己的服务器或其他云平台。

    点击编辑器右上角的 <Icon icon="download" /> 按钮下载项目。
  </Accordion>
</AccordionGroup>

***

## 5. 进阶阅读

<CardGroup cols={2}>
  <Card title="Magic Fusion 详解" icon="wand-sparkles" href="/zh/magic-fusion">
    深入了解 Magic Fusion 的三种模式与进阶用法
  </Card>

  <Card title="Prompt 指南" icon="message-circle" href="/zh/basics">
    Prompt 最佳实践、Debug 技巧与 Clone/Fusion 使用技巧
  </Card>
</CardGroup>