trip-planner-0to1（旅行计划 0to1）

Trip Planner 0→1 —— 自由行攻略端到端工作流

把一次出行攻略从「一张机票 + 模糊的目的地」做到「结构化行程书 + 可勾选的 Todo 网页 + 跨设备同步」，全流程标准化、可复用。

🎯 适用场景

• 用户抛出一个目的地（"五一去冲绳"、"十一带孩子去日本"），希望系统化规划
• 已有部分预订（机票/酒店），需要补齐剩余一切
• 需要和同行者（配偶/朋友）跨设备共享待办
• 攻略不仅是文档，还要有可交互的"作战指挥页"

📋 工作流总览（8 个 Phase）

Phase 1  需求澄清     → 时间/人数/预算/硬需求/风格偏好
Phase 2  资源调研     → 小红书 MCP + 地图 + Web 搜索
Phase 3  方案决策     → 住宿/交通/一日游/餐厅 四大决策
Phase 4  行程书草稿   → Markdown 逐日行程 + Plan B
Phase 5  Todo 清单    → 紧急/次紧急/已完成 三段 + 装备
Phase 6  交互式网页   → index.html（Leaflet 地图 + Todo + 进度条）
Phase 7  数据同步     → localStorage 兜底 + 可选云端同步
Phase 8  部署 & 预览  → 本地预览 / 静态托管 / 公网分享

Phase 1 —— 需求澄清（必问清单）

不要自己脑补，缺信息就直接问。

1. 硬约束：往返航班是否已定？日期、机场、行李额？
2. 人数 & 关系：几人？夫妻/亲子/朋友团？
3. 预算：人均总预算或每晚住宿上限
4. 强需求：有没有"必须做"的项目？（潜水/看极光/吃米其林…）
5. 风格偏好：自驾 vs 公共交通？酒店 vs 民宿？深度 vs 打卡？
6. 同行者会籍：IHG/Marriott/Hilton/GHA 等会员权益
7. 作息偏好：早鸟 vs 夜猫，决定每日第一个行程的起始时间
8. 共享房间 ID（如启用云端同步）：<destination>-<user1>-<user2>，全小写用 - 分隔

Phase 2 —— 资源调研（多源并行）

2.1 小红书 MCP（xiaohongshu server）

推荐作为第一信源，中文攻略帖的"避坑信息"密度远高于 Google。

安装（开源版 xpzouying/xiaohongshu-mcp，GitHub 13k+ star）：

# 方式 A：Docker（最简单）
docker pull xpzouying/xiaohongshu-mcp
wget https://raw.githubusercontent.com/xpzouying/xiaohongshu-mcp/main/docker/docker-compose.yml
docker compose up -d
# 默认暴露 http://localhost:18060/mcp

# 方式 B：二进制
# macOS Apple Silicon 下载：
# https://github.com/xpzouying/xiaohongshu-mcp/releases → xiaohongshu-login-darwin-arm64
# 先运行 login 工具扫码登录，再运行主程序
./xiaohongshu-login-darwin-arm64
./xiaohongshu-mcp-darwin-arm64

MCP 配置（写入 AI 客户端的 mcp.json / settings）：

{
  "mcpServers": {
    "xiaohongshu": {
      "url": "http://localhost:18060/mcp",
      "description": "小红书内容检索与发布"
    }
  }
}

常用工具：

搜索关键词模板：

• <目的地> 避坑
• <目的地> 最新攻略 <年份>
• <目的地> <月份> 天气
• <目的地> 防宰
• <目的地> 物价
• <景点名> 值不值得去

陷阱识别：90% "精品一日游"帖子是商业推广，看评论区 + 发帖时间筛真实内容。详细筛选标准见 references/research-prompts.md。

2.2 地图 API

查实际行车距离和时间，不要信小红书文字描述。可选工具：

经验：默认路线可能非最快，手工对比至少 2 条备选路线。山区/岛屿尤其明显（海岸线绕远反而比内陆快）。

2.3 Web Search + WebFetch

• 酒店比价：同时查 Agoda / Booking / Kayak / 官网 / Trip.com，列成比价表
• 渡轮/船票：查官网班次，电话/邮箱记录到行程书
• 签证/入境：查外交部官网 + 大使馆公告（不要只信小红书）
• 机场接送、SIM 卡、租车：查 Klook / KKday / GetYourGuide

