上周，我收到了一位读者的私信："成峰，你的高德地图MCP教程太实用了！但是能不能多加点设计风格？"这不，我立马加班加点，给大家带来了一个超级重磅的更新！
截止今天，AI + 高德MCP，已经有1000+人进行制作啦！🎉
这个数字真的把我吓到了...😱
还有几十位同学，已经发出了自己的产品，看起来都超级棒！👏
这次更新，我给大家带来了三个超级实用的功能，保证让你眼前一亮！✨
- 24种超酷的H5风格，总有一款适合你！就像选衣服一样简单～
- 一键导航功能，再也不用复制粘贴地址啦！告别手忙脚乱！
- 数据更真实，再也不用担心AI瞎编啦！告别"假信息"！
别担心，这些功能10分钟就能全部搞定！是不是超级简单？😊
【上期回顾】在上期文章《AI + 高德MCP旅行规划神器：10分钟搞定完美行程！ 》中，我们详细讲解了：
-
获取高德地图的密钥
-
cursor 如何设置 MCP
-
询问高德MCP ，生成旅游信息
-
美化页面展示
如果您还没有阅读上一篇文章，可以点击[这里]查看。
设置cursor 新方法
如果在过去，你没有成功设置过 高德MCP，直接试试这个超简单的配置：
{ "mcpServers": {
"amap-amap-sse":
{
"url":"https://mcp.amap.com/sse?key=这里这里！！！粘贴您在高德官网上申请的key"
}
}
}
把它，粘贴到你的 mcp.json 文件里，记得换一下你的key哦！
用24种超美设计风格怎么用？
1.制定旅行计划
来，我们先试试："4月5日，我要去苏州一日游，制定一个计划"
看，这就是AI给我们的结果，是不是很专业？
2.保存提示词
新建一个文件名为"提示词.md"，把下面的文字粘贴进去，并保存：
# 风格说明
你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。
请设计高级时尚杂志风格的手机app旅行攻略，将旅行信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。
**可选设计风格：**
1. 构成主义风格 (Constructivism)
采用构成主义风格设计，体现20世纪早期俄国前卫艺术运动的革命性美学。必须使用大胆的几何形状和对角线元素创造动态张力，强调结构与构成。色彩应限制在红、黑两色为主，可辅以少量白色或灰色，体现革命色彩。排版是关键元素，文字应成为设计的一部分而非简单的内容载体，可使用不同大小、粗细和方向的文字创造视觉层次，标题应大胆且具冲击力，可斜向排列或分割成多行。必须使用几何形状如三角形、圆形、直线和对角线作为主要视觉元素，这些元素应相互重叠和交织。照片或图像应使用锐利的对比度和几何化处理，可使用照片蒙太奇技术。整体构图应不对称且充满张力，仿佛元素间存在力的相互作用。可添加工业元素如齿轮、工厂或机械部件的抽象表现。整体设计应呈现出前卫、动态且具有政治宣传性质的视觉效果，参考亚历山大·罗德琴科(Alexander Rodchenko)和埃尔·利西茨基(El Lissitzky)的海报设计，体现"艺术进入生活"的设计理念。
**每种风格都应包含以下元素，但视觉表现各不相同：**
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号线（豫园站→陆家嘴站），约25分钟
- 东方明珠→黄浦江夜游码头：步行15分钟
**实用提示** ：
- 携带雨伞，天气多变
- 避开东方明珠午间高峰
- 准备移动支付
- 注意保管随身物品
**重要电话** ：
- 旅游咨询：021-12301
- 紧急求助：110/120
请创建一个美观且易于在手机上浏览的旅行规划长图，帮助用户清晰了解整个行程安排。长图设计应确保在手机上阅读舒适，信息层次分明。
# 技术规范：
* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
* Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
* Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
* 中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
# 输出要求：
* 提供一个完整的HTML文件，包含所有设计风格的卡片
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度根据手机宽度自适应
* 永远用中文输出
* 注意文字的可阅读性，保持文字背景干净和字体颜色不一致
* 保证信息的完整性
请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的手机app旅行攻略，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。
待处理内容：
3.美化页面
告诉AI，根据提示词，生成内容
然后我们让他打开这个网页
额外说明：如果你会打开，自己打开就好啦！
你看，这就是新的设计风格，是不是超级酷？
4.替换风格
如果你想要换其他风格，在上面的提示词"可选设计风格"，替换掉你想要的风格：
比如这里上面选的是 构成主义风格
你可以从下面选一种，替换掉上面你的风格
选一个风格，替换掉原来的风格说明
就像拼积木一样，这个颜色不喜欢，我换一种颜色
一键导航功能怎么加？
1.输入增加导航功能的口令
"""
增加功能，点击地点能唤起 高德app进行导航，安卓使用安卓的，苹果使用苹果的 """
然后我们就能看到，他给我们改页面啦
根据文件名称，在左边的文件列表，找到这个文件，全选，复制全部的代码：
2.生成在线页面
由于我们刚刚生成的页面，是在电脑里的，我们在手机打不开，所以我们可以找到一个线上部署网页的工具：
32kw.com
我们打开这个页面
粘贴我们的代码
点击“生成链接”
我们等一会，他会在下面告诉我们“链接已生成”
我们点击复制按钮，就可以获取他的线上链接
把链接通过微信，发送到手机上，有其他办法也可以
然后我们复制到浏览器打开（微信里面不能跳转 高德地图噢）
点击导航，就可以，会出发“唤起提示”
点击打开就可以啦
如果没有导航成功，直接问责AI，比如
“为什么ios没有打开app呢”
他就会乖乖改啦！
我们重新去 32kw.com ，重新做一个链接，然后发给手机重新试试！
让获得的数据，更真实！
经过一些群友反馈，AI经常会给自己编的数据，而不去看高德地图的数据
我们可以试一下，在命令中加入"只使用高德的信息"，这样，AI就不会用自己的信息啦：
相信我，这个方法，我试了很多遍，准确率会高很多！
如果信息有缺失，你可以继续让AI去问高德
比如：
1.** 到 **，让高德查一下交通方式
2.让高德查一下，哪里可以吃特色菜
👍这次的更新，是不是很简单，如果你有哪里卡住了，可以来告诉我噢
欢迎入群询问
o90p05z3t4.feishu.cn/sync/FNzDd8…
如果群满，或者联系我，可以加
