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

​
1. 创建项目

Step1.dev 支持以下三种方式创建项目：
使用 Step1.dev 插件像素级克隆任意网站
克隆结果
1

安装浏览器插件

在 Chrome 应用商店安装 Step1.dev 插件，安装完成后插件图标会出现在浏览器工具栏。

安装 Step1.dev 插件

前往 Chrome 应用商店免费安装
2

在目标网站点击克隆

打开你想克隆的网站，点击工具栏中的 Step1.dev 插件图标，选择 Clone this page。
3

自动跳转到编辑器

抓取完成后点击 Remix，Step1.dev 会自动分析页面并跳转至编辑器，克隆版本即刻生成。
克隆结果
4

用自然语言进行修改

在 AI 对话框中描述你的需求，替换品牌内容（Logo、文案、配色）或添加新功能。
案例：“把导航栏的 Logo 替换为我们的品牌 Logo，将所有文案改为中文，主色调改为深蓝色”
适用场景：
  • 克隆竞品或参考网站作为设计起点
  • 对 v0 / Lovable / Bolt 等 AI 工具生成的站点进行设计升级
将你现有的网站通过浏览器插件导入 Step1.dev，在原有基础上继续开发，无需从零重建。
导入已有网站
1

打开你的现有网站

在浏览器中打开你想继续开发的网站。
2

使用插件克隆导入

点击 Step1.dev 插件图标，选择 Clone this page，页面会自动导入到编辑器中。
3

在原有基础上继续开发

在编辑器中对已有页面进行修改或扩展，用自然语言描述你的需求即可。
案例：“保持整体布局不变，把首页的卡片区域改成三列，并增加鼠标悬停动效”
适用场景：
  • 对现有网站进行改版升级
  • 将旧站迁移后融合新的设计风格
只会导入网页的 UI 样式，不包含任何功能逻辑与交互。
只需用自然语言描述你的构想，Step1.dev 便会直接生成网站。在主页输入框中描述你想要的网站：
案例：
  • “创建一个 SaaS 产品的 Landing Page，包含功能介绍、定价表和 FAQ”
  • “帮我做一个个人作品集网站，简洁现代，包含项目展示和联系方式”
使用建议：
  • 描述越具体，生成效果越好
  • 初次生成后可随时通过对话继续调整
  • 如果想提升设计质感，配合 Magic Fusion 融合喜欢的网站风格

​
2. Magic Fusion 设计融合

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

选择参考页面，激活 Fusion

在编辑器左侧 Assets 面板中，找到你之前采集的参考页面（如 Raycast 官网）。点击该资产卡片下方的 Fusion 按钮。
2

选取你想要的设计元素

Magic Fusion 窗口会完整呈现参考页面。鼠标悬停时，系统会自动识别并以蓝框高亮显示各个区域。点击选中后，选中区域变为绿色。
可以选中单个组件（如一组按钮、动画区块），也可以选中整个页面区域。
3

告诉 AI 如何融合

点击 Fuse Selection 后回到主编辑器。在 AI 对话框中描述你想要的效果——放在哪里、要不要调整颜色或大小。
案例：“把刚才选中的按钮组放到产品页 Hero 区域下方，保持动效，颜色改为品牌主色”
4

AI 自动完成融合

Step1.dev AI 会自主分析页面，并根据你描述的需求进行融合。
Magic Fusion 支持任意粒度的融合——从整体布局、视觉风格到微动效，只需用自然语言描述，AI 即可完成融合。
  • 组件融合：选中特定设计元素（按钮、动画、卡片等）融合到目标项目
  • 整站融合：选中整个页面，将其设计风格整体迁移到当前项目
  • 一键换肤：选择参考页面后，让 AI 直接将当前项目的视觉风格切换为参考风格
  • 把 Stripe 的渐变效果融入自己的落地页
  • 把 Linear 的动画应用到产品介绍页
  • 把 Notion 的简洁布局用于文档站点
  • 把 Glossier 的品牌质感迁移到客户的护肤品牌站

​
3. 优化与调整

只需描述你想新增的功能，Step1.dev 便会自动帮你实现。
案例：“帮我美化 UI，要求整体风格简洁、现代，风格接近 Notion”
直接在对话框中上传素材，并描述你想如何使用它。Step1.dev 会自动将图片添加到项目中。
案例：“帮我添加这个图片，作为首页的背景图”
如果对当前版本不满意，点击对话框右上角的 按钮或对应对话下方的 Restore 按钮，选择历史版本回滚重新开始。
当你不确定如何实现某个需求时，使用 Ask Mode 获取建议，不会对项目做任何修改。
  • 点击对话框右下角的 Ask 按钮进入 Ask Mode
案例：“如何实现日历拖拽调整日程时间的功能？“

​
4. 部署与发布

每次修改后，Step1.dev 会自动部署你的项目，无需任何操作。每个版本都会生成一个独立的可访问链接。
点击编辑器右上角的 按钮，复制链接发给外部用户预览。
链接始终指向最新版本，不需要每次更新后重新发送。
项目准备好对外展示后，点击编辑器右上角的 Publish 按钮正式发布。
发布链接不会随后续修改自动更新——每次有新版本需要对外生效时，需重新点击 Publish。
在项目设置中绑定你自己的域名，让网站通过你的域名对外访问。
1

进入项目设置

点击编辑器右上角的设置图标，选择 Domain 选项卡。
2

输入你的域名

填入想绑定的域名，按照页面提示完成配置即可。
你可以随时将项目完整导出，部署到自己的服务器或其他云平台。点击编辑器右上角的 按钮下载项目。

​
5. 进阶阅读

Magic Fusion 详解

深入了解 Magic Fusion 的三种模式与进阶用法

Prompt 指南

Prompt 最佳实践、Debug 技巧与 Clone/Fusion 使用技巧