TrailAI
作者小民类型Prompt
作品介绍
TrailAI 是一款 AI 驱动的智能徒步路线规划平台，致力于让城市户外出行更安全、更绿色、更高效。用户只需输入起点与终点，AI 即刻生成三条差异化路线：地铁快线（最快）、公交徒步线（最省钱）、打车徒步线（舒适），每条方案包含详细的时间、距离、费用及分段导航，并标注 AI 推荐最优选择。同时提供天气风险提示与环保评分，帮助用户在出行前全面评估。适用于城市通勤、周末郊游、户外徒步等场景。采用深色户外科技风 UI，结合 Canvas 路线可视化与 Glass Morphism 设计，交互流畅，支持一键部署至 Vercel。
Prompt 内容
所有作品均通过 EdgeOne Makers Skill 生成并部署，具备CDN加速、安全防护能力，可按需接入后端服务。获取 Prompt 或 Skill后，在WorkBuddy中按指引操作（含 EdgeOne Makers Skill 安装步骤等），即可生成并上线你的同款网站。
你是一个资深全栈工程师 + 产品经理 + UI设计师，请帮我从0到1完成一个网站项目。
## 一、项目目标
我要做一个网站，名称是：【填写名称】
核心用途是：【比如：AI徒步路线规划 / 旅行攻略 / 工具网站 / 展示站】
目标用户：
【描述用户是谁，比如：户外爱好者 / 留学生 / 上班族】
核心价值：
【这个网站解决什么问题】
---
## 二、核心功能（非常重要）
请帮我设计并实现以下功能：
1. 【功能1，例如：输入目的地 → 自动生成3条徒步路线】
2. 【功能2，例如：展示时间 / 距离 / 花费预算】
3. 【功能3，例如：路线对比 + 推荐最佳路线】
4. 【功能4，例如：AI生成出行建议 / 注意事项】
5. （可选）用户交互：
- 登录 / 收藏 / 历史记录
---
## 三、页面设计（UI/UX）
请帮我设计一个“高级感、科技感”的界面：
页面包含：
- 首页（Hero区 + 输入框）
- 结果展示页（路线卡片形式）
- 详情页（展开路线细节）
UI风格参考：
【例如：Apple风 / 极简 / 户外自然风 / 科技感】
要求：
- 响应式设计（支持手机 + PC）
- 卡片式布局
- 有动效（hover / 渐变 / loading）
---
## 四、技术要求（让AI自动选）
请你自行选择最合适的技术栈，但优先考虑：
前端：
- React / Next.js（优先）
- TailwindCSS（UI）
后端（如需要）：
- Node.js / Serverless API
其他：
- 可直接部署（Vercel / Netlify）
---
## 五、输出内容（必须完整）
请一步一步输出：
1️⃣ 产品结构说明（信息架构）
2️⃣ 页面线框描述
3️⃣ UI设计说明
4️⃣ 完整前端代码（可运行）
5️⃣ （如需要）后端接口代码
6️⃣ 部署步骤（小白也能看懂）
---
## 六、额外增强（加分项）
请尽量加入：
- AI能力（如调用OpenAI API生成内容）
- Loading 动画
- 用户体验优化（错误提示 / 空状态）
- SEO优化
---
## 七、风格要求
- 专业但简洁
- 代码可直接运行
- 不要省略关键部分
- 所有文件结构清晰标注
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.感谢支持
如果你觉得这些作品很酷，给我们的 Github 仓库一个 Star