本节我们将为 AI 零代码应用生成平台添加另一大核心功能 —— 可视化修改，让用户能够通过点击选择网页元素，结合 AI 提示词来精确修改生成的网站应用，更直观地对生成的网站进行个性化定制。
本节主要内容：
在前面的章节中，我们实现了对话历史和记忆功能，AI 已经能够基于历史上下文进行网站的迭代优化。但是用户在修改网站时，仍然需要通过文字描述来告诉 AI 要修改哪个部分，如果描述不清楚，AI 可能就会修改错误、或者造成额外的修改。
举个例子，用户生成了一个包含多个卡片的网站，现在想要修改其中某一个卡片的标题。如果只是说 “修改卡片标题”，AI 可能不知道要修改哪个卡片。即使用户详细描述 “修改第二个卡片的标题”，AI 也有可能理解错误。
因此，我们需要实现可视化修改功能，让用户能够直接点击网页上的元素，然后输入修改需求，AI 就能精确知道要修改的是哪个部分。
为了确认可视化修改的具体交互形式和实现方案，我们先来看看业界的一些成熟产品是如何实现这个功能的，比如美团 NoCode、百度秒哒。
美团的 NoCode 平台提供了两种修改方式：手动编辑和自动编辑。
在手动编辑模式下，用户点击元素后会立刻添加 style 样式来改变外观，同时会有绿色的框框显示影响范围。需要注意的是，它的选择器并不是完全精确的，可能会同时影响多个元素。
当用户点击应用按钮后，系统会重新渲染页面，我们可以发现 class 类名发生了变化，不再有临时的 style 属性，这说明后端进行了真实的文件修改。