核心流程
步骤一：选择参考页面，激活 Fusion
在编辑器左侧的 Assets（资产） 面板中，找到你之前采集好的参考页面（例如 Raycast、Linear、Stripe 的官网页面）。 点击该资产卡片下方的 Fusion 按钮，告诉 AI 你想从这个页面”借用”某些设计。还没有采集参考页面？先通过浏览器插件克隆目标网站，它会自动出现在 Assets 面板中。
步骤二：选取你想要的设计
屏幕弹出 Magic Fusion 交互窗口，完整呈现参考网页。- 鼠标悬停：系统自动识别并以蓝框高亮显示各个区域
- 点击选中：目标区域变为绿色，表示已选中
- 融合整页：点击 **Fuse Page **，AI会将整个网页作为参考对象
步骤三：告诉 AI 怎么用
点击 Fuse Selection（融合选中内容） 后，回到主编辑器，在 AI 对话框中用自然语言描述你想要的效果。 你不必照单全收——可以只提取某个视觉细节，也可以完整复用一个区块，或者只借用整体风格。放在哪里、保留什么、调整什么，说清楚即可。更多表达方式参考下方章节。案例指令示例：
- “只借用它的配色和字重，不要改变我现有的布局”
- “参考这个区块的卡片阴影和圆角，应用到我的产品列表”
步骤四：AI 自动完成融合
AI 会将选中的设计自动融入你的项目，并与现有的颜色、字体、排版风格保持一致。进阶：精准融合到特定组件
默认情况下，Fusion 的效果会作用于整个项目。如果你只想把某个设计应用到页面上某一个具体的组件，可以结合 Visual Edit 来精确定位：- 先进入 Visual Edit 模式，在页面预览中点击选中目标组件（支持多选）。
- 点击左下角的 Fusion 按钮，选择想要融合的对象。
- AI 会感知你选中的区域，把融合效果精准落在那个组件上，其余内容不受影响。
你能用它做什么
Magic Fusion 对目标网页的理解远不止”截图”——它能感知页面中所有可见与不可见的设计信息。你用自然语言告诉 AI 想要什么，它就帮你把那个东西精准地移植到你的项目里。 你描述得越具体，融合得越精准——可以细到一个按钮的边框效果，也可以宽到整个网站的视觉风格、布局结构。你可以提取什么
配色与视觉风格
配色体系、字体层级、圆角、阴影如 Stripe 的蓝紫渐变、Linear 的暗色规范
动画与微交互
按钮动效、卡片悬停、边框流光、入场动画如 Raycast 的 Hero 光晕、Linear 的阴影扩散
布局结构
多列网格、图文对称、Feature 卡片组如 Vercel 的三列 Grid、Notion 的交错区块
滚动与过渡
横向滚动轨道、边缘渐隐、滚动入场如 Apple 的视差、Raycast 的横滑插件展示
组件细节
毛玻璃导航、标签徽章、输入框聚焦如 Vercel 的顶栏、Stripe 的表单高亮
整体品牌调性
说不清楚但感受得到的整体设计语言如”Raycast 的暗色精致感”、“Notion 的克制留白”
能用在哪些场景
精确复刻你看上的某个效果
精确复刻你看上的某个效果
看到 Linear 的按钮有一圈发光边框动效，想用到自己的项目？选中那个按钮，告诉 AI：
“把这个按钮的边框发光动效融入我的 CTA 按钮，保持我的品牌色”AI 精确理解这个效果的实现方式，直接移植，不靠猜测重写。
把一个网站的整体风格迁移过来
把一个网站的整体风格迁移过来
想以 Stripe 的设计语言作为自己项目的视觉基础？选中整页，告诉 AI：
“提取这个页面的完整视觉风格——配色体系、字体层级、间距节奏，作为我项目的设计基础”AI 系统性地理解这套设计语言，整体迁移到你的项目中。
从多个网站各取所长
从多个网站各取所长
喜欢 Raycast 的动画质感，喜欢 Vercel 的配色，喜欢 Linear 的卡片布局？分三次 Fusion，每次从不同网站提取不同维度：
第一次：“把这里的配色风格应用到我的全站” 第二次：“把这组卡片的动画效果融入我的 Features 区，配色保持不变” 第三次：“把这个导航的布局结构和毛玻璃效果，替换我现有的导航”每次操作独立叠加，不会互相覆盖。
先让 AI 帮你扫描整个网站
先让 AI 帮你扫描整个网站
不确定一个网站有哪些值得借鉴的地方？先做整站概览：
“帮我分析这个网站的主要区块构成、有哪些可复用的组件，以及你认为最有设计亮点的几个细节”AI 给你一份结构化的分析报告，你再按需挑选想融合的部分，做精准提取。
快速在多个风格方向之间做决策
快速在多个风格方向之间做决策
改版落地页，不确定往哪个设计方向走？分别选几个参考网站做 Fusion，每次生成后回滚，再试下一个。几分钟内看到自己的页面在不同风格下的真实效果，不靠想象做决策。
常见问题
动画效果可以融合吗？
动画效果可以融合吗？
可以。Step1.dev 直接提取页面设计（而非截图），因此动画、渐变、毛玻璃等视觉效果都能完整融合。
融合后需要手动调整吗？
融合后需要手动调整吗？
通常不需要。AI 会自动适配你项目的整体风格。如果效果不完全符合预期，在对话框中继续描述调整需求，或回滚版本重新尝试即可。
参考网站的内容会被保存吗？
参考网站的内容会被保存吗？
不会。参考页面仅用于本次融合操作，不会被存储用于其他用途。