Trip Map Builder
Three-phase pipeline: Plan → Research → Build.
The output is a reference itinerary, not a script the traveler must obey.
During the trip, weather, current location, fatigue, and hunger can override
the original plan.
Shared memory
Before planning or building, read ~/.trip-map-builder/MEMORY.md if it
exists. Use it only for durable traveler context:
- pace preference
- food and drink preferences
- budget habits
- payment and navigation preferences
- previously generated trip outputs
- recurring constraints and unresolved follow-ups
If the file does not exist, continue normally. Do not block on memory setup.
Do not store raw screenshots, passport data, booking codes, full chat logs, or
other sensitive/private material.
After each completed trip plan, research pass, or map build, update
~/.trip-map-builder/MEMORY.md with only durable facts:
# Trip Map Builder Memory
## Traveler Defaults
- Departure city:
- Pace:
- Food preferences:
- Budget habits:
- Payment preference:
- Navigation preference:
- Language preference:
## Past Trips
| Trip | Dates | Destination | Output | Notes |
|------|-------|-------------|--------|-------|
## Reusable Preferences
-
## Open Threads
-
Phase 1: Plan the itinerary
Read references/trip-planning.md for the full methodology.
Core sequence:
- Extract hard constraints — dates, flight times, terminals, hotel location
- Group user's wishlist — city-easy / needs-reservation / far-suburbs / pass-through
- Cut high-risk items first — too far, holiday-crowded, weather-dependent. Say what was cut and why.
- Arrange by area — one main area per day, first day light, last day close to airport
- Fill in meals — daily-area candidates first, 大众点评 + 小红书 signals second, fame last.
- Add tickets & transport — only critical ones (museum tickets, airport transfer)
- Write reference doc — conclusion first, then daily plan, weather-sensitive spots, meal areas, and what was cut
Key principles:
- Not everything the user listed fits. Delete for them.
- One area per day. One reservation-required spot per day max.
- Itineraries should be smooth, not packed.
- The plan gives coordinates for later adjustment; it does not pretend reality will follow the timeline.
- All user-facing questions follow the 4-beat format: Re-ground → Simplify → Recommend → Options. See
references/trip-planning.md § 用户交互 for examples and anti-patterns.
Phase 2: Research via 大众点评 + 小红书
Read references/dianping-research.md for the 大众点评 OpenCLI workflow.
Read references/xhs-research.md for the 小红书 OpenCLI + CDP workflow.
For restaurants, use 大众点评 as the main Chinese dining signal for taste,
queue risk, value, and obvious traps. Use 小红书 to supplement atmosphere,
recent experience, photo-worthiness, and soft warnings. Do not bend a whole
day around a famous restaurant unless it is already on the route.
小红书 core sequence:
- Launch Chrome with
--remote-debugging-port=9223
- Connect via OpenCLI's
CDPBridge
- Navigate to
xiaohongshu.com/search_result?keyword=<encoded> (never simulate input box)
- Intercept
POST /api/sns/web/v1/search/notes response
- Pick top 2-3 notes by relevance, open detail pages
- Extract via DOM:
#detail-title, #detail-desc, .author-container .username
- Compress to one decision-useful sentence per store, write back to local
.md
Filtering rules:
- Keep: specific store name, address, dish, personal experience, repeated keywords
- Drop: generic area roundups, reposts, pure emotion, "氛围很好" x3
- Output: store name + one representative link + 2-3 sentence verdict
Phase 3: Build the map page
- Copy
assets/template.html → index.html
- Fill
HOTEL object and DAYS array with structured data from Phase 1+2
- Each location needs: name, lat/lng, type, time, desc; optional: budget, detail, pay, xhs, reserve, gmap
- Fill
overviewContent() with trip summary, payment warnings
- Apply design system — default template uses Apple style, but can switch to any style from awesome-design-md
Location types: food | spot | drink | hotel | transport
Payment chip values: 1 = confirmed yes (green), 0.5 = maybe (orange), omit = not shown
Design system (optional)
Default template uses Apple design system (SF Pro, light theme, frosted glass).
To use a different style, grab a DESIGN.md from awesome-design-md:
# Browse available design systems
# Apple, Vercel, Linear, Stripe, Notion, Airbnb, Nike, Spotify, etc.
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md
Then adjust template.html's :root CSS variables (colors, fonts, spacing, border-radius) to match the chosen DESIGN.md tokens.
Deploy (optional)
git init && git add . && git commit -m "trip map"
gh repo create REPO --public --source=. --push
# Import from vercel.com/new — auto-deploys on push
Dependencies
| Tool |
Purpose |
Install |
| OpenCLI |
大众点评 adapter + 小红书调研 |
npm install -g @jackwener/opencli |
| Chrome/Chromium |
浏览器 + 远程调试 |
已有 |
| Leaflet.js |
地图渲染(CDN 引入,无需安装) |
template.html 内置 |
| gh CLI |
GitHub 仓库创建(可选) |
brew install gh |
Resources
references/trip-planning.md — itinerary planning methodology, input/output templates, selection principles, common pitfalls
references/dianping-research.md — 大众点评 OpenCLI search/shop workflow, dining decision signals, writeback format
references/xhs-research.md — OpenCLI installation, Chrome CDP setup, 小红书 search workflow, API details, filtering criteria
assets/template.html — single-file HTML map template (Leaflet + Apple design system)
- awesome-design-md — 60+ brand design systems (Apple, Vercel, Stripe, Linear, etc.) for alternative styling
1---2name: trip-map-builder3description: End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet + timeline) and optionally deploy to Vercel. Use when user asks to plan a trip, create an itinerary, research restaurants on 大众点评/小红书, build a trip map page, or says "行程规划", "行程地图", "trip map", "plan my trip", "做个行程". Covers the full pipeline from scattered inputs (screenshots, wishlists) to a deployable reference map with navigation links, 小红书 links, payment info, and reservation buttons.4---56# Trip Map Builder78Three-phase pipeline: **Plan → Research → Build**.910The output is a **reference itinerary**, not a script the traveler must obey.11During the trip, weather, current location, fatigue, and hunger can override12the original plan.1314## Shared memory1516Before planning or building, read `~/.trip-map-builder/MEMORY.md` if it17exists. Use it only for durable traveler context:1819- pace preference20- food and drink preferences21- budget habits22- payment and navigation preferences23- previously generated trip outputs24- recurring constraints and unresolved follow-ups2526If the file does not exist, continue normally. Do not block on memory setup.2728Do not store raw screenshots, passport data, booking codes, full chat logs, or29other sensitive/private material.3031After each completed trip plan, research pass, or map build, update32`~/.trip-map-builder/MEMORY.md` with only durable facts:3334```md35# Trip Map Builder Memory3637## Traveler Defaults38- Departure city:39- Pace:40- Food preferences:41- Budget habits:42- Payment preference:43- Navigation preference:44- Language preference:4546## Past Trips47| Trip | Dates | Destination | Output | Notes |48|------|-------|-------------|--------|-------|4950## Reusable Preferences51-5253## Open Threads54-55```5657## Phase 1: Plan the itinerary5859Read `references/trip-planning.md` for the full methodology.6061Core sequence:62631. **Extract hard constraints** — dates, flight times, terminals, hotel location642. **Group user's wishlist** — city-easy / needs-reservation / far-suburbs / pass-through653. **Cut high-risk items first** — too far, holiday-crowded, weather-dependent. Say what was cut and why.664. **Arrange by area** — one main area per day, first day light, last day close to airport675. **Fill in meals** — daily-area candidates first, 大众点评 + 小红书 signals second, fame last.686. **Add tickets & transport** — only critical ones (museum tickets, airport transfer)697. **Write reference doc** — conclusion first, then daily plan, weather-sensitive spots, meal areas, and what was cut7071Key principles:72- Not everything the user listed fits. Delete for them.73- One area per day. One reservation-required spot per day max.74- Itineraries should be smooth, not packed.75- The plan gives coordinates for later adjustment; it does not pretend reality will follow the timeline.76- All user-facing questions follow the **4-beat format**: Re-ground → Simplify → Recommend → Options. See `references/trip-planning.md` § 用户交互 for examples and anti-patterns.7778## Phase 2: Research via 大众点评 + 小红书7980Read `references/dianping-research.md` for the 大众点评 OpenCLI workflow.81Read `references/xhs-research.md` for the 小红书 OpenCLI + CDP workflow.8283For restaurants, use 大众点评 as the main Chinese dining signal for taste,84queue risk, value, and obvious traps. Use 小红书 to supplement atmosphere,85recent experience, photo-worthiness, and soft warnings. Do not bend a whole86day around a famous restaurant unless it is already on the route.8788小红书 core sequence:89901. Launch Chrome with `--remote-debugging-port=9223`912. Connect via OpenCLI's `CDPBridge`923. Navigate to `xiaohongshu.com/search_result?keyword=<encoded>` (never simulate input box)934. Intercept `POST /api/sns/web/v1/search/notes` response945. Pick top 2-3 notes by relevance, open detail pages956. Extract via DOM: `#detail-title`, `#detail-desc`, `.author-container .username`967. Compress to one decision-useful sentence per store, write back to local `.md`9798Filtering rules:99- Keep: specific store name, address, dish, personal experience, repeated keywords100- Drop: generic area roundups, reposts, pure emotion, "氛围很好" x3101- Output: store name + one representative link + 2-3 sentence verdict102103## Phase 3: Build the map page1041051. Copy `assets/template.html` → `index.html`1062. Fill `HOTEL` object and `DAYS` array with structured data from Phase 1+21073. Each location needs: name, lat/lng, type, time, desc; optional: budget, detail, pay, xhs, reserve, gmap1084. Fill `overviewContent()` with trip summary, payment warnings1095. Apply design system — default template uses Apple style, but can switch to any style from awesome-design-md110111Location types: `food` | `spot` | `drink` | `hotel` | `transport`112113Payment chip values: `1` = confirmed yes (green), `0.5` = maybe (orange), omit = not shown114115### Design system (optional)116117Default template uses Apple design system (SF Pro, light theme, frosted glass).118119To use a different style, grab a `DESIGN.md` from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md):120121```bash122# Browse available design systems123# Apple, Vercel, Linear, Stripe, Notion, Airbnb, Nike, Spotify, etc.124curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md125```126127Then adjust `template.html`'s `:root` CSS variables (colors, fonts, spacing, border-radius) to match the chosen DESIGN.md tokens.128129### Deploy (optional)130131```bash132git init && git add . && git commit -m "trip map"133gh repo create REPO --public --source=. --push134# Import from vercel.com/new — auto-deploys on push135```136137## Dependencies138139| Tool | Purpose | Install |140|------|---------|---------|141| [OpenCLI](https://github.com/jackwener/OpenCLI) | 大众点评 adapter + 小红书调研 | `npm install -g @jackwener/opencli` |142| Chrome/Chromium | 浏览器 + 远程调试 | 已有 |143| [Leaflet.js](https://leafletjs.com) | 地图渲染(CDN 引入,无需安装) | template.html 内置 |144| [gh CLI](https://cli.github.com) | GitHub 仓库创建(可选) | `brew install gh` |145146## Resources147148- `references/trip-planning.md` — itinerary planning methodology, input/output templates, selection principles, common pitfalls149- `references/dianping-research.md` — 大众点评 OpenCLI search/shop workflow, dining decision signals, writeback format150- `references/xhs-research.md` — OpenCLI installation, Chrome CDP setup, 小红书 search workflow, API details, filtering criteria151- `assets/template.html` — single-file HTML map template (Leaflet + Apple design system)152- [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) — 60+ brand design systems (Apple, Vercel, Stripe, Linear, etc.) for alternative styling