> ## Documentation Index
> Fetch the complete documentation index at: https://docs.meoo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 可视化修改

秒悟支持可视化页面编辑：圈选元素即可标注修改意图，通过自然对话指令（如“调大字体”“换背景色”）实时调整布局与样式；AI自动定位代码并修复语法错误，实现“所见即所得”的零门槛网页迭代，让非开发者也能精准控制前端细节。

## 1、第一步点击编辑

<Frame>
  <img src="https://mintcdn.com/alibaba-b47c397f/gtdh1P8HyRzTFXYK/images/ab784f4a9e9d1a0b98e24b444895bd0c.png?fit=max&auto=format&n=gtdh1P8HyRzTFXYK&q=85&s=a667094c2766bc3352f6c040c20bcf1b" alt="Ab784f4a9e9d1a0b98e24b444895bd0c" width="1653" height="886" data-path="images/ab784f4a9e9d1a0b98e24b444895bd0c.png" />
</Frame>

### 1.1 局部修改

秒悟支持「可视化 + 代码」双模修改：圈选元素可直观调整文本、样式、间距与背景；点击代码图标（\</>）则直接编辑底层源码。AI 实时同步视觉与逻辑，既满足设计师的所见即所得，也赋予开发者精准控制力，实现从界面微调到底层重构的无缝切换。

<Frame>
  <img src="https://mintcdn.com/alibaba-b47c397f/luaOOgYUX0K7_qew/images/image-83.png?fit=max&auto=format&n=luaOOgYUX0K7_qew&q=85&s=959c226bdb91c708f9dcd9a0744c6220" alt="Image" width="1180" height="788" data-path="images/image-83.png" />
</Frame>

### 1.2 圈选标注

秒悟支持「圈选即改」：用户只需框选目标区域，即可通过文字指令、手绘涂鸦标注或补充上下文信息，让AI精准理解并执行从内容替换到样式重构的复杂修改。

<Frame>
  <img src="https://mintcdn.com/alibaba-b47c397f/luaOOgYUX0K7_qew/images/image-84.png?fit=max&auto=format&n=luaOOgYUX0K7_qew&q=85&s=e94b911739ef74b9f065e2e9f6592555" alt="Image" width="1172" height="708" data-path="images/image-84.png" />
</Frame>

### 1.3 对话修改

秒悟「对话修改」功能：圈选页面元素后，在输入框中用自然语言描述需求（如“把数字改成红色”），一键发送即可由AI自动解析并生成对应代码变更，实现“说改就改”的智能交互体验。

<Frame>
  <img src="https://mintcdn.com/alibaba-b47c397f/gtdh1P8HyRzTFXYK/images/f92f7a4fae2d21b542ddfa1e2f70a1a4.png?fit=max&auto=format&n=gtdh1P8HyRzTFXYK&q=85&s=2671858544f488f39972fc0a91659fc9" alt="F92f7a4fae2d21b542ddfa1e2f70a1a4" width="1200" height="886" data-path="images/f92f7a4fae2d21b542ddfa1e2f70a1a4.png" />
</Frame>
