Trip Planner 0→1

从 0 到 1 制作一份完整的自由行出行攻略，覆盖需求采集、多源资源调研（小红书 MCP + 地图 + Web 搜索）、方案决策、Markdown 行程书产出、交互式 Todo 网页（本地存储 + 可选云端同步）、一键部署到静态托管的端到端工作流。适用于东南亚海岛、日本、欧洲自驾、美洲公路旅行等任何自由行场景。触发词：出行攻略、行程规划、自由行、做攻略、旅游计划、travel plan、itinerary、行程单、Todo 清单、旅行规划、路线规划、trip planning、旅行攻略。

dengjiawei1226@dengjiawei1226

Install

openclaw skills install @dengjiawei1226/trip-planner-0to1

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

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

🎯 适用场景

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

📋 工作流总览（8 个 Phase）

text

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 —— 需求澄清（必问清单）

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

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

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

2.1 小红书 MCP（`xiaohongshu` server）

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

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

bash

# 方式 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）：

json

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

常用工具：

工具	用途
`search_feeds`	搜"XX目的地攻略"、"XX踩坑"等长尾词
`get_feed_detail`	拿到笔记正文 + 评论区（评论才是金矿！）
`list_feeds`	首页刷热门帖
`user_profile`	深挖专业博主的历史笔记

搜索关键词模板：

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

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

2.2 地图 API

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

工具	特点
Google Maps API（`google-maps-api` skill）	全球覆盖，数据权威，需 API Key
高德 / 百度 Maps API	国内数据更准
OpenStreetMap Nominatim	免费无 Key，但覆盖与准确性一般
`gmaps.to` / `maps.app.goo.gl` 手工比对	快速验证两点时间

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

2.3 Web Search + WebFetch

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

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

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

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

3.1 住宿（决策树）

text

是否有酒店会籍？
├─ 是 → 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

关键段落：

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

Phase 5 —— Todo 清单结构化

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

text

紧急 (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 沉底动画）：

css

.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

选型建议：

场景	推荐
一个人出行	A（localStorage）
两人共享，不想折腾	C（JSONBin.io）
已有 GitHub 账号	B（Gist）
有 Cloudflare 账号 + 想免运维	E（Workers KV）
有自己的 VPS	D（自建）

Phase 8 —— 部署 & 预览

8.1 本地预览

bash

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

8.2 静态托管（推荐平台）

平台	特点	自定义域名
Cloudflare Pages	免费无限流量，CI/CD 自动部署	✅
Vercel	Next.js 友好，预览 URL 丰富	✅
Netlify	表单 / 函数开箱即用	✅
GitHub Pages	公开仓库免费	✅
自己 VPS + nginx	完全控制	✅

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 + 缓存破坏参数
同行者跨设备访问测试

🔴 常见坑

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

📚 参考文件

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. 沉淀自一次完整的东南亚自由行攻略制作实践。

Trip Planner 0→1

Install

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

🎯 适用场景

📋 工作流总览（8 个 Phase）

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

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

2.1 小红书 MCP（xiaohongshu server）

2.2 地图 API

2.3 Web Search + WebFetch

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

3.1 住宿（决策树）

3.2 交通（自驾 vs 公共）

3.3 一日游 / 体验项目

3.4 餐厅清单

Phase 4 —— 行程书 Markdown

Phase 5 —— Todo 清单结构化

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

Phase 7 —— 数据同步

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

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

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

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

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

Phase 8 —— 部署 & 预览

8.1 本地预览

8.2 静态托管（推荐平台）

8.3 分享注意事项

✅ 最终交付物检查清单

🔴 常见坑

📚 参考文件

Related skills

2.1 小红书 MCP（`xiaohongshu` server）