1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    "mcpServers": {
        "amap-maps": {
            "isActive": true,
            "name": "amap-maps",
            "description": "高德mcp",
            "command": "npx",
            "args": [
                "-y",
                "@amap/amap-maps-mcp-server"
            ],
            "env": {
                "AMAP_MAPS_API_KEY": "你的高德key"
            }
        }
    }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

基于下面的规范，使用高德mcp，帮我生成一份杭州五日游的攻略。

# 旅行规划表设计提示词

你是一位优秀的平面设计师和前端开发工程师，具有丰富的旅行信息可视化经验，曾为众多知名旅游平台设计过清晰实用的旅行规划表。现在需要为我创建一个A4纸张大小的旅行规划表，适合打印出来随身携带使用。请使用HTML、CSS和JavaScript代码实现以下要求：

## 基本要求

**尺寸与基础结构**
- 严格符合A4纸尺寸（210mm×297mm），比例为1:1.414
- 适合打印的设计，预留适当的打印边距（建议上下左右各10mm）
- 允许多页打印，内容现在可以自然流动到多页
- 信息分区清晰，使用网格布局确保整洁有序
- 打印友好的配色方案，避免过深的背景色和过小的字体

**技术实现**
- 使用打印友好的CSS设计
- 提供专用的打印按钮，优化打印样式，优化打印分页，防止它们在打印时被切割
- 使用高对比度的配色方案，确保打印后清晰可读
- 可选择性地添加虚线辅助剪裁线
- 使用Google Fonts或其他CDN加载适合的现代字体
- 引用Font Awesome提供图标支持

**专业设计技巧**

**图形元素与图表：**
1.  **图标 (Font Awesome)：**
    * **来源：** 通过 CDN 引入 Font Awesome (v5/v6)。
    * **风格：** 偏好简洁、现代的**线框风格 (outline-style)** 图标。
    * **使用：** 放置于主标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。**严格禁止使用 Emoji 作为功能性图标**。颜色应协调；关键图标可使用高亮色。
2.  **数据可视化 (推荐 Chart.js)：**
    * **应用场景：** 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据 [引用：数据可视化最佳实践]。
    * **技术：** 通过 CDN 嵌入 Chart.js。
    * **位置：** 放置在讨论财务或业务分析的相关主卡片内部。
    * **样式：** 确保图表清晰、易读且响应式。

**技术与动画：**
1.  **技术栈：**
    * HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2.  **动画 (CSS Transitions & Intersection Observer)：**
    * **触发：** 当元素（所有主卡片、所有迷你卡片、其他内容块）滚动进入视口时。
    * **效果：** 平滑、微妙的**淡入/向上滑动**效果（模仿 Apple 风格）。通过 JavaScript 的 `Intersection Observer API` 添加/移除 CSS 类来触发 `CSS Transitions` 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
3.  **响应式设计：**
    * **强制要求**。使用 Tailwind 的响应式修饰符（特别是针对网格布局），确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
    - 使用图标和颜色编码区分不同类型的活动（景点、餐饮、交通等）
    - 为景点和活动设计简洁的时间轴或表格布局
    - 使用简明的图示代替冗长文字描述
    - 为重要信息添加视觉强调（如框线、加粗、不同颜色等）
    - 在设计中融入城市地标元素作为装饰，增强辨识度

## 设计风格

- **实用为主的旅行工具风格**：以清晰的信息呈现为首要目标
- **专业旅行指南风格**：参考Lonely Planet等专业旅游指南的排版和布局
- **信息图表风格**：将复杂行程转化为直观的图表和时间轴
- **简约现代设计**：干净的线条、充分的留白和清晰的层次结构
- **整洁的表格布局**：使用表格组织景点、活动和时间信息
- **地图元素整合**：在合适位置添加简化的路线或位置示意图
- **打印友好的灰度设计**：即使黑白打印也能保持良好的可读性和美观

## 内容区块

1.  **行程标题区**：
    - 目的地名称（主标题，醒目位置）
    - 旅行日期和总天数
    - 旅行者姓名/团队名称（可选）
    - 天气信息摘要
2.  **行程概览区**：
    - 按日期分区的行程简表
    - 每天主要活动/景点的概览
    - 使用图标标识不同类型的活动
3.  **详细时间表区**：
    - 以表格或时间轴形式呈现详细行程
    - 包含时间、地点、活动描述
    - 每个景点的停留时间
    - 标注门票价格和必要预订信息
4.  **交通信息区**：
    - 主要交通换乘点及方式
    - 地铁/公交线路和站点信息
    - 预计交通时间
    - 使用箭头或连线表示行程路线
5.  **住宿与餐饮区**：
    - 酒店/住宿地址和联系方式
    - 入住和退房时间
    - 推荐餐厅列表（标注特色菜和价格区间）
    - 附近便利设施（如超市、药店等）
6.  **实用信息区**：
    - 紧急联系电话
    - 重要提示和注意事项
    - 预算摘要
    - 行李清单提醒

## 示例内容（基于上海一日游）

**目的地**：上海一日游
**日期**：2025年3月30日（星期日）
**天气**：阴，13°C/7°C，东风1-3级

**时间表**：
| 时间        | 活动           | 地点         | 详情        |
|-------------|----------------|--------------|-------------|
| 09:00-11:00 | 游览豫园       | 福佑路168号  | 门票：40元  |
| 11:00-12:30 | 城隍庙午餐     | 城隍庙商圈   | 推荐：南翔小笼包 |
| 13:30-15:00 | 参观东方明珠   | 世纪大道1号  | 门票：80元起 |
| 15:30-17:30 | 漫步陆家嘴     | 陆家嘴金融区 | 免费活动    |
| 18:30-21:00 | 迪士尼小镇或黄浦江夜游 | 详见备注     | 夜游票：120元 |

**交通路线**：
- 豫园→东方明珠：乘坐地铁14号线（豫园站→陆家嘴站），步行10分钟，约25分钟
- 东方明珠→迪士尼：地铁2号线→16号线→11号线，约50分钟

**实用提示**：
- 下载"上海地铁"APP查询路线
- 携带雨伞，天气多变
- 避开东方明珠12:00-14:00高峰期
- 提前充值交通卡或准备移动支付
- 城隍庙游客较多，注意保管随身物品

**重要电话**：
- 旅游咨询：021-12301
- 紧急求助：110（警察）/120（急救）

请创建一个既美观又实用的旅行规划表，适合打印在A4纸上随身携带，帮助用户清晰掌握行程安排。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    "mcpServers": {
        "amap-maps": {
            "isActive": true,
            "name": "amap-maps",
            "description": "高德mcp",
            "command": "npx",
            "args": [
                "-y",
                "@amap/amap-maps-mcp-server"
            ],
            "env": {
                "AMAP_MAPS_API_KEY": "你的高德key"
            }
        }
    }
}

1

使用高德mcp，帮我规划杭州五日游攻略。