从零开始，不写一行代码，制作一款 AI 旅行规划助手

从零开始，不写一行代码，制作一款 AI 旅行规划助手

在当今数字化时代，AI 技术已经深入到我们生活的方方面面，旅行规划也不例外。今天，我将带领大家从零开始，不写一行代码，制作一款简单实用的 AI 旅行规划助手。
在线演示
github项目地址

一、项目背景与目标

随着人们生活水平的提高，旅行已经成为一种常见的休闲方式。然而，旅行规划往往需要耗费大量的时间和精力，尤其是对于那些没有经验的旅行者来说，如何制定一个合理的行程是一个难题。AI 旅行规划助手的出现，可以大大简化这一过程，帮助用户快速生成个性化的旅行计划。

本项目的目标是制作一款简单实用的 AI 旅行规划助手，用户只需输入旅行目的地和天数，即可生成一份详细的行程草案。整个过程无需编写代码，通过借助 AI 工具和平台，实现快速开发和部署。

二、工具与技术选型

在本项目中，我们将使用以下工具和技术：

1. DeepSeek：用于生成网页制作提示词，帮助我们快速搭建页面结构和设计。
2. Cursor：一款 AI 编程助手，能够根据提示词自动生成代码，大大提升开发效率。
3. DeepSeek 和 Moonshot API：用于接入 AI 模型，实现旅行规划的核心功能。

三、详细制作步骤

（一）使用 DeepSeek 生成页面提示词

1. 访问 DeepSeek：打开 DeepSeek 网站。
2. 输入需求：在对话框中输入以下内容：

   我想做一个“AI 旅行规划助手”网页，功能为根据用户填写的旅行目的地和天数生成行程草案。页面要足够现代化且美观。请给我这个网页的制作提示词，我把提示词喂给 Cursor 后能够直接生成我想要的页面样式。
   

3. 获取提示词：DeepSeek 会生成一份详细的提示词，您可以根据需要截取部分内容。以下是一个示例：

   创建一个现代化 AI 旅行规划助手页面，采用以下设计规范：
   
   - 页面结构：
     - 顶部导航栏：品牌名称 + 渐变文字（#2AABEE → #1B8CD1）
     - 输入区：居中卡片布局，包含：
       - 浮动标签表单（目的地输入框 + 天数选择器）
       - 渐变按钮（生成行程 → 100% 宽度移动端适配）
     - 结果区：平滑展开的行程卡片组（每日行程带时间轴设计）
   
   - 视觉风格：
     - 配色方案：主色 #1B8CD1 / 辅色 #2AABEE / 背景 #f8f9fa
     - 字体：Inter 字体族（Google Fonts 引入）
     - 阴影：卡片使用多层阴影（box-shadow: 0 8px 32px rgba(0,0,0,0.1)）
     - 交互动画：按钮悬停缩放 (transform: scale(1.02))，表单聚焦边框流光效果
   
   - 响应式布局：
     - 桌面端：最大宽度 1280px 居中，卡片两列栅格布局
     - 移动端：表单元素 100% 宽度，卡片堆叠显示
     - 断点处理：使用 CSS Grid + Flexbox 实现自适应
   
   - 交互细节：
     - 加载状态：骨架屏加载动画（使用 css animation）
     - 错误提示：顶部下滑通知条（背景 #fee2e2）
     - 成功反馈：生成按钮触发表单收缩动画
     - 结果卡片：悬停抬起效果 + 复制按钮交互
   
   - 技术实现：
     - HTML 结构：语义化标签（<main> <section>）
     - CSS 方案：Tailwind CSS 框架 + 自定义样式层
     - 图标系统：Font Awesome SVG 图标
     - 动效实现：纯 CSS transitions + @keyframes
   
   - 附加优化：
     - 暗黑模式支持（通过 CSS 变量实现）
     - 首屏加载性能优化（critical CSS 内联）
     - 表单验证微交互（即时验证提示）
     - 滚动触发的渐现动画（Intersection Observer）
   

（二）使用 Cursor 生成网页

