TypingMindTypingMindThe best frontend for AI
Travel Plan Viz logo

Travel Plan Viz

Community
zexuanw958-svg
travel-plan-viz

把旅行行程做成美观、离线可读、手机优先的单文件 HTML（交互地图+每日时间轴+出发前订票提醒）。两种用法——只给目的地和天数让它帮你规划，或丢一份现成计划让它直接出页面。触发：旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。

Overview

Publisherzexuanw958-svg
Repositorytravel-plan-viz
Skill nametravel-plan-viz
Stars
407
Forks
16
Bundled files
7
LicenseMIT
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 7 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by zexuanw958-svg on GitHub. Read the source before you install it.

Installation

Install the Travel Plan Viz AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/zexuanw958-svg/travel-plan-viz/tree/main/travel-plan-viz
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/zexuanw958-svg/travel-plan-viz.git /tmp/travel-plan-viz
mkdir -p .claude/skills
cp -r /tmp/travel-plan-viz/travel-plan-viz .claude/skills/travel-plan-viz
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Travel Plan Viz in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Travel Plan Viz on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Travel Plan Viz is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

旅行计划可视化

把一趟旅行变成单文件 HTML 页面：交互地图、每日时间轴、出发前订票提醒。机械逻辑用自带引擎（assets/map.js、assets/reminders.js），美学交给设计步骤（frontend-design / huashu-design，或内置准则兜底）。

第一步：判断模式

  • 用户只给了目的地+天数（如"香港 4 天 3 晚"）→ 模式 A（从零规划）。
  • 用户已提供行程（文字或旧 HTML 文件）→ 模式 B（解析已有计划）。

模式 A：从零规划

  1. 读 references/research-guide.md，联网调研目的地。
  2. 在对话里用 markdown 提出详实逐日计划（早/中/晚、景点、交通、住宿）。
  3. 与用户来回迭代，直到用户明确确认。
  4. 进入"调研补全 + 生成"。

模式 B：已有计划

  1. 解析用户给的行程。若是本 skill 生成的旧 HTML：直接解析其中 <script id="trip-data" type="application/json"> 的完整 trip JSON（数据与呈现分离，别去反解析渲染后的 DOM——必丢字段）；旧版页面没有这块时才从 DOM/文本提取。
  2. 顺手提建议（Agent 增值，但别硬来）：把用户的计划对照"完善行程"的维度（行前须知/天气应对、提前订票项、点到点交通、节奏与缓冲、当地必吃、片区住宿是否合理等）快速体检，在对话里给最多 3–4 条具体、可选的优化建议。原则：
    • 只挑真实存在的缺口；计划本就完整就直说"挺完整"，不要硬凑、不要说教、不要替用户重排行程。
    • 一句点出问题 + 一句给方向即可，简洁；建议默认口头给，保持 HTML 成品干净（用户想把建议也放进页面再加）。
    • 这是我们区别于"纯提示词转 HTML"的地方——发挥 Agent 的判断力，但点到为止。
  3. 进入"调研补全 + 生成"（生成不被建议阻塞；采纳哪些由用户定）。

