zexuanw958-svg/travel-plan-viz

What it solves

travel-plan-viz transforms a travel itinerary into a polished, mobile-first, single-file HTML page. It solves the problem of fragmented travel information by consolidating research, scheduling, and navigation into a single offline-readable document, while automating the tedious parts of planning like booking reminders and coordinate correction for maps.

How it works

The project uses a hybrid architecture that combines AI agent instructions with hard-coded JavaScript engines to ensure reliability:

• Agent Workflow: The AI (e.g., Claude Code or Codex) researches the destination, builds the itinerary, and generates the HTML page based on a content contract.
• Core Engines: Three vanilla JS engines handle the technical heavy lifting: map.js for interactive Leaflet maps and coordinate conversion (GCJ-02 to WGS-84), reminders.js for calculating booking deadlines, and validate.js for mechanical post-generation checks to ensure no fields or coordinates are missing.
• Data Persistence: The full itinerary is embedded as JSON within the HTML file, allowing the AI to update the plan (e.g., moving a stop from Day 3 to Day 4) without losing existing data.
• Extensibility: It can optionally integrate with official travel skills (like Fliggy or Amap) for real-time data, though it functions fully via web research alone.

Who it’s for

Travelers who want a structured, visually appealing, and portable travel guide that can be accessed offline on a mobile device, and users of AI agents like Claude Code or Codex who want to extend their capabilities with a reusable skill.

Highlights

• Interactive Maps: No-API-key maps with numbered stops, dashed routes, and one-tap navigation links for iOS and Android.
• - Booking Reminders: Automatically back-calculates deadlines for tickets and hotels based on the departure date.
• Offline-First: Generates a single responsive HTML file where text remains readable without an internet connection.
• Mechanical Validation: Uses a dedicated script to catch common AI errors like swapped latitude/longitude or missing required blocks.
• Iterative Editing: Supports updating the itinerary by feeding the HTML back to the AI, which modifies the embedded JSON data.