Visual Editor

点击元素即可编辑文字、颜色、间距、字体等。适合小幅调整；较大改动请使用对话。

Visual Editor 让你通过点击元素并直接编辑其属性来修改应用的 UI。在 builder 工具栏中切换到 Visual 模式即可启用。

工作原理

1. 切换到 Visual 模式 — 它是工具栏中 Preview 的子模式（工具栏分为 Preview 和 Admin 两段）
2. 在预览区悬停鼠标 — 元素会高亮显示覆盖层
3. 点击某个元素以选中它
4. 在侧边栏面板中编辑属性：文字、颜色、间距、字体、边框、图片、效果

更改会立即应用到预览区，并写入你的源文件。使用侧边栏中的 Reset last edit 按钮可撤销最近一次属性更改。

我可以编辑哪些内容？

• 文字 — 直接编辑文案
• 字号 — xs、sm、base、lg、xl 等
• 字重 — thin、light、normal、medium、semibold、bold、extrabold
• 字体家族 — Geist、Inter、Montserrat、Noto Serif、Geist Mono、Fira Code、JetBrains Mono
• 字体样式 — 斜体开关
• 文字对齐 — left、center、right、justify
• 文字颜色 — 任意 Tailwind 颜色
• 背景颜色 — 任意 Tailwind 颜色
• 间距 — 四边的 padding 和 margin
• 边框 — 宽度、颜色和圆角（适用于不含文字内容的容器元素）
• 图片 — 通过素材库搜索替换或上传你自己的图片（适用于 img 元素和背景图片）
• 效果 — 阴影和不透明度

撤销 / 重做

使用 Cmd+Z（Mac）或 Ctrl+Z（Windows）撤销更改，使用 Cmd+Shift+Z / Ctrl+Shift+Z 重做。

页面调色板

Visual Editor 会检查你的页面，并提取其中已使用的所有 Tailwind 颜色和 CSS 自定义属性。当你为选中的元素打开颜色选择器时，可以从页面调色板中取色，从而保持与现有设计系统的一致性，无需猜测十六进制色值。

针对选中元素向 AI 提问

对于属性编辑器无法表达的调整，可以在侧边栏底部的 Ask AI 输入框中输入简短的提示语。选中的元素会作为上下文传递，因此像 “让这张卡片更紧凑” 或 “添加一个带有轻微上浮效果的 hover 状态” 这样的提示无需你另外描述是哪个元素。

静态元素与动态元素

Visual Editor 最适合用于静态元素，即 JSX 中 className 和文字内容为字符串字面量的元素。对于动态元素（计算型 className、条件渲染、表达式），编辑器会自动降级为带结构化提示语的 AI 对话。

什么时候应该使用 Visual Editor？

Visual Editor 最适合小幅、快速的调整：

• 修正错别字
• 调整间距
• 更改颜色
• 修改按钮文字

对于较大的改动（新增版块、调整布局结构、添加新功能），请改用 AI 对话。

如何保存更改？

编辑属性时，更改会自动保存。文件会写入你的运行时环境，并在下一次 builder 提交时纳入你的版本历史。

常见问题

可以撤销视觉编辑吗？

可以。使用 Cmd+Z / Ctrl+Z 撤销。Visual Editor 维护独立的撤销/重做栈。

为什么有些元素可以编辑，有些不能？

静态的文字和 className 属性可以直接编辑。动态或计算型的值（模板字符串、三元表达式、函数调用）会自动降级为 AI 对话。

什么时候应该使用 Visual Editor 而不是 AI 对话？

工具	最适合场景
Visual Editor	通过点击快速修改属性（文字、颜色、间距）
AI Chat	复杂改动、新增功能、调试

这是修改应用的仅有两种方式 — 没有代码编辑器。详见编辑与访问你的代码。