详细提示词模板见 references/research-prompts.md。

Phase 3 —— 方案决策（四大块）

按优先级处理，早定早安心：

3.1 住宿（决策树）

是否有酒店会籍？
├─ 是 → IHG/Marriott/Hilton/GHA 官网直订（升房 + 早餐 + 酒廊）
└─ 否 → Agoda + Booking + Trip.com + Kayak 四方比价
            └─ 含早？免费停车？步行到景点？取消政策？

产出：<目的地>酒店比价_<日期>.md 对比表格，金额同时标本币 + CNY。

3.2 交通（自驾 vs 公共）

• 自驾 → 选车（Klook / Rentalcars / 本地租车行）+ 保险（第三方保险公司单独买通常比租车行附加便宜）+ 国际驾照
• 公共 → 画交通方案图，时间戳对齐每段，给足换乘 buffer（≥20min）

3.3 一日游 / 体验项目

• 优先级：官网直订 > Klook > 民宿代订 > 码头现场
• 明确版本：self-drive, meet at jump-off vs with hotel pickup —— 能省不少钱
• 提前查配额制项目（船潜、鲸鲨、跳伞）是否要预先锁名额

3.4 餐厅清单

• 每天午/晚餐各候选 2 家，一家主选一家 Plan B
• 查 Google Maps 评分 ≥4.3 + 评论数 ≥300，并扫一眼差评辨水军

Phase 4 —— 行程书 Markdown

文件名：<目的地><出行方式>行程_v<N>_<日期>.md

骨架参考：references/templates/itinerary-template.md

关键段落：

1. 封面摘要：日期、航班、人数、预算总览
2. Day by Day：每天一个 H2，含 时间/地点/动作/费用 四列
3. 住宿清单表：N 晚酒店 + 入住/退房时间 + 金额 + 确认号
4. 交通清单：航班/渡轮/租车，带确认号/订单号
5. 备选方案 / Plan B：每个关键节点都要有备胎
6. 费用明细：按付款人拆分
7. 应急联系：使领馆、保险、租车紧急电话

Phase 5 —— Todo 清单结构化

Todo 分三段（顺序有讲究）：

紧急 (urgent)      → 需要 1-3 天内处理的（订酒店/锁名额/买行李额）
次紧急 (important) → 出发前搞定即可（下载保单/买防晒/买转换插头）
已完成 (done)      → 已预订/已购买的，作为"备忘证据"不删除

每条 Todo 必须有：

• 主标题（动词 + 对象）：如 买当地 SIM 卡
• 副说明 <small>：具体去哪买、多少钱、对应哪条行李
• 紧急标签（仅 urgent 段）
• 图标（Lucide / Heroicons）
• data-id 唯一（u0-uN / i0-iN / d0-dN 分段命名）

装备清单 / 行李清单单独一个 <ul id="todoPack">，便于出发前最后核对。

Phase 6 —— 交互式网页（index.html）

模板：references/templates/index-skeleton.html

核心能力：

• 顶部进度条：N / 总数、百分比、渐变条
• 地图：Leaflet + OpenStreetMap（免费无 Key），标出住宿/景点/餐厅/机场，点击弹出信息
• Todo 勾选：点击切换 done，done 自动沉底（flying 动画 → DocumentFragment 重排）
• 同步徽章：右下角小圆点 + 文字 已保存 / 已同步到云端 / 离线
• 暗色主题：低亮屏下不刺眼，户外强光下也清晰

关键 CSS（Todo 沉底动画）：

.todo-item {
  transition: background .2s, opacity .3s, transform .3s;
  /* ⚠️ 不要用 transition: all，会让 hover 卡顿 */
}
.todo-item.flying { opacity: 0.35; transform: scale(0.98); }

关键 JS（勾选沉底）：

todoItems.forEach(item => {
  item.addEventListener('click', () => {
    const willBeDone = !item.classList.contains('done');
    item.classList.toggle('done');
    saveTodos();
    const ul = item.parentElement;
    if (willBeDone) {
      item.classList.add('flying');
      setTimeout(() => { ul.appendChild(item); item.classList.remove('flying'); }, 220);
    } else {
      const firstDone = ul.querySelector('.todo-item.done');
      item.classList.add('flying');
      setTimeout(() => {
        if (firstDone && firstDone !== item) ul.insertBefore(item, firstDone);
        else ul.appendChild(item);
        item.classList.remove('flying');
      }, 180);
    }
  });
});

