13.AI工作流（Agent）-衍挚资源站

什么是 Agent？

普通AI聊天：你问一句，AI答一句。

Agent：你说一个目标，AI自动拆解成多个步骤，一步步完成。

比如你说：”帮我规划去杭州的旅行”

Step 1：查杭州天气
Step 2：分析杭州景点
Step 3：生成3天行程
Step 4：给出穿搭建议

今天任务：智能旅行助手 Agent（30分钟）

效果：

输入目的地（比如”杭州”）
点击”开始规划”
页面显示多步骤工作流（Step 1 → Step 2 → Step 3）
最后输出完整旅行攻略

第 1 步：新建文件

Trae 里按 Ctrl + N

第 2 步：发需求给 AI

按 Ctrl + L，完整复制：

plain

我已经成功接入了Kimi API（模型kimi-k2.6，temperature:1）。
现在我想做一个"智能旅行助手Agent"，展示AI工作流：

界面布局：
1. 顶部标题"🌍 智能旅行助手"
2. 副标题"输入目的地，AI自动拆解多步骤为你规划旅行"
3. 一个输入框，提示"输入目的地，比如：杭州、成都、西安"
4. 一个红色按钮"开始规划"
5. 中间区域：显示工作流进度（Step 1 → Step 2 → Step 3），每个步骤有图标和状态（进行中/已完成）
6. 底部区域：显示最终生成的旅行攻略

工作流逻辑（3个步骤）：
Step 1：分析目的地特色
- 调用Kimi，提示词："请用50字介绍[目的地]的特色，包括著名景点、美食、气候特点"
- 显示状态："正在分析目的地..."

Step 2：生成行程规划
- 调用Kimi，提示词："请为[目的地]生成一个3天2夜的旅行行程，每天安排3-4个景点，包含交通建议和用餐推荐"
- 显示状态："正在规划行程..."

Step 3：给出旅行贴士
- 调用Kimi，提示词："请给出[目的地]的旅行贴士：最佳旅行时间、必备物品、避坑指南"
- 显示状态："正在整理贴士..."

技术要求：
- 用HTML/CSS/JS实现
- 3个步骤依次执行（等前一个完成再执行下一个），展示工作流概念
- 每个步骤的结果都显示在页面上
- API Key用变量存储，模型kimi-k2.6，temperature:1
- 风格保持粉色系、圆角、现代感
- 适配手机和电脑
- 每行代码加中文注释
- 给我完整代码，直接能运行

第 3 步：填 API Key，保存为 `travel-agent.html`

第 4 步：测试

输入”杭州”
看是否依次显示：
- Step 1：分析目的地… ✅
- Step 2：规划行程… ✅
- Step 3：整理贴士… ✅
最后显示完整攻略

第 5 步：加到主页，上传 GitHub

完成后你就理解了

表格

概念	你做了什么
Agent	AI自动拆解任务，多步骤执行
工作流	Step 1 → Step 2 → Step 3 的流水线
多轮调用	一个页面里连续调用3次AI