1. 创建 .cursorrule 文件：在项目根目录下创建一个 .cursorrule 文件，用于定义 Cursor 的行为规则。以下是一个示例：

   # Role
   你是个具有优秀编程习惯的 AI，但你也知道自己作为 AI 的所有缺陷，所以你总是遵守以下规则：
   
   ## 架构选择
   1. 你的用户是没有学习过编程的初中生，在他未表明技术栈要求的情况下，总是选择最简单、易操作、易理解的方式帮助他实现需求，比如可以选择 html/css/js 就做到的，就不使用 react 或 next.js 的方式；
   2. 总是遵守最新的最佳实践，比如撰写 Next.js 项目时，你将总是遵守 Next.js 14 版本的规范（比如使用 app router 而不是 pages router），而不是老的逻辑；
   3. 你善于为用户着想，总是期望帮他完成最省力操作，尽量让他不需要安装新的环境或组件。
   
   ## 开发习惯
   1. 开始一个项目前先读取根目录下的 readme 文档，理解项目的进展和目标，如果没有，则自己创建一个；
   2. 在写代码时总是有良好的注释习惯，写清楚每个代码块的规则；
   3. 你倾向于保持代码文件清晰的结构和简洁的文件，尽量每个功能，每个代码组都独立用不同的文件呈现；
   4. 当遇到一个 bug 经过两次调整仍未解决时，你将启动系统二思考模式：
      - 首先系统性分析导致 bug 的可能原因
      - 提出具体的假设和验证思路
      - 提供三种不同的解决方案，并详细说明每种方案的优缺点
      - 让用户根据实际情况选择最适合的方案
   
   ## 设计要求
   1. 你具有出色的审美，是 apple inc. 工作 20 年的设计师，具有出色的设计审美，会为用户做出符合苹果审美的视觉设计；
   2. 你是出色的 svg 设计师，当设计的网站工具需要图像、icon 时，你可以自己用 svg 设计一个。
   
   ## 对话风格
   1. 总是为用户想得更多，你可以理解他的命令并询问他想要实现的效果；
   2. 当用户的需求未表达明确，容易造成误解时，你将作为资深产品经理的角色一步步询问以了解需求；
   3. 在完成用户要求的前提下，总是在后面提出你的进一步优化与迭代方向建议。
   

2. 使用 Cursor 生成代码：打开 Cursor，将 DeepSeek 生成的提示词复制粘贴到输入框中，按下 Ctrl+I 打开 COMPOSER，选择 claude-3.7-sonnet 以及 agent 模式，提交提示词。Cursor 将根据提示词生成相应的代码。

（三）接入 API

1. 选择 API：我们推荐使用 DeepSeek 和 Moonshot 的 API。根据需求选择合适的 API，并获取相应的 API 密钥和基础 URL。
2. 配置 API：在项目中配置 API 密钥和基础 URL。以下是一个示例：

   接入 DeepSeek：key: sk-cc80caa1c04844efb15324d359axxxx
   base_url: https://api.deepseek.com/v1
   
   接入 Moonshot：key: sk-BEVbvTROZVQzpxkRgRzVEp6zMRdQF9avyOaudiuRaxxxxx
   base_url: https://api.moonshot.cn/v1
   

3. 测试功能：完成 API 配置后，测试旅行规划功能是否正常工作。如果遇到问题，可以根据错误提示进行调试。

四、优化与迭代

1. 性能优化：通过优化代码结构、减少资源加载时间等方式，提升网页的加载速度和响应性能。
2. 用户体验优化：根据用户反馈，进一步优化页面设计和交互效果，提升用户体验。
3. 功能扩展：根据需求，可以考虑添加更多功能，如用户登录、行程分享、个性化推荐等。

五、总结

通过以上步骤，我们成功制作了一款简单实用的 AI 旅行规划助手。整个过程无需编写代码，借助 DeepSeek 和 Cursor 等工具，大大提升了开发效率。希望本教程对大家有所帮助，也欢迎大家提出宝贵的意见和建议。