> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 建立旅游规划网页应用程序

> 逐步示范如何使用 superun 建立一个由 AI 驱动的旅游规划 Web App.

## 1. 建立项目基础

每个 superun 项目的基础都是一段清楚的提示.以下我们会建立一个由 AI 驱动的旅游规划工具.

**范例提示**

> 建立一个 AI 旅游规划 Web App,具备以下功能:
> • 包含首页,行程仪表板,以及行程细节页.
> • 可输入目的地,日期,预算与旅游偏好.
> • AI 产生的行程建议,包含饭店,活动与餐厅推荐.
> • 用户帐号与已储存行程,后端由 Supabase 支持.
> • 干净,支持桌机与手机的响应式界面.

当 superun 产生出初版项目后:

* 检查导览流程（首页 → 仪表板 → 行程细节）.
* 确认每个页面大致符合你在提示中的意图.
* 如果有区块缺少,语气不对,可以回头微调提示.

> ℹ️ **小技巧**\
> 在提示中明确说明要先从 UI 开始.越早把导览结构,页面类型与目标用户讲清楚,superun 产生的结果就越接近你想要的产品.

***

## 2. 精炼问题:把想法变成产品蓝图

送出初始提示后,superun 会问你一小串追问问题,\
用来把你的想法转成更精确的产品蓝图.

你可能会看到像这样的问题:

* **有哪些产品的体验是你想参考的?**\
  例如:
  * Linear（干净,快速的仪表板）
  * Notion（直觉,结构清楚的工作空间）
  * Airbnb（视觉友善的订房流程）

* **你的产品在市场上的独特之处是什么?**\
  可能的选项:
  * AI 驱动的规划或推荐
  * 即时监控或提醒
  * 完整的分析与报表体验
  * 与用户既有工具的深度整合

* **这个初版（MVP）应该包含哪些功能?**\
  对 AI 旅游规划工具来说,你可以选择:
  * 仪表板 + 行程列表 + 分析
  * 仪表板 + 多行程总览 + 筛选器
  * 仪表板 + 协作工具 + 通知

你的回答会影响:

* UI 的语气与风格
* superun 要帮你生成的核心页面与模组
* 会建立哪些资料模型与后端结构
* 产品中哪些地方会使用 AI 与自动化

> ℹ️ **为什么这很重要**\
> 把这一步当成一次快速的产品访谈.回答得越具体,诚实,superun 的输出就越贴近你心中的产品.

***

## 3. 使用设计选项（Design Options）选择方向

在你决定最终版面之前,superun 会先帮你探索多种视觉方向.

完成提示与精炼问题后:

1. superun 会为你的 App 产生 **四个设计选项**.
2. 每个选项都会有 **预览图片**,呈现整体版面与风格.
3. 打开每张预览,比较字体,留白,层级与资讯布局.
4. **选择一个分支** 作为后续的主要设计方向.
5. 若之后更新了提示,也可以重新产生新的设计选项.

你可以利用不同分支测试同一个产品的不同气氛:

* 极简,以生产力为主的界面
* 亲切,偏消费者风格的界面
* 大胆,强调行销的界面
* 精简,以仪表板为主的界面

> ℹ️ **小技巧**\
> 在探索不同分支时,尽量保持提示内容大致相同,这样你比较的是「视觉与版面」,而不是完全不同的一组功能.

***

## 4. 设计与编辑界面（Editable Design 与 Boxify）

superun 采用循序渐进的设计流程,有点像盖房子.

**先搭好骨架**

* superun 会先铺好主结构:
  * 首页 Hero 区块,价值主张,行动呼吁（CTA）
  * 行程搜索与筛选
  * 已存储行程的仪表板
  * 行程细节检视页
  * 帐号或设定页

**再加上第一层细节**

* superun 会填入基本元件:
  * 卡片,按钮,表单,导览列
  * 行程,目的地,偏好的假资料
  * 一致的留白与版面规則

**最后微调细节**

* 调整字体,颜色,间距与图片.
* 修改文案,让语气符合你的品牌（例如「旅游教练」vs「商务行程管理」）.

当你准备好微调特定区块时,可以切换到 **Editable Design**:

* 页面会在 superun 内变成可互动的画布.
* 你可以点选标题,段落,区块与卡片,直接编辑内容或结构.

接着使用 **Boxify** 进行精准的 AI 编修:

1. 在想要修改的区域画出一个框（例如 Hero 区,行程卡片网格）.
2. 输入提示,例如:
   * 「把这个 Hero 改成更高级,旅游社风格.」
   * 「把这些卡片改成不同预算的 3 天行程范例.」
3. superun 只会更新框选范圍,其余区块保持不变.

> ℹ️ **最佳实务**\
> 把 Editable Design + Boxify 当成「精修工具」,一次只调一个区块,而不是每次都重写整段提示.

***

## 5. 功能清单（Feature List）

在背景中,superun 会读取你的提示与精炼问题的回答,在 **建构（Build）** 里产生一份针对这个 App 的 **功能清单**.

以 AI 旅游规划工具为例,功能清单可能包含:

* ✅ 即时行程搜寻与筛选
* ✅ AI 产生的行程建议（饭店,活动,餐厅）
* ✅ 已储存行程与最爱清单
* ✅ 用户登录与个人文件
* ✅ 行程分析（预算分配,时间配置等）
* ✅ 提醒通知或 Email Hooks
* ✅ 未来串接订房或行事历服务的整合挂钩

superun 会根据这份清单:

