📦 Trip Website Generator — 技能工具

This skill generates a beautiful iOS26 liquid glass style multi-page travel website from a detailed travel plan.

When to Invoke

Invoke this skill when:

• User wants to create a travel website or trip planner page
• User provides a detailed travel itinerary and wants it visualized
• User asks to generate a trip planning tool
• User mentions "旅行网站", "行程页面", "travel website", "trip planner"

Templates

This skill includes template files in the templates/ directory:

• Create a dedicated output directory named by date and destination (e.g., guangzhou-shenzhen-20260429/, xian-20260715/, beijing-20260801/)
• Copy templates/styles.css and templates/app.js directly to the output directory - DO NOT modify these files in any way, copy them exactly as-is
• Generate HTML files by replacing template variables with actual content
• All HTML files should reference these two files

IMPORTANT:

• The styles.css and app.js files must be copied verbatim without any changes. Do not read, modify, or regenerate these files - just copy them directly from templates/.
• All website files (index.html, prepare.html, notes.html, budget.html, styles.css, app.js) must be generated in a separate directory, NOT in the root directory.

Template Variables

Templates use {{VARIABLE_NAME}} syntax for placeholders. Repeatable sections are marked with HTML comments like and .

Common Variables

index.html (Itinerary Page)

Header Section:

• {{TRIP_TITLE}} - Trip title
• {{TRAVELERS}} - Number of travelers
• {{START_DATE}} - Start date (e.g., 2026.04.29)
• {{END_DATE}} - End date (e.g., 05.04)
• {{DURATION}} - Duration (e.g., 6天5夜)
• {{TAG_1}}, {{TAG_2}}, {{TAG_3}} - Feature tags

Day Section (between and ):

• {{ANIMATION_DELAY}} - Animation delay (e.g., 0s, 0.05s, 0.1s...)
• {{GRADIENT}} - Gradient color class (purple, pink, orange, blue, green, red)
• {{DAY_NUMBER}} - Day number (D1, D2, D3...)
• {{DAY_TITLE}} - Day title
• {{DATE}} - Date (e.g., 4月29日 周二)
• {{SUBTITLE}} - Subtitle (e.g., D2431次)
• {{HOTEL}} - Hotel name

Timeline Item (between and ):

• {{HIGHLIGHT_CLASS}} - Add " highlight" for highlighted items, empty string otherwise
• {{TIME}} - Time (e.g., 08:16)
• {{ACTIVITY}} - Activity name
• {{DETAIL}} - Detail description

Guide Section (between and ):

• {{GUIDE_TITLE}} - Guide section title
• {{GUIDE_ITEM}} - Guide item content (repeat between and )
• {{TIP}} - Tip text (between and )

prepare.html (Preparation Page)

Category Section (between and ):

• {{ANIMATION_DELAY}} - Animation delay
• {{CATEGORY_NAME}} - Category name (e.g., 证件, 衣物, 防晒驱蚊)

Checklist Item (between and ):

• {{ITEM_ID}} - Unique item ID for localStorage
• {{ITEM_TEXT}} - Item text

Progress Card:

• {{TOTAL_ITEMS}} - Total number of checklist items

notes.html (Notes Page)

Note Category (between and ):

• {{ANIMATION_DELAY}} - Animation delay
• {{ICON_COLOR}} - Icon color class (red, orange, blue, green)
• {{{ICON_SVG}}} - SVG icon (use triple braces for HTML)
• {{CATEGORY_TITLE}} - Category title
• {{CATEGORY_DESC}} - Category description

Note Item (between and ):

• {{ITEM_ICON}} - Emoji icon
• {{ITEM_TITLE}} - Item title
• {{ITEM_CONTENT}} - Item content

budget.html (Budget Page)

Total Card:

• {{TOTAL_BUDGET}} - Total budget (e.g., ¥7,250 - 8,800)

Budget Section (between and ):

• {{ANIMATION_DELAY}} - Animation delay
• {{SECTION_ICON}} - Emoji icon
• {{SECTION_TITLE}} - Section title

Budget Item (between and ):

• {{ITEM_NAME}} - Item name
• {{ITEM_PRICE}} - Price
• {{ITEM_NOTE}} - Note (between and )
• {{ITEM_INCLUDED}} - Included text (between and )

Tip Card:

• {{TIP}} - Tip text

Gradients for Day Numbers

SVG Icons for Notes Page

Important Notes

• Always use Chinese for content unless user specifies otherwise
• Include practical tips in guide sections
• Make sure all internal links work correctly
• Ensure tabbar highlights the current page
• Test checklist functionality with localStorage
• Verify responsive design on mobile viewports
• Include dark mode support via prefers-color-scheme
• Animation delays should increment by 0.05s for each card