Install
openclaw skills install @dustink66/trip-website-generatorGenerates iOS26 liquid glass style multi-page travel websites from travel plans. Invoke when user wants to create a travel website, trip planner page, or provides detailed travel itinerary.
openclaw skills install @dustink66/trip-website-generatorThis skill generates a beautiful iOS26 liquid glass style multi-page travel website from a detailed travel plan.
Invoke this skill when:
This skill includes template files in the templates/ directory:
| File | Description |
|---|---|
templates/styles.css | Complete CSS design system (copy directly) |
templates/app.js | Shared JavaScript functionality (copy directly) |
templates/index.html | Itinerary page template |
templates/prepare.html | Preparation checklist template |
templates/notes.html | Notes page template |
templates/budget.html | Budget page template |
When generating a new travel website:
guangzhou-shenzhen-20260429/, xian-20260715/, beijing-20260801/)templates/styles.css and templates/app.js directly to the output directory - DO NOT modify these files in any way, copy them exactly as-isIMPORTANT:
Templates use {{VARIABLE_NAME}} syntax for placeholders. Repeatable sections are marked with HTML comments like <!-- SECTION_START --> and <!-- SECTION_END -->.
| Variable | Description | Example |
|---|---|---|
{{TRIP_TITLE}} | Trip title | 广州深圳亲子游 |
{{TRAVELERS}} | Number of travelers | 一大一小 |
{{DURATION}} | Trip duration | 6天5夜 |
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 tagsDay 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 nameTimeline 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 descriptionGuide 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 -->)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 textProgress Card:
{{TOTAL_ITEMS}} - Total number of checklist itemsNote 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 descriptionNote Item (between <!-- NOTE_ITEM_START --> and <!-- NOTE_ITEM_END -->):
{{ITEM_ICON}} - Emoji icon{{ITEM_TITLE}} - Item title{{ITEM_CONTENT}} - Item contentTotal 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 titleBudget 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| Day | Gradient Class | Colors |
|---|---|---|
| D1 | gradient-purple | #667eea → #764ba2 |
| D2 | gradient-pink | #f093fb → #f5576c |
| D3 | gradient-orange | #fa709a → #fee140 |
| D4 | gradient-blue | #4facfe → #00f2fe |
| D5 | gradient-green | #43e97b → #38f9d7 |
| D6 | gradient-red | #f5576c → #f093fb |
<!-- 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>