> ## 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.
# Visual Edit
> 选择任意元素，精准编辑
Visual Edit 让你直接在页面预览中点击元素并描述改动——无需在对话框里费力说明"页面右上角那个按钮"。当你清楚知道要改什么、改哪里时，这是最直接的方式。
{/*
*/}
***
## 如何使用 Visual Edit
在编辑器左下角点击 **Design** 按钮，进入 Visual Edit 模式。
鼠标悬停时，可选区域会以**蓝框**高亮。点击后变为**绿色**，表示已选中。
你可以**连续点击多个元素**同时选中，系统会自动为每个元素分配编号（#1、#2……）。
选完元素后，在对话框中直接描述你想要的效果，用编号区分不同元素。多选让你能表达单个元素无法描述的操作——比如交换两个区块的位置、把一组横排卡片改成纵向堆叠、或让多个元素的样式严格对齐。
案例："把 #1 和 #2 左右互换；把 #3 #4 #5 从横排改为纵向堆叠，间距 24px"
点击 **Save**，AI 只修改你选中的部分，其余内容不受影响。
***
## 多元素联动调整
Visual Edit 支持多元素同时选中，解锁了跨元素的联动调整能力，以下场景都可以在一次描述中完成：
同时选中页面上的两个 Section（#1 Hero 区、#2 Features 区），描述：
> "把 #1 和 #2 的位置互换，其他内容不动"
适合快速验证不同的信息层级，比如先展示产品价值再讲功能，还是先讲功能再转化。
框选横排的一组 Feature Card（#1 #2 #3），描述：
> "把 #1 #2 #3 从三列横排改为单列纵向堆叠，卡片宽度撑满容器，间距 24px"
AI 把整组作为一个布局单元来重构，对齐和间距一次到位。
同时选中标题、副标题、CTA 按钮（#1 #2 #3），描述：
> "把 #1 #2 #3 的字色统一改为 #0F172A，#1 字重 700，#2 字重 400，#3 保持现有字重"
AI 拿到三个元素的完整上下文，一次生成一致的样式。
同时选中左侧图片和右侧文字块（#1 图片、#2 文字），描述：
> "把 #1 和 #2 左右互换，图片移到右边，文字移到左边，整体两列布局不变"
AI 理解这是一个图文对称结构，整体翻转，不破坏容器比例。
同时选中三张 Feature Card 的标题（#1 #2 #3），描述：
> "把 #1 #2 #3 的标题全部改写为动词开头的行动句，语气简洁有力，面向开发者"
AI 把三条作为一个内容组来处理，风格天然一致。
***
## Visual Edit 与 AI 对话的区别
| 场景 | 推荐方式 |
| -------------- | -------------------------------- |
| 知道要改哪个元素，改什么 | **Visual Edit** — 直接点选，精准描述 |
| 需要添加新功能或大幅调整布局 | **AI 对话** — 用自然语言描述整体需求 |
| 想融合其他网站的设计风格 | **Magic Fusion** — 点选参考设计 + 自然语言 |
***
## 进阶阅读
了解完整的创建、修改、发布流程
学会用 AI 对话实现更复杂的修改需求