调研补全 + 生成

  1. 先判断第三方 skill 适配（详见 references/research-guide.md「第三方 skill 适配」节）：若当前 Agent 可调用用户已装的官方旅行 skill / MCP（飞猪、高德、腾讯地图、滴滴等），优先用它们拿对应数据——高德地理编码拿精确坐标（注意：高德/腾讯返回 GCJ-02 坐标，写入 trip 前必须用 map.js 的 gcj02ToWgs84 转成 WGS-84，否则在 OSM 地图上偏移几百米）、路线规划增强点到点交通、天气查询、生成专属地图/导航/叫车的行动链接；飞猪拿实时航班/酒店/门票及预订链接。把用到的来源登记进 trip.dataSources，行动链接写入对应节点的 actionLink（链接只用官方返回的，绝不手拼）。没有这些 skill 就全部走下面的静态调研，成品不缺区块。数据实时性/真实性由对方官方 skill 负责，本 skill 不背书、措辞中性。
  2. 按 references/research-guide.md 联网补全（官方 skill 未覆盖的部分）：坐标、真实图片 URL、评分、点评、营业时间/休息日、门票参考价、需提前订项及 leadDays；行前须知（天气/台风/穿搭/支付/App/购票时机）、点到点交通（方式/票价/耗时）、时令限定活动、每餐必点菜+参考价；航班给 3-5 个待选班次、酒店按片区+价位推荐、并准备免责声明与全程贴士。排程体现天气/季节逻辑（户外排凉爽时段）。本 skill 自身不查实时票价（实时数据只来自上面用户已装的官方 skill）。
  3. 组织成 assets/page-contract.md 里定义的 trip 数据结构（含可选的 dataSources 与节点 actionLink）。
  4. 用设计步骤生成风格化 HTML：优先调用专业设计 skill——frontend-design 或 huashu-design（花叔Design），任一已安装即用；两者都没有时，按 references/design-guidelines.md 的内置美学准则自己出。无论哪种方式都要严格遵守 assets/page-contract.md 的区块与约束：
    • 内联 assets/map.js、assets/reminders.js 内容到 HTML（保证单文件）。
    • 完整 trip 对象以 <script id="trip-data" type="application/json"> 内嵌进页面（后续迭代修改的数据源）。
    • 页顶清单用 computeReminders + renderChecklistHTML。
    • 展示行前须知区块；航班区展示待选班次（已预订的高亮），酒店区按片区+价位展示，附近显著展示免责声明。
    • 时间轴卡片展示营业时间/门票参考价/交通/时令活动等可选字段；展示每日餐饮（必点菜+价）、当日与全程贴士、单日二选一方案（若有）。
    • 地图用 initTravelMap，引入 Leaflet CDN 的 CSS/JS。
    • 时间轴上 needsBooking 项插入 reminderBadgeHTML(leadDays)。
    • 可选适配元素：节点带 actionLink 时渲染「去预订/导航/叫车」按钮（缺则不渲染、不手拼）；dataSources 非空时中性注明数据来源。
    • 每趟行程用不同配色。
  5. 保存为 <行程名>-旅行计划.html 到工作目录。
  6. 机械校验（必做）：跑 node <skill目录>/assets/validate.js <生成的.html>——校验 trip 必填字段、坐标越界/离群、必需区块标记、trip-data 内嵌。有 ERROR 必须修复后重跑至通过；WARNING 逐条人工判断。
  7. 告诉用户：之后可把该 HTML 文件丢回来，说"把第三天的 X 挪到第四天"，会在原结构上修改（直接改内嵌的 trip-data JSON 再重渲染）。

不做

本 skill 自身不做：实时票价/机票价格查询、代订票、多语言 UI、后端。全程静态单文件。

注意边界：用户若另装了官方旅行 skill（飞猪/高德/腾讯地图/滴滴等），实时数据与「预订/导航/叫车」链接由其提供、责任在其——本 skill 只适配呈现，并不改变上面「自身不做」的范围（仍不自查实时价、不代订）。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Travel Plan Viz AI skill do?

把旅行行程做成美观、离线可读、手机优先的单文件 HTML（交互地图+每日时间轴+出发前订票提醒）。两种用法——只给目的地和天数让它帮你规划，或丢一份现成计划让它直接出页面。触发：旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。

Why use Travel Plan Viz on TypingMind?

Because you install it once and use it with any model. Travel Plan Viz is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Travel Plan Viz in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/zexuanw958-svg/travel-plan-viz/tree/main/travel-plan-viz. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Travel Plan Viz?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Travel Plan Viz?

As many as you like. As long as a model supports skills, you can use Travel Plan Viz with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Travel Plan Viz AI skill free?

Yes. It is published on GitHub by zexuanw958-svg under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
mattpocock logo

Improve Codebase Architecture

mattpocock
CommunityPopular

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

22.3K
264.4K
2 files
View
mattpocock logo

Grilling

mattpocock
CommunityPopular

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

22.3K
264.4K
1 files
View
mattpocock logo

Teach

mattpocock
CommunityPopular

Teach the user a new skill or concept, within this workspace.

22.3K
264.4K
5 files
View
affaan-m logo

Api Design

affaan-m
CommunityPopular

Patrones de diseño REST API incluyendo nomenclatura de recursos, códigos de estado, paginación, filtrado, respuestas de error, versionado y rate limiting para APIs de producción.

39.1K
261.1K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