教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载导读本文基于 Datawhale / easy-vibe 项目 Stage 2 综合实战任务《智能旅游规划 Agent 平台开发实战》完整还原一个真实 PRD 驱动下的 AI 产品开发全过程从需求分析、系统架构确认到前端骨架搭建、Agent 编排层实现、数据模型与接口设计再到端到端联调与上线交付。读完本文你将掌握生成 → 保存 → 重用的 Agent 业务闭环构建方法并学会让大模型输出结构化、可编辑的行程数据而非一段不可操作的长文本。一、项目定位与核心挑战1.1 这个项目要做什么这是一个面向真实旅行规划场景的 AI 产品实战项目围绕一份真实的产品需求文档PRD从零构建一个智能旅游规划 Agent 平台。它的核心定义是——做一个可以生成、保存、调整与导出旅行计划的 Agent 编排平台。它不只是聊天机器人而是一个有任务管理能力的产品能够接收结构化输入出发地、目的地、日期、预算、偏好生成每日行程Day by Day Itinerary并支持保存、重新生成与导出。完整的需求文档位于仓库的 PRD.md状态 Draft v0.1。1.2 核心挑战结构化输出整个项目最关键的技术挑战只有一句话如何让 AI 生成结构化、可用的行程规划而不是一大段不可操作的文字。围绕这一挑战PRD 明确了一条硬性业务规则生成结果需要有结构化 JSON不能只返回自由文本。这意味着 Agent 编排层必须完成「接收输入 → 调用模型 → 解析结构化输出」的完整链路并将解析结果落库trip / itinerary / logs而不是把模型返回的 Markdown 直接渲染给用户。1.3 项目功能总览功能描述行程规划用户输入出发地、目的地、日期、预算和偏好系统生成每日行程预算拆分行程结果包含预算分配和建议总预算 每日预算历史管理用户可以保存历史计划、再次生成、导出管理后台管理员查看热门目的地、失败任务和用户反馈1.4 技术选型与站点入口来自 PRDPRD 给出的技术选型建议前端框架Next.js App Router配合 TypeScript、Tailwind CSS用户鉴权Supabase Auth数据库Supabase Postgres模型层统一后端服务调用大模型推荐 Node.js NestJS/Express可选缓存Redis做短缓存站点入口约定为三套官网前台www.xxx.com用户工作台app.xxx.com后台管理台admin.xxx.com二、前置知识与学习目标2.1 前置知识开始本项目之前应已掌握以下内容对应仓库中的配套课程前端页面设计与组件库使用UI 设计、现代组件库后端接口设计与开发接口代码编写数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 和 GitHub、部署 Web 应用2.2 学习目标完成本实战后你将能够阅读 PRD 并从中提取 Agent 平台的开发任务清单设计结构化的输入表单和结构化的输出格式实现 Agent 编排层处理用户输入、模型调用和结果存储构建生成 → 保存 → 重用的业务闭环完成端到端联调交付可演示的 AI 产品原型三、第一步需求分析阅读 PRD3.1 阅读 PRD 时必须回答的问题打开 PRD 文档后不要急着写代码先聚焦回答以下四个问题第一版是否只做单目的地行程输出是否必须结构化结构是什么按天含预算含时间导出能力做多深分享链接 / PDF / 图片后台统计和任务日志的范围是什么⚠️ 如果以上问题没有明确答案不要开始写代码。需求理解不清楚是导致返工的最常见原因。3.2 用 MVP 范围确认需求边界PRD 明确给出了第一版的范围边界这是需求分析阶段最重要的产出第一版必须包含规划表单页行程详情页历史计划页计划保存与重生成预算拆分导出文本/PDF 占位能力后台查看任务与失败日志第一版明确不做真正的机票/酒店预订多城市复杂路线联排实时票价与库存同步多人协同编辑多语言输出同时PRD 还锁定了关键业务规则第一版限制单目的地只支持3 到 7 天预算必须返回总预算与每日预算失败任务必须可重试生成结果必须有结构化 JSON。3.3 角色与权限角色权限普通用户创建计划、查看历史、导出、反馈管理员查看热门目的地、失败任务、用户反馈3.4 确认系统架构需求分析完成后需要和 PRD 给出的系统架构对齐确认数据流向PRD 中的系统总览则更为完整明确了外部依赖注意外部信息源天气/地图/POI在第一版属于可选增强且 PRD 要求外部信息源失败时要优雅降级——这是 Agent 平台与普通聊天应用的重要区别。四、PRD 中的产品设计页面架构与关键链路4.1 页面架构总览3 套入口8 个大页面PRD 将前端定义为3 套入口8 个大页面入口页面路径核心功能官网前台官网首页www:/产品介绍、典型使用场景、Demo 行程展示、CTA用户工作台登录页app:/login登录、注册入口用户工作台规划页app:/planner输入旅行需求、选择偏好与预算、发起规划任务用户工作台行程详情页app:/trips/:id查看每日行程、预算拆分、再次生成和导出用户工作台历史计划页app:/history查看历史计划、重新打开、重新生成用户工作台反馈与导出页app:/exports导出计划、提交反馈后台管理台后台首页admin:/热门目的地、任务成功率、失败任务数后台管理台任务与反馈页admin:/runs查看失败任务、用户反馈、排查异常计划4.2 关键用户链路4.3 关键状态流任务管理的基础PRD 定义了三个维度的状态机这是实现有任务管理能力的产品的核心规划任务待生成 → 生成中 → 成功 / 失败行程草稿 → 已保存 → 已导出反馈未处理 → 已查看 → 已关闭4.4 产品设计参考来自 PRD 的竞品拆解PRD 建议参考真实旅行规划产品如 Wanderlog的路线规划表达方式核心借鉴点包括输入后直接看到可编辑的每日行程而不是只返回一大段文本行程详情应突出日期、地点、预算、移动顺序和注意事项历史记录页应像我的行程库支持再次打开和二次生成后台页应强调热门目的地、失败任务和用户反馈而不是只看系统日志整体设计要体现行程产品感而不是聊天回答感由此各页面的定位应为规划页更像行程编辑台、详情页更像可执行 itinerary、历史页更像我的旅行库、后台页更像运营与任务中心。五、第二步搭建项目骨架5.1 用 AI 生成前端骨架这是整个项目中第一次使用 AI IDE 的场景。参考提示词如下可直接复制给 AI IDE请基于当前 PRD帮我生成一个智能旅游规划 Agent 平台的前端骨架。 要求 1. 页面包括首页、规划页、行程详情页、历史记录页、管理页 2. 规划页左侧是表单右侧是结果预览 3. 先只生成页面结构和假数据不接真实接口 4. 风格要像现代 AI 产品PRD 建议的前端关键组件包括旅行需求表单、任务进度状态条、Day by Day 行程卡片、预算拆分卡片、历史记录列表、错误重试与反馈组件。5.2 验证页面结构骨架生成后逐项检查规划页的表单字段是否与 PRD 一致出发地、目的地、日期、预算、偏好结果预览区域能展示结构化的行程数据历史记录页可以展示多条计划管理后台页可以展示统计数据六、第三步迭代开发逐模块推进6.1 七个开发模块按模块推进不要一次性铺开鉴权注册、登录Supabase Auth规划表单结构化输入出发地、目的地、日期、预算、偏好Agent 编排接收输入 → 调用模型 → 解析结构化输出结果展示行程按天展示、预算拆分、建议历史管理保存计划、再次生成、导出管理后台热门目的地、失败任务、用户反馈任务状态生成中 / 成功 / 失败的状态管理和错误记录6.2 数据模型设计PRD 建议的数据表PRD 给出了完整的表结构草案这是结构化输出落库的关键。五张核心表如下trip_plans ( id uuid primary key, user_id uuid, origin text, destination text, start_date date, end_date date, budget numeric, preferences jsonb, pace text, status text, created_at timestamptz ) itinerary_days ( id uuid primary key, trip_plan_id uuid, day_index int, title text, summary text, day_budget numeric ) itinerary_items ( id uuid primary key, itinerary_day_id uuid, start_time text, end_time text, place_name text, category text, notes text, estimated_cost numeric ) planner_runs ( id uuid primary key, trip_plan_id uuid, provider text, latency_ms int, status text, error_message text, created_at timestamptz ) trip_feedback ( id uuid primary key, trip_plan_id uuid, user_id uuid, score int, comment text, created_at timestamptz )从表结构可以看出三层数据模型的设计思路trip_plans记录一次规划请求的输入与总体状态preferences用jsonb存储pace表示节奏如 standarditinerary_days / itinerary_items用day_index和父子外键表达按天分组的行程条目每个条目含时间、地点、类别、备注和预估花费——这就是结构化输出落库后的最终形态planner_runs记录每次模型调用的运行日志provider、latency_ms、error_message是后台失败任务排查的数据来源trip_feedback记录用户反馈评分与评论支撑后台的用户反馈面板。对应的后端模块划分为auth、trip-plans、planner、exports、admin、feedback。6.3 接口草案PRD 定义了核心接口清单方法路径说明POST/api/trips/plan创建新的规划任务GET/api/trips/:id获取计划详情POST/api/trips/:id/regenerate按原条件重新生成PATCH/api/trips/:id/preferences更新偏好后重算GET/api/history获取历史计划列表POST/api/trips/:id/export导出行程POST/api/trips/:id/feedback提交用户反馈GET/api/admin/planner-runs获取生成日志POST /api/trips/plan请求示例{ origin: 上海, destination: 成都, startDate: 2026-05-01, endDate: 2026-05-04, budget: 3500, preferences: [美食, 历史文化], pace: standard }注意该请求体与trip_plans表结构一一对应Agent 编排层要做的事情就是接收该 JSON → 组装提示词调用模型 → 把模型返回的结构化 JSON 校验后写入itinerary_days/itinerary_items→ 在planner_runs中记录本次调用的状态与耗时。6.4 模块自检每个模块完成后用下表自检检查项验证方法输入完整性表单字段是否与 PRD 一致输出结构化行程结果是不是结构化数据而非一大段文字数据一致性trip、itinerary、logs 数据是否对得上闭环验证是否能演示输入 → 生成 → 保存 → 再次生成七、第四步联调与上线7.1 端到端测试至少验证以下三个场景输入行程参数 → 生成每日行程 → 查看预算拆分 → 保存到历史从历史记录中再次生成行程管理员查看任务统计和失败日志7.2 非功能要求PRD 明确的工程底线规划结果要有稳定的结构化 JSON长任务必须有状态反馈对应待生成 → 生成中 → 成功/失败状态流外部信息源失败时要优雅降级导出失败可重试移动端至少可查看详情和历史计划7.3 后台指标与监控后台至少需要展示这些指标日规划任务数规划成功率平均生成耗时热门目的地排行用户反馈评分分布导出次数基础监控建议覆盖模型调用成功率、外部信息源失败率、任务重试次数、数据库存取耗时。7.4 开发顺序建议来自 PRD规划页表单与 mock 结果创建计划与详情接口历史记录与重生成导出与反馈管理后台日志页八、交付物与评分标准8.1 交付物清单完成本项目后需要提交可访问的线上演示链接源码仓库链接含 READMEPRD 文档核心页面截图规划页、行程详情页、历史记录页、管理后台60 秒演示视频8.2 评分标准维度基本要求进阶要求PRD 对齐页面、功能、数据结构基本符合 PRD能清晰说明设计决策产品闭环规划 → 保存 → 历史 → 重生成可跑通支持导出和分享输出质量行程结果结构化且可读预算拆分合理、建议有针对性后台能力任务统计和失败日志可查看有热门目的地分析工程完整度前端、后端、数据库、模型调用链路已接通任务状态管理完善错误可追溯九、参考资料本项目在 easy-vibe 仓库中的配套资料与前置课程本任务文档智能旅游规划 Agent 平台开发实战PRD 需求文档PRD.mdUI 设计使用现代组件库更新你的界面从数据库到 Supabase大模型辅助编写接口代码与接口文档Git 和 GitHub 工作流如何部署 Web 应用赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐easy-vibe 实战智能旅游规划 Agent 平台全栈开发指南——从 PRD 拆解到可演示 AI 产品落地easy vibe 实战智能旅游规划 Agent 平台全栈开发指南——从 PRD 拆解到可演示 AI 产品落地 本指南以 easy vibe 课程 Stage教程文档人工智能Vibe Coding从 PRD 到可演示的 AI 产品Easy-Vibe Stage 2 实战——构建智能旅行规划 Agent 平台从 PRD 到可演示的 AI 产品Easy Vibe Stage 2 实战——构建智能旅行规划 Agent 平台 本篇实战指南来自 Easy Vibevib教程文档人工智能Vibe Codingeasy-vibe 实战从 PRD 到可演示的智能旅行规划 Agent 平台easy vibe 实战从 PRD 到可演示的智能旅行规划 Agent 平台 导读 本篇文章基于 easy vibe 课程第二阶段Développement教程文档人工智能Vibe Coding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考