完整可拷贝代码：references/templates/todo-sync.js。

Phase 7 —— 数据同步

默认策略（0 服务器成本）：localStorage + URL 分享，够 95% 场景用。

跨设备同步可选方案（按集成难度从易到难）：

方案 A：localStorage 本地存储（默认）

• 所有勾选状态存浏览器本地
• 无服务端、无账号、无限制
• 局限：不同设备状态独立

方案 B：GitHub Gist（零服务器，需 GitHub 账号）

• 把勾选状态 POST 到一个 public Gist
• 用 Personal Access Token（只需 gist 权限）
• 代码模板见 references/templates/todo-sync.js 的 Gist 变体

方案 C：JSONBin.io / jsonbin.io（零服务器，免费 1 万次/月）

• 注册后拿 X-Master-Key
• REST API 非常简单：GET /b/<binId> + PUT /b/<binId>
• 代码模板见 references/templates/todo-sync.js

方案 D：自建轻量同步服务

• 任何能跑 Node / Python / Go 的 VPS
• 40 行代码搞定（示例见 references/self-host-sync.md）
• 推荐配 Cloudflare Tunnel / Cloudflare Workers，免公网暴露

方案 E：Cloudflare Workers KV（推荐，零运维）

• 免费额度：10 万次读 + 1 千次写/天
• 浏览器直调 Workers URL，无 CORS 烦恼
• 示例代码见 references/cloudflare-workers-sync.md

选型建议：

Phase 8 —— 部署 & 预览

8.1 本地预览

# 原生 Python 临时 server
python3 -m http.server 8000
# 或 Node
npx serve .

8.2 静态托管（推荐平台）

8.3 分享注意事项

• URL 加缓存破坏参数：?v=20260501，避免用户看到旧版本
• 微信分享：直接发 URL，不要发 HTML 文件（iOS 微信不渲染 HTML 附件）
• 敏感信息脱敏：对外分享的攻略不要暴露酒店确认号、信用卡尾号、订单号等

✅ 最终交付物检查清单

完整一份攻略应包含：

• [ ] <slug>行程_v<N>.md 行程书（必须）
• [ ] index.html 指挥页（必须）
• [ ] icons/ SVG 图标集（可选，Lucide / Heroicons）
• [ ] 酒店比价 md
• [ ] 地图 KML / HTML 路线图（如果自驾）
• [ ] Day by Day 大图指南 / 登机日流程页（可选）
• [ ] 部署 URL + 缓存破坏参数
• [ ] 同行者跨设备访问测试

🔴 常见坑

1. 直接做，不要反复问"要不要我帮你…" —— 在获得基本信息后就推进，缺啥再单点问
2. Todo 动词要对齐行李 —— 用副说明标注"对应行李清单：XX"，否则打包时易漏
3. 动画不要 transition: all —— 改成显式 transition: background, opacity, transform，否则 hover 卡顿
4. DocumentFragment 重排 —— 批量移动 DOM 用 fragment.appendChild 避免多次 reflow
5. 同步 key 不要重名 —— 不同攻略用不同 roomId，否则互相覆盖
6. 作息偏好要确认 —— 用户可能是早鸟也可能是夜猫，早于其自然醒时间的活动必须明确标注原因
7. Plan B 不是装饰 —— 关键节点（跨岛渡轮、鲸鲨配额、跨国航班转乘）必须写备胎
8. 脱敏 —— 对外分享不暴露确认号 / 信用卡尾号 / 订单号等

📚 参考文件

• references/workflow-checklist.md —— 8 个 Phase 的 DoD 检查清单
• references/research-prompts.md —— 小红书 / WebSearch 提示词模板库
• references/templates/itinerary-template.md —— 行程 Markdown 骨架
• references/templates/index-skeleton.html —— 交互式网页骨架
• references/templates/todo-sync.js —— Todo 同步完整 JS（含 localStorage / Gist / JSONBin 三种后端）
• references/cloudflare-workers-sync.md —— Cloudflare Workers KV 同步服务示例
• references/self-host-sync.md —— 自建 40 行同步服务示例

_Built 2026-04-24. 沉淀自一次完整的东南亚自由行攻略制作实践。_