> ## 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.
# Magic Fusion
> 一键融合全网设计，让创意即刻落地
Magic Fusion 是 Step1.dev 的核心功能之一，让你通过**点选 + 自然语言**从任意网站提取设计元素，融合到自己的项目中——不需要任何设计或开发知识。
## 核心流程
### 步骤一：选择参考页面，激活 Fusion
在编辑器左侧的 **Assets（资产）** 面板中，找到你之前采集好的参考页面（例如 Raycast、Linear、Stripe 的官网页面）。
点击该资产卡片下方的 **Fusion** 按钮，告诉 AI 你想从这个页面"借用"某些设计。
还没有采集参考页面？先通过浏览器插件克隆目标网站，它会自动出现在 Assets 面板中。
### 步骤二：选取你想要的设计
屏幕弹出 **Magic Fusion** 交互窗口，完整呈现参考网页。
* **鼠标悬停**：系统自动识别并以**蓝框**高亮显示各个区域
* **点击选中**：目标区域变为**绿色**，表示已选中
* **融合整页**：点击 \*\*Fuse Page \*\*，AI会将整个网页作为参考对象
**选择技巧：**
* 可以选单个元素（如按钮、卡片、动画区块），也可以选整个页面区域
* 选择范围越精确，融合效果越可控
* 融合整页时，AI 会分析整站的风格、结构、配色等，但在分析具体元素时会没有单选精准
### 步骤三：告诉 AI 怎么用
点击 **Fuse Selection（融合选中内容）** 后，回到主编辑器，在 **AI 对话框**中用自然语言描述你想要的效果。
你不必照单全收——可以只提取某个视觉细节，也可以完整复用一个区块，或者只借用整体风格。放在哪里、保留什么、调整什么，说清楚即可。更多表达方式参考[下方章节](#你能用它做什么)。
案例指令示例：
* "只借用它的配色和字重，不要改变我现有的布局"
* "参考这个区块的卡片阴影和圆角，应用到我的产品列表"
### 步骤四：AI 自动完成融合
AI 会将选中的设计自动融入你的项目，并与现有的颜色、字体、排版风格保持一致。
### 进阶：精准融合到特定组件
默认情况下，Fusion 的效果会作用于整个项目。如果你只想把某个设计应用到页面上某一个具体的组件，可以结合 **Visual Edit** 来精确定位：
1. 先进入 Visual Edit 模式，在页面预览中点击选中目标组件（支持多选）。
2. 点击左下角的 **Fusion** 按钮，选择想要融合的对象。
3. 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 给你一份结构化的分析报告，你再按需挑选想融合的部分，做精准提取。
改版落地页，不确定往哪个设计方向走？
分别选几个参考网站做 Fusion，每次生成后回滚，再试下一个。几分钟内看到自己的页面在不同风格下的真实效果，不靠想象做决策。
描述越具体，效果越精准。可以直接说出你想要的效果名称，比如"这个区块的滚动渐隐效果"或"这个卡片悬停时的上浮动画"——AI 会准确定位并提取。
***
## 常见问题
可以。Step1.dev 直接提取页面设计（而非截图），因此动画、渐变、毛玻璃等视觉效果都能完整融合。
通常不需要。AI 会自动适配你项目的整体风格。如果效果不完全符合预期，在对话框中继续描述调整需求，或回滚版本重新尝试即可。
不会。参考页面仅用于本次融合操作，不会被存储用于其他用途。
***
## 进阶阅读
从克隆到融合的完整入门流程
Magic Fusion 使用技巧与最佳实践
