使用指南
本指南详细介绍 Aeio Dev Agent 的各项功能和最佳实践，帮助您更高效地使用 AI 构建应用。
1. 会话管理
会话是组织开发项目的基本单位。每个会话都有独立的代码环境和文件系统。
创建会话
- 点击左侧边栏的"新建会话"按钮
- 输入会话标题（如"电商首页"、"个人博客"）
- 系统自动创建沙箱环境，包含默认的 index.html、style.css 和 script.js 文件
管理会话
- 重命名：点击会话标题旁的编辑图标修改名称
- 删除：点击删除图标移除不需要的会话（不可恢复）
- 切换：点击侧边栏中的会话快速切换
- 搜索：使用搜索框快速找到特定会话
2. AI 交互技巧
编写有效的提示词
好的提示词能显著提高代码质量和准确性：
- 明确目标："创建一个响应式登录表单，包含用户名、密码输入框和登录按钮"
- 指定样式："使用蓝色主题，添加圆角边框和悬停效果"
- 描述布局："左侧显示产品图片，右侧显示产品信息和购买按钮"
- 要求响应式："确保在移动设备上也能正常显示"
迭代优化
如果初次生成的代码不完全符合预期，可以继续对话：
- "将标题改为更大的字体"
- "添加一个阴影效果"
- "把按钮改为圆角样式"
- "调整布局，让图片在上方"
触发代码修改
使用以下关键词可以触发 AI 修改文件：
- "创建"、"做一个"、"生成" - 创建新组件或页面
- "修改"、"更改"、"调整" - 修改现有代码
- "添加"、"增加" - 添加新元素
- "删除"、"移除" - 删除元素
3. 沙箱文件操作
默认文件
每个新会话都会创建三个默认文件：
- index.html - 主 HTML 文件
- style.css - 样式表文件
- script.js - JavaScript 脚本文件
文件管理
- 查看文件：点击文件名查看内容
- 编辑文件：直接在编辑器中修改代码
- 创建文件：通过 AI 提示词创建新文件
- 删除文件：使用文件管理器删除不需要的文件
文件限制
- 单个会话最大 100MB
- 单个文件最大 1MB
- 支持 HTML、CSS、JavaScript、JSON 等文本格式
4. TODO 列表功能
AI 可以创建和管理任务列表，帮助您跟踪开发进度：
- 当您请求复杂功能时，AI 会自动创建 TODO 列表
- 完成后任务会自动标记为完成
- 您可以在侧边栏查看当前会话的所有任务
5. 公开分享功能
将您的会话分享给他人：
- 点击"分享"按钮生成公开链接
- 任何人都可以通过链接查看预览
- 分享是只读的，他人无法修改您的代码
- 您可以随时关闭分享功能
6. 高级功能
工具调用
AI 可以使用工具直接操作文件系统：
- 读取文件：查看现有文件内容
- 写入文件：创建或更新文件
- 删除文件：移除不需要的文件
- 列出文件：查看沙箱中的所有文件
实时预览
- 代码修改后自动刷新预览
- 支持移动端预览切换
- 独立全屏预览模式
- 预览页面可独立分享
7. 最佳实践
详细描述
提供尽可能详细的需求描述，包括样式、布局、交互等细节。
分步实现
将复杂功能分解为多个小步骤，逐步实现并验证。
检查代码
定期检查生成的代码，确保符合预期和安全标准。
学习基础
了解 HTML/CSS/JS 基础有助于更好地与 AI 沟通。
8. 常见使用场景
快速原型
在几分钟内创建产品原型：
- 落地页
- 产品展示页
- 表单页面
- 管理后台界面
学习编程
通过 AI 生成的代码学习 Web 开发：
- 查看 AI 如何实现特定功能
- 理解 HTML/CSS/JS 的实际应用
- 通过修改提示词学习不同的实现方式
快速迭代
在产品开发过程中快速验证想法：
- 测试不同的 UI 设计
- 验证交互流程
- 演示概念给团队或客户
9. 故障排查
预览不显示
- 检查是否有语法错误
- 确认 index.html 文件存在
- 尝试刷新预览页面
样式未生效
- 确认 CSS 文件已正确链接
- 检查选择器是否正确
- 验证 CSS 文件是否存在语法错误
AI 未按预期工作
- 重新描述需求，使用更具体的语言
- 分步骤实现复杂功能
- 提供示例或参考链接
10. 获取帮助
如果您遇到问题：