* 建立对应的 **UI 模组**（行程卡片,时间轴,分析区块）.
* 定义初始 **资料库结构**（用户,行程,目的地,AI 建议…等资料表）.
* 配置基本 **后端 API** 与服务绑定.
* 决定 **AI 呼叫** 的位置与结果如何呈现.

> ℹ️ **小技巧**\
> 如果觉得功能清单太重或太轻,可以直接跟 superun 说:
> 「做一个只包含行程搜寻 + AI 行程 + 储存行程的 MVP 就好」,
> 或「帮我加上付费方案,团队工作空间与协作功能,做成 Pro 版」.

***

## 6. 使用 Supabase 建立后端与登录

当 UI 与功能清单都差不多时,就可以连接后端了.

1. 建立 **Supabase** 帐号并开一个新项目.
2. 在 superun 中使用 **Supabase 整合** 连结你的项目.
3. superun 会根据功能清单帮你产生 SQL 资料表,例如:
   * `profiles`:存储用户资讯与偏好设定
   * `trips`:与每位用户绑定的行程资料
   * 选用的 `destinations`,`ai_suggestions`,`favorites` 等表

superun 也可以帮你设定基本的认证流程:

* 注册,登录,登出
* 重设密码
* 只允许登录用户访问仪表板与行程页面

> ℹ️ **安全提示**\
> 在 Supabase 中启用数据列层级安全（Row-Level Security, RLS）,确保用户只能看到自己的行程.superun 可以产生合理的预设策略,之后你也可以再细调.

***

## 7. 使用 superun AI 加入智能规划

这个 App 的核心价值在于 AI 产生的旅游行程.

加入 AI 功能的步骤:

1. 在帐号后台取得 **superun API 金钥**.
2. 将金钥设定为项目环境变数,或通过 AI 设定面板绑定.
3. superun 会把这个金钥挂到功能清单中定义好的 AI 流程上.

常见的 AI 流程:

* **建立行程**
  * 输入:目的地,日期,兴趣,预算.
  * 输出:含天数,时间,活动与备注的结构化行程.

* **优化既有行程**
  * 例如:
    * 「把这趟旅程改成更适合亲子.」
    * 「强调美食体验.」
    * 「缩短成 3 天周末行程.」

* **摘要与分享**
  * 产生适合 Email,讯息或内部备忘录使用的短版摘要.

为了让结果更稳定,可以要求使用结构化回传:

* 让 superun 以 JSON Schema 呼叫模型,回传包含 `day`,`time`,`location`,`description` 等栏位的资料.
* superun 接着可以把这些资料直接写入 Supabase 资料表.

> ℹ️ **测试建议**
> 先从简单的情境开始,例如邻近城市的 2 天行程.确认结构与栏位 OK 之后,再扩展到更长天数与复杂需求.

***

## 8. 使用 Stripe 建立付费方案

如果你想让旅游规划工具变现,可以加上订阅或付费级别.

1. 建立 **Stripe** 帐号.
2. 建立一个产品,例如:「superun Travel Planner Pro – US\$12/月」.
3. 在 superun 中设定 Stripe 凭证与价格 ID.
4. 把 App 中的升级区块或定价页面接到 Stripe Checkout.
5. 将特定功能（例如不限次数的 AI 行程,团队空间）只开放给付费用户.

你也可以启用 Stripe 内建的用户工具:

* 订阅管理用的 Customer Portal
* 收据与发票 Email
* 测试模式,用来安全测试交易流程

> ℹ️ **小技巧**\
> 先在 Stripe 的测试模式下,使用官方提供的测试卡号反复验证流程,再切换到正式环境.

***

## 9. 测试与除错

开发过程中出错是正常的,superun 的目标是让你更快排除问题.

* 当建置失败时,可以使用 **「Auto Fix」**,让 superun 读取错误并提供导引修复.
* 后端若有错误,检查 **Supabase 日志**,确认资料表,策略与环境变数与 superun 设定一致.
* 若是部署问题,查看主机服务（例如 Netlify,Vercel）的日志,把关键错误讯息贴回 superun 要求协助.

你也可以:

* 端到端测试核心流程:注册 → 建立行程 → 产生行程 → 储存与编辑.
* 请和事或朋友实际操作,回报任何不顺手或不清楚的步骤.

> ℹ️ **回复建议**
> 如果某次修改导致 App 大坏掉,可以回到较稳定的旧版本.利用 superun 的版本历史与还原功能,在安全的前提下持续迭代.

***

## 10. 部署你的应用程序

当你对体验感到满意,就可以把 App 推向真实用户.

你有两条主要路径:

1. **直接由 superun 部署**
   * 使用 superun 的部署选项,挂在预设网域上.
   * 适合快速测试,展示或内部评估.

2. **通过主机服务部署（例如 Netlify 或 Vercel）**
   * 将 GitHub 存储库连接到主机服务.
   * 设定建置指让与环境变数（Supabase 金钥,AI 金钥,Stripe 金钥）.
   * 设定自订网域并更新 DNS.

正式公开前,请再检查:

* Favicon 与 App 名称.
* Meta 标签与 Open Graph（OG）图片,确保分享连结看起来专业.
* 若要收费或处理个人资料,确认隐私权,条款与联络方式.

> ℹ️ **上线检查清单**\
> 至少要确定有一个完整流程是顺畅的:从进入首页,建立帐号,产生行程,用 AI 微调,再把行程存储下来.当这个流程感觉自然流畅,你就可以放心把这个由 superun 驱动的旅游规划 App 分享给世界.