中秋国庆，通常会有很多朋友来北京玩儿，但传统景点儿不仅人多，而且还贵，倒不如在北京找条有意思的路，CityWalk一下，慢慢体验北京的文化底蕴。
但选线路这件事，有点麻烦，攻略散在抖音、小红书的一堆收藏里，热门线路全是人，想拍张照片连机位在哪都不知道。
所以，我用 TraeCode 做了一个【北京CityWalk】小工具，里面集成了 18 条小众散步线路，一键导航说走就走。
详细说明如下。
1、我做了个什么
北京CityWalk，一个手机浏览器打开就能用的 H5 网页，不用注册登录。里面我整理了 18 条北京主题散步线路：白塔寺红墙咖啡、东交民巷洋楼、雍和宫国子监、模式口驼铃古道、三里屯东五街银杏大道，并且按文化艺术、胡同古建、美食探店、秋日限定、河岸公园、远郊深度分成了 6 个专辑。
在线体验：
https://bj-citywalk.vercel.app/
2、它有什么功能
2.1 选线路
首页 18 张线路卡片，顶部是 5 条精选轮播。拿不定主意时可以按区域、主题、时长、花费、适合人群、季节六个维度组合着筛。
比如「东城 + 胡同古建 + 2-3 小时 + 基本免费 + 一个人」。也可以直接搜线路名或途经地标，搜「东四」就能找出所有经过东四的线。实在纠结，右下角有个「今天走哪条」，随一条还没走过的线路给我。
2.2 看线路
每条线路的详情页都挂着四个标签，有价值、有信息差、便宜、好看，点一下就能看到这条线凭什么够格。
往下按步行顺序列好了每一站（序号 + 地名 + 一句介绍）、出片机位（连构图建议都写了，比如红墙白塔的三层构图用长焦压缩），以及时长、距离、花费、最近的地铁站。页面底部还保留了这条线在抖音、小红书等平台的热门视频，整行点击就能跳回去看真实热度。
2.3 出发和记录
看完点「一键导航」，直接唤起高德地图的步行导航，从地铁口一路走到终点。遇到喜欢的线可以收藏，走完一条就打卡，收藏页有「已逛 X/18」的进度条，18 条全部走完会变成一张金色完成卡。每条线路都能一键复制带链接的分享文案，发给朋友约着一起走。
2.4 线路严选
18 条线路的数据经过我严格筛选，每条线的起终点坐标都用的是高德地理编码，真实可定位。
2.5 移动端适配
响应式布局，手机端访问，随时随地查看热门线路。
3、我是怎么用 TraeCode 做出来的
说几个关键步骤：
3.1 调研
我把几个平台上北京 citywalk 的热门线路、点赞收藏数据整理成调研记录，最后筛出 18 条有据可查的线路，存成一份 JSON 数据文件。
3.2 写 PRD
和 TraeCode 一起完善需求文档，字段结构、六维筛选规则、排序口径、四个页面的信息架构、配色字号规范等，后面就可以直接拿 PRD 进开发。
3.3 数据整理
让 TraeCode 写 Python 脚本，把 JSON 转成前端能直接用的数据文件，再调高德地理编码接口批量补齐起终点坐标。
3.4 写代码
使用plan模式，按 PRD 出计划，搭出整个单页应用，Hash 路由、筛选搜索、localStorage 收藏打卡、分享复制，一气呵成。
3.5 实测修 bug
比如一键导航本来想高德、百度都支持，我让 TraeCode 真去请求百度的网页导航链接，发现旧接口已经 404、新链接只打开地图首页出不了路线，实测之后果断只保留高德，点一下直达，不留一个没用的按钮。
其余像详情页补头图、徽章说明改成点一下就地切换、搜索只认线路名和地标（营销文案不参与匹配，避免搜出看不懂的结果）、热度来源行放大到整行可点，也都是这一轮改的。
3.6 多端适配
移动和 PC 的响应式布局。电脑上打开是左侧导航栏 + 详情页双栏（信息栏还会跟着滚动），手机上始终是原来的单列布局，两套操作按钮共用同一套逻辑。
写在最后
这个中秋国庆大假期，如果你想来北京转转，欢迎挑一条线走走，比在景点人挤人舒服多了。
在线访问链接：