一、功能特性
·即时渲染：代码修改后自动渲染运行效果，无需手动刷新。
·零配置：无需手动启动服务或切换工具。
·视觉优化：支持选择组件通过自然语言进行 UI 优化。
二、实时预览
有以下 两种方式 可以打开本地工程预览：
三、方式一：自动调用
在 Craft 模式下代码生成或修改执行完后，Agent 自动调用工具打开 Preview。
四、方式二：手动触发
·手动单击 Chat 面板右上角 预览 工具进行预览。
·或者手动输入 Prompt 来触发 Agent 打开预览，实时预览运行效果。
示例 Prompt：请打开预览，让我看看当前页面的效果
五、预览效果
预览效果如下：
六、AI 视觉优化
在预览页面中，你可以选择部分组件，并通过 自然语言 或 DOM 编辑器 对 UI 进行优化。
七、方式一：自然语言优化
1. 单击 AI 视觉优化 按钮。
2. 选择需要优化的组件，在下方输入框中输入修改意见：请把这个按钮改成蓝色背景。
3. 查看优化效果。如果还不满意，可以继续进行样式优化。
八、方式二：DOM 编辑器
你也可以使用 DOM 编辑器直接修改组件样式。
九、修复错误
单击 send errors，将错误发送到对话，由 AI 自动修复。
十、预览页面空白怎么办？
预览页面显示空白或无法正常加载时，可能由以下原因导致：
·代码存在语法错误：检查控制台是否有报错信息。
·依赖未正确安装：确认 node_modules 已安装，尝试重新执行 npm install。
·端口被占用或服务未启动：检查开发服务器是否正常运行。
解决方法：
·在对话中描述问题现象，例如输入"预览页面空白，请帮我排查问题"。
·如果预览窗口显示错误信息，单击 Send Errors 将错误发送给 AI 进行分析。
·尝试手动重新触发预览：单击 Chat 面板右上角的 预览 按钮，或输入"请重新打开预览"。