用AI打造一款旅游转盘小程序

一、起因

想到之前写过一个八卦转盘 App，写的时候比较繁琐。

正好最近 AI 编程越来越火，正好试试如果同样做一个转盘，但这次换成旅游主题，而且全程交给 AI 来写，会是什么体验？

用 AI 从零复刻一个旅游转盘小程序，看看人和 AI 的差距到底有多大。

二、确定方案

上次做八卦转盘的时候，用的Flutter。

这次我偷了个懒，直接把需求甩给 AI："我想做一个旅游转盘小程序，跟转盘八卦类似的交互，但是内容换成旅游城市，支持国内国外分类，还要能自定义添加城市。"

框架我选择使用的是Taro，直接给ai说需求，很快就写完了第一版的架构。

上一次做八卦转盘，光是搭建项目、配环境就折腾了大半天。这次从需求到能跑，不到半小时。

三、转盘动画

整个小程序最核心的东西就是这个转盘。上次做八卦转盘的时候，这部分是我花时间最多的地方。

这个ai的解决方法

conic-gradient（圆锥渐变）：根据城市数量自动生成彩色扇形，每个城市占一个角度
transform: rotate()：给转盘加旋转动画，配合 transition 做缓入缓出
算角度：随机选一个城市，算它在转盘上的位置，加上至少转 5 圈，结束。

但我第一次跑的时候，转盘停下来指向的城市跟弹窗显示的不一样——角度算错了。这个问题上次做八卦转盘的时候我也遇到过，当时自己排查了大半天才找到原因。这次让 AI 调了一下，就好了。

四、城市数据

功能写完了，但我发现一个尴尬的问题：转盘上没城市可转。

每个城市需要准备这些东西：

{name: "成都",province: "四川",type: "domestic",color: "#FF6B6B",attractions: ["大熊猫繁育研究基地", "武侯祠", "锦里古街", "宽窄巷子", "都江堰"],foods: ["火锅", "串串香", "担担面", "龙抄手", "夫妻肺片"],description: "天府之国，一座来了就不想走的城市……"}

名字、归属地、类型、专属颜色、图片、景点列表、美食列表、城市简介——一条都不能少。

如果我自己手动填，光是查每个城市的景点和特色美食，估计得搞很长时间。上次八卦转盘的数据量小，也就几条。

然后我让 AI 帮我生成。几分钟，140 多条数据全出来了。

而且不是那种"成都-景点-熊猫"的敷衍数据，每个城市都有 5 个真实景点、5 道本地美食、一段像模像样的简介。甚至给每个城市配了专属颜色——成都偏红，因为火锅；大理偏绿，因为苍山洱海。

我抽查了几个城市的数据，基本都准确。个别不对的地方改一改就好，比从零写快了一百倍。

五、UI 问题

我承认，我审美一般。以前自己做的项目，UI 基本就是"能用就行"的水平。

AI 给我定的整体风格是紫蓝渐变 + 毛玻璃效果。简单来说就是那种半透明、模糊背景的高级感，最近特别火的 Glass-morphism 设计。

几个我觉得比较用心的细节：

转盘：每个扇区有自己的颜色，中心有脉冲动画，看着就很想转一下
弹窗：选中城市后，半透明遮罩 + 背景模糊，城市图片当 banner，信息一层一层叠上去
卡片：圆角 + 图片遮罩 + 阴影，滑动起来很舒服
分类切换：三个 Tab 带数字角标，切换的时候整个转盘的颜色会跟着变

AI 还很自觉地搭了一套 SCSS 设计系统，把颜色、间距、圆角这些全部变量化了。所以后面我想改颜色风格，只改几个变量就全换了。

六、城市展示

光有一个转盘总觉得内容有点单薄，所以 AI 建议再加一个城市列表页面。

用户可以像刷淘宝一样，以卡片网格的形式浏览所有城市。支持国内/国际/自定义三个分类筛选，还能下拉刷新。

点开任何一个城市卡片，同样能看到景点、美食和简介。

底部有个导航栏，可以在转盘和列表之间自由切换。

这样用户有两种用法：想碰运气就转盘，想仔细看就列表。我觉得这个设计还挺贴心的。

七、总结

这个项目从想法到完成，说实话速度比我预想的快很多。但我也不想过度吹"AI 无所不能"，聊聊真实的感受：

AI 真的擅长的事：

快速出方案和技术选型，省去了大量前期调研时间
生成重复性高的数据（140 个城市的信息，手动写真的会疯）
CSS 样式和动画效果，写出来比我好看一百倍
项目工程化配置，ESLint、Husky 这些东西配置起来又烦又容易出错

AI 做得还不够好的事：

第一次给的代码偶尔有 bug，需要你跑一跑才能发现
部分城市数据有小错误，还是得人工校验
复杂的交互细节需要你反复描述，它才能理解你要的效果

所以我的真实感受是：AI 更像是一个效率极高的搭档，而不是一个可以完全撒手不管的工具。你得知道你要什么，能判断它给的方案好不好，有问题的时候能说清楚哪里不对。

小程序链接在下面，大家想玩可以看看。