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:

FileDescriptiontemplates/styles.cssComplete CSS design system (copy directly)templates/app.jsShared JavaScript functionality (copy directly)templates/index.htmlItinerary page templatetemplates/prepare.htmlPreparation checklist templatetemplates/notes.htmlNotes page templatetemplates/budget.htmlBudget page template

When generating a new travel website:

1. Create a dedicated output directory named by date and destination (e.g., guangzhou-shenzhen-20260429/, xian-20260715/, beijing-20260801/)
2. 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
3. Generate HTML files by replacing template variables with actual content
4. 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 <!-- SECTION_START --> and <!-- SECTION_END -->.

Common Variables#

VariableDescriptionExample{{TRIP_TITLE}}Trip title广州深圳亲子游{{TRAVELERS}}Number of travelers一大一小{{DURATION}}Trip duration6天5夜

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 <!-- DAY_START --> and <!-- DAY_END -->):

• {{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 <!-- TIMELINE_START --> and <!-- TIMELINE_END -->):

• {{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 <!-- GUIDE_START --> and <!-- GUIDE_END -->):

• {{GUIDE_TITLE}} - Guide section title
• {{GUIDE_ITEM}} - Guide item content (repeat between <!-- GUIDE_ITEMS_START --> and <!-- GUIDE_ITEMS_END -->)
• {{TIP}} - Tip text (between <!-- TIP_START --> and <!-- TIP_END -->)

prepare.html (Preparation Page)#

Category Section (between <!-- CATEGORY_START --> and <!-- CATEGORY_END -->):

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

Checklist Item (between <!-- CHECKLIST_ITEM_START --> and <!-- CHECKLIST_ITEM_END -->):

• {{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 <!-- NOTE_CATEGORY_START --> and <!-- NOTE_CATEGORY_END -->):

• {{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 <!-- NOTE_ITEM_START --> and <!-- NOTE_ITEM_END -->):

• {{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 <!-- BUDGET_SECTION_START --> and <!-- BUDGET_SECTION_END -->):

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

Budget Item (between <!-- BUDGET_ITEM_START --> and <!-- BUDGET_ITEM_END -->):

• {{ITEM_NAME}} - Item name
• {{ITEM_PRICE}} - Price
• {{ITEM_NOTE}} - Note (between <!-- ITEM_NOTE_START --> and <!-- ITEM_NOTE_END -->)
• {{ITEM_INCLUDED}} - Included text (between <!-- ITEM_INCLUDED_START --> and <!-- ITEM_INCLUDED_END -->)

Tip Card:

• {{TIP}} - Tip text

Gradients for Day Numbers#

DayGradient ClassColorsD1gradient-purple#667eea → #764ba2D2gradient-pink#f093fb → #f5576cD3gradient-orange#fa709a → #fee140D4gradient-blue#4facfe → #00f2feD5gradient-green#43e97b → #38f9d7D6gradient-red#f5576c → #f093fb

SVG Icons for Notes Page#

html

<!-- Clock icon (red) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>

<!-- Sun icon (orange) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"/>
  <circle cx="12" cy="12" r="4"/>
</svg>

<!-- Lightning icon (blue) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>

<!-- Smile icon (green) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
  <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
  <line x1="9" y1="9" x2="9.01" y2="9"/>
  <line x1="15" y1="9" x2="15.01" y2="9"/>
</svg>

Important Notes#

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