可视化编辑器
点击元素即可编辑文字、颜色、间距、字体等。适合小幅调整；较大改动请使用对话模式。
可视化编辑器让你通过点击界面元素并直接编辑其属性来修改应用的 UI。在 builder 工具栏中切换到 Visual 模式即可启用。
- 在工具栏中切换到 Visual 模式（与 Preview、Code、Dashboard 并列）
- 在预览区将鼠标悬停在元素上 — 元素会高亮显示覆盖层
- 点击元素以选中它
- 在侧边栏面板中编辑属性：文字、颜色、间距、字体、边框、图片、效果
更改会即时应用到预览，并写入你的源文件。使用侧边栏中的 Reset last edit 按钮可撤销上一次属性更改。
我能编辑哪些内容？
Section titled “我能编辑哪些内容？”- 文字 — 直接编辑文案
- 字体大小 — 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 元素和背景图片）
- 效果 — 阴影和透明度
撤销 / 重做
Section titled “撤销 / 重做”使用 Cmd+Z（Mac）或 Ctrl+Z（Windows）撤销更改，使用 Cmd+Shift+Z / Ctrl+Shift+Z 重做。
可视化编辑器会检查你的页面，并提取其中已使用的所有 Tailwind 颜色和 CSS 自定义属性。当你为选中元素打开颜色选择器时，可以从这个页面调色板中取色，从而与现有设计体系保持一致，无需手动猜测十六进制色值。
针对选中元素向 AI 提问
Section titled “针对选中元素向 AI 提问”对于属性编辑器无法表达的调整，可以在侧边栏底部的 Ask AI 输入框中输入简短提示。当前选中的元素会作为上下文传递给 AI，因此像*“让这个卡片更紧凑”或”添加一个带有轻微上浮效果的 hover 状态”*这样的提示无需额外说明指的是哪个元素。
静态元素与动态元素
Section titled “静态元素与动态元素”可视化编辑器最适合用于静态元素，即 JSX 中 className 和文字内容为字符串字面量的元素。对于动态元素（计算型 className、条件渲染、表达式），编辑器会自动回退到 AI 对话，并附带结构化提示。
什么时候应该使用可视化编辑器？
Section titled “什么时候应该使用可视化编辑器？”可视化编辑器最适合小幅、快速的调整：
- 修正错别字
- 调整间距
- 更改颜色
- 修改按钮文字
对于较大的改动（新增区块、调整布局结构、添加新功能），请使用 AI 对话模式。
如何保存更改？
Section titled “如何保存更改？”编辑属性后，更改会自动保存。文件会写入你的运行时环境，并在 AI 或你创建 commit 时提交。
可以撤销可视化编辑吗？
可以。使用 Cmd+Z / Ctrl+Z 撤销。可视化编辑器维护独立的撤销/重做栈。
为什么有些元素可以编辑，有些不能？
静态文字和 className 属性可以直接编辑。动态或计算型值（模板字面量、三元表达式、函数调用）会自动回退到 AI 对话。
可视化编辑器和代码编辑器有什么区别？
| 工具 | 最适合 |
|---|---|
| Visual Editor | 通过点击快速更改属性（文字、颜色、间距） |
| Code Editor | 使用 VS Code 进行完整源代码编辑 |
| AI Chat | 复杂改动、新功能开发、调试 |