Augment UI 怎么用？浏览器内编辑代码与 200 + 预设样式配置教程

? 【浏览器内编辑代码与 200+ 预设样式配置教程】

? 准备工作：快速上手 Augment UI

? 注册与登录

? 了解核心功能

• AI 设计辅助：你可以直接和系统聊天，告诉它你想要的设计效果，比如 “做一个响应式的登录页面，风格要简洁现代”，AI 会自动生成设计元素和代码。
• 浏览器内代码编辑：在右边的代码编辑区，你可以直接修改 HTML、CSS 和 JavaScript 代码，改完马上就能在中间的预览区看到效果，不用来回切换工具。
• 200+ 预设样式：左边的组件库里有各种现成的样式，像按钮、导航栏、表单这些，直接拖到编辑区就能用，还能根据自己的需求调整样式。
• 实时协作：点击右上角的 “邀请协作”，把链接发给团队成员，大家就能一起在同一个项目里工作，实时看到对方的修改，讨论设计方案特别方便。
• 版本控制：在项目设置里能看到版本历史，随时可以恢复到之前的某个版本，再也不用担心改乱了没法还原。

? 浏览器内编辑代码：零基础也能轻松搞定

? HTML 结构编辑

1. 添加组件：在左边的组件库里找到你需要的组件，比如 “按钮”，拖到编辑区。这时候右边的 HTML 代码里就会自动生成对应的标签。
2. 修改结构：直接在 HTML 代码里修改标签的属性，比如给按钮添加 class、id 或者 href 等属性。修改完保存，预览区马上就能看到变化。
3. 嵌套组件：如果需要更复杂的结构，比如在一个 div 里放多个按钮，可以手动在 HTML 代码里嵌套标签，或者直接在编辑区拖动组件进行嵌套。

? CSS 样式调整

1. 使用预设样式：选中编辑区的组件，左边的样式面板里会显示预设的样式选项，比如颜色、字体大小、边距等。点击预设样式就能直接应用，不用自己写 CSS 代码。
2. 自定义样式：如果预设样式不够用，可以在右边的 CSS 代码区手动编写样式。比如给按钮添加 background-color: #4CAF50; 来改变背景颜色，添加 border-radius: 5px; 来增加圆角效果。
3. 实时预览：修改 CSS 代码时，预览区会实时显示效果，方便你快速调整样式，直到满意为止。

? JavaScript 交互实现

1. 添加事件监听：在右边的 JavaScript 代码区，你可以给组件添加事件监听，比如点击事件、鼠标悬停事件等。例如，给按钮添加点击事件：
   javascript

   document.getElementById("myButton").addEventListener("click", function() {
     alert("按钮被点击了！");
   });
   
   
   
2. 调用 API：如果需要与后端 API 交互，可以在 JavaScript 代码里使用 fetch 等方法发送请求。例如：
   javascript

   fetch("https://api.example.com/data")
     .then(response => response.json())
     .then(data => console.log(data));
   
   
   
3. 调试代码：在 JavaScript 代码区有调试工具，你可以设置断点、查看变量值，方便排查代码中的问题。

? 200+ 预设样式配置：快速提升设计效率

? 预设样式分类

• 基础组件：按钮、输入框、导航栏、表单等。
• 布局样式：网格布局、Flex 布局、响应式布局等。
• 视觉效果：渐变、阴影、透明度、动画等。
• 字体样式：不同的字体、字号、字重等。
• 颜色方案：多种预设的颜色搭配，包括品牌色、中性色等。

✨ 应用预设样式

1. 选择组件：在编辑区选中需要应用样式的组件。
2. 浏览预设样式：在左边的样式面板里，点击不同的类别查看预设样式。例如，点击 “按钮样式”，会显示各种不同风格的按钮样式。
3. 应用样式：点击喜欢的预设样式，即可自动应用到选中的组件上。应用后，右边的 CSS 代码区会显示对应的样式代码，你可以进一步修改。

?️ 自定义预设样式

1. 修改样式属性：应用预设样式后，在左边的样式面板里可以修改各个属性的值，比如颜色、字体大小、边距等。修改时，预览区会实时显示效果。
2. 保存自定义样式：如果觉得修改后的样式很实用，可以点击样式面板右上角的 “保存” 按钮，将其保存为自定义预设样式，方便以后使用。
3. 导出样式：在项目设置里，可以将整个项目的样式导出为 CSS 文件，或者复制样式代码到其他项目中使用。

? 高级技巧：提升开发效率

? 代码片段复用

1. 创建代码片段：在编辑过程中，如果遇到常用的代码结构或样式，可以将其选中，点击右键选择 “保存为代码片段”。
2. 插入代码片段：在需要使用的地方，点击右键选择 “插入代码片段”，选择之前保存的片段即可快速插入。

? AI 辅助设计

1. 自然语言描述：在 AI 设计辅助输入框中，用自然语言描述你的设计需求，比如 “做一个红色的、带阴影的按钮，点击后跳转到首页”，AI 会自动生成对应的组件和代码。
2. 优化设计：如果对生成的设计不满意，可以继续与 AI 对话，提出修改要求，比如 “把按钮的圆角调大一点”“换一种颜色方案” 等，AI 会根据你的反馈进行优化。

? 响应式设计

1. 预览不同设备：在预览区顶部有设备选择按钮，点击可以切换不同的设备尺寸，如手机、平板、电脑等，查看设计在不同设备上的显示效果。
2. 媒体查询：在 CSS 代码区，可以手动添加媒体查询，针对不同的设备尺寸设置不同的样式，确保设计在各种设备上都能完美呈现。例如：
   css

   @media (max-width: px) {
     .container {
       flex-direction: column;
     }
   }
   
   
   

? 常见问题解答

❓ 为什么修改代码后预览区没有变化？

• 检查代码是否有语法错误，特别是 HTML、CSS 和 JavaScript 代码。如果有错误，浏览器控制台会提示。
• 确认是否点击了 “保存” 按钮，只有保存后修改才会生效。

❓ 预设样式不够用怎么办？

• 可以手动编写 CSS 代码进行自定义。
• 保存自定义样式为预设样式，方便以后使用。
• 到 Augment UI 的官方社区或资源库中查找更多样式。

❓ 实时协作时看不到其他人的修改怎么办？

• 检查网络连接是否正常。
• 确认是否在同一个项目中，并且已经接受了协作邀请。
• 刷新页面，重新加载项目。

❓ 如何恢复到之前的版本？

• 在项目设置中点击 “版本历史”。
• 选择需要恢复的版本，点击 “恢复” 按钮。

? 结语