一次＂Vibe Coding＂的旅行攻略可视化(续)

从"改一份攻略"到"封装一个Skill"的距离，也比想象中短得多

—— 建议先看 《上篇》

升级 1：让天气长在每个地点上

调用公共的天气接口，实时查询每个地点的天气，标记在攻略上

升级 2：让坐标点直接能跳到高德 App

在手机端上，如果想要打车去一个地方，在攻略上就直接能跳转App并定位好

关键代码就一行参数：

https://uri.amap.com/marker  ?position=${lng},${lat}  &name=${encodeURIComponent(name)}  &coordinate=gaode  &callnative=1   // ← 关键：装了 App 就直接打开，没装跳下载页

升级 3：把坐标这件事工程化

原先是从现有资料中搜寻位置，为了精准定位坐标，修改为调用高德的POI接口，因此，需要额外再配置一个高德的API Web服务key（非Js API）。

$key = '你的高德 Web 服务 Key'function Get-Poi($name, $city) {  $url = "https://restapi.amap.com/v3/place/text    ?key=$key&keywords=$name&city=$city    &extensions=base&offset=1"  $r = Invoke-WebRequest -Uri $url -UseBasicParsing  $j = $r.Content | ConvertFrom-Json  $j.pois[0].location   # "113.137763,40.113157"}Get-Poi '容桂火车站'  '顺德'Get-Poi '杜甫江阁'    '长沙'

输出会落到 poi-candidates.md，每条五列：

| 用户原名 | 高德返回 | lng, lat | 地址 | 状态 ||---|---|---|---|---|| 容桂火车站 | 容桂火车站 | 113.28xxx, 22.76xxx | ... | ✅ || 杜甫江阁 | 杜甫江阁 | 112.98xxx, 28.21xxx | ... | ✅ |

主要是几大地图厂商的坐标系不同，混着用，坐标会飘，这里采用高德坐标系（GCJ-02）。

升级 4：全新的UI 风格

• 主色
  墨绿 #1f3d34，背景暖灰 #f7f8f6
• 强调色
  暖橙 #c97b4a（必看 / 核心动作）
• 几何
  零圆角（除 day-pill），1px 描边，硬阴影
• 字号
  主标题 26px / -0.6px，区段标题 15.5px / -0.2px，正文 13-14px，数字 font-variant-numeric: tabular-nums

升级 5：把整个流程固化成 skill

地址：https://github.com/qingqianxuewei/my-skills/tree/master/itinerary-html

最大好处：任何 AI 拿到这个目录，0 学习成本做出同样的攻略。

验证：用大同案例跑一遍 skill

skill 写完之后，正好想要找时间去趟大同。两日游，整个设计完全按 skill 走。

一点小收获

这个攻略方式发了以后，好多小伙伴们都进行了尝试并贡献了宝贵的建议，以前我以为"做工具"是写一份代码的事，现在发现，"做工具"是把经验从自己脑子里抽出来、变成任何人都能跑的流程。

这件事不是技术活，是经验沉淀活。

• 做三遍同样的事 → 开始想"该不该抽出来"
• 踩三次同样的坑 → 开始想"该不该写进规则"
• 每次省 10 分钟 → 一年就省 80 小时

而现在的 AI，让"经验 → 文档 → skill"的循环快到几乎无感。这种"念头 → 流程"的高带宽，才是这一轮最有价值的事。

— 续篇完 · 欢迎留言 —

上篇：一次"Vibe Coding"的旅行攻略可视化