浏览器

打开项目内HTML文件

1. 在项目文件夹中，找到后缀为“.html”的文件。
2. 右键单击该文件，选择“在浏览器中预览”。
   图1 本地html预览
   

打开外部网页

1. 在顶部菜单栏单击“帮助”，选择“显示所有命令”。
2. 输入“browser”，单击“浏览器：打开集成浏览器”。
   图2 打开浏览器
   

3. 输入你希望打开的外部网页URL地址，然后回车，即可成功打开目标网页。

添加元素到对话窗口发起优化

1. 单击选择元素图标 ，选中目标元素后单击添加到对话图标 ，即可将该元素添加至对话窗口。
   图3 添加元素到对话窗口
   

2. 发送你的需求给AI，如“请将选中元素的字体颜色设置为蓝色”。

   操作完成后刷新页面，就能看到你选中元素的字体已变成了蓝色。

   图4 元素颜色变成了蓝色
   

快捷输入指令调节元素

1. 单击选择元素图标 ，选中目标元素后单击对话框图标 。
2. 输入优化关键词，单击发送图标 ，智能体就会根据你输入的提示词优化元素。
   图5 通过对话框发送优化指令
   

通过样式设置优化元素

1. 单击选择元素图标 ，选中目标元素后单击样式设置图标 。
2. 在样式面板中，按照你的需要修改元素样式。
   图6 样式设置
   

通过CSS检查器优化元素

1. 在打开的浏览器页签中，单击CSS检查器图标 。
2. 选中目标元素，随后在组件树和设计面板中修改该元素。
   • 在组件树中，将鼠标悬浮在目标元素上，单击右键，可复制、剪切、粘贴和删除元素。你也可以拖拽元素，将元素拖拽到其他组件树节点下。
     图7 在组件树中修改元素
     
   • 在设计面板中，您可以对元素进行可视化编辑，如调整位置、布局、文本、背景和边框等。也可以在CSS中，查看或编写对应的CSS样式规则。
     图8 在设计/CSS中修改元素
     

元素卡片布局美化

1. 在打开的浏览器页签中，单击选择元素图标 。
2. 将鼠标放在对应的元素上，单击“一键美化”，即可对选中元素进行布局美化。
   图9 一键美化元素
   

一键美化页面/项目

1. 在打开的浏览器页签中，单击一键美化图标 。
2. 选择“美化页面”或“美化项目”，就能自动优化当前页面或项目内所有页面的视觉效果。
   图10 一键美化页面或项目中所有页面
   

通过添加评论优化页面

通过添加评论，将样式优化需求精准绑定到对应元素。智能体基于评论指令执行局部优化，实现精准修改，显著降低沟通成本与返工率。

1. 在打开的浏览器页签中，单击评论图标 。
2. 框选您需要添加评论的内容，输入优化提示词，单击“添加评论”。

   系统会通过气泡方式暂存你的评论，鼠标悬停在气泡，可查看你的评论范围和内容。你也可以直接单击“立即提交”，智能体会根据你提交的评论，对页面进行优化。

3. 如果需要增加多条评论，请再次框选你需要添加评论的内容，输入优化提示词，单击“添加评论”。
   

   最多支持添加5条评论。

4. 评论添加完成后，单击“提交”，智能体即会根据你所添加的评论，对页面进行优化。
5. 如果需要批量取消暂存你的评论，请单击右上角的“取消”。若需撤销最近一次操作，可单击撤销按钮 。
   图11 通过评论对页面进行优化