❌

阅读视图

发现新文章，点击刷新页面。

前端已死？我用 Trae + Gemini 零代码手搓 3D 塔罗牌，找到了新出路

✇掘金 前端
芋圆ai

🔮 全流程 AI 手搓：我只动了动嘴，AI 就帮我复活了古老的塔罗牌

前言

还记得我 3 个月前分享的那篇《用 AI 写八字算命 UI》吗？

那时候，AI 虽然能写出像样的界面，但更多时候还是疯狂的调试，很多复杂的动画逻辑和样式细节，还得我自己上手微调。

短短 90 天过去，我被 AI 进化速度震撼了。

这一次，我决定挑战一个地狱级难度：完全不写一行核心代码，指挥 AI 开发一款高颜值的 3D 塔罗牌应用。

结果？Lumina Tarot 诞生了。它不仅有丝滑的 3D 交互，还能像真人占卜师一样“读心”。今天就来复盘一下，在这 3 个月里 AI 编程到底发生了什么质变。

😲 效果展示：这真的是 AI 写的？

先看成品。当我把这些需求扔给 AI 时，我其实没抱太大希望，但它交出的答卷让我这个 AI 博主都惊了。

image.png

图注：图片感觉不到这种交互感，真的很美，大家可以去自己试试

image.png

图注：这个排版和审美我只能说我真的绝了

image.png

图注：每个地方都有很好的交互，在卡牌上有倾斜的动画和金粉，然后后面的背景也是有交互的

image.png

🤖 过程揭秘：我负责想象，AI 负责实现

在这个项目中，我的角色从“程序员”变成了“指挥官”。我不再纠结 div 怎么居中，而是专注于审美和逻辑。

1️⃣ 挑战 AI 的审美上限：纯代码绘制 SVG 牌背

我跟 AI 说：

"我不要网上的素材图，我要你用 SVG 代码画一个‘暗黑天体’风格的牌背，要有金色线条和神秘符号。"

AI 思考了 5 秒钟，然后吐出了几百行 SVG 代码。结果就是你们看到的这个——细节拉满，放大 10 倍也不失真。 以前设计师要画半天的图，AI 几秒钟就“算”出来了。

image.png

图注：这复杂的几何纹理，竟然全是 AI 一行行代码敲出来的。

2️⃣ 挑战 AI 的逻辑能力：3D 翻牌动画

我也不懂什么 CSS 3D 变换矩阵。我只是告诉 AI：

"我希望卡牌能像真实物体一样，鼠标滑过要有倾斜感，翻开时要有重力感。"

AI 自动帮我写好了 perspective、rotate3d 甚至还贴心地加上了动态光影遮罩。 我只负责提需求，难点全交给它。 不出一会就完美的完成，bug居然都没什么

image.png

3️⃣ 全栈闭环：Supabase + Vercel 一键上云

不仅是前端，AI 把后端的活儿也包圆了。

  • 数据库：它帮我设计了 Supabase 的表结构和 Row Level Security 策略。
  • 部署：代码推送到 GitHub，Vercel 自动构建。

image.png以前需要一个团队干的事儿，现在我 + AI + Serverless 就搞定了。

🌌 AI 的美学：微交互中的“呼吸感”

很多人觉得 AI 只能写逻辑，不懂审美。大错特错。 在 Lumina Tarot 中，我特意测试了 AI 对“氛围感”的理解。

我没有给出具体的参数，只是用自然语言描述感觉：

  • "让光效像呼吸一样自然"
  • "让翻牌的瞬间有一种沉甸甸的仪式感"

结果，AI 不仅帮我写了 transition，还自己加上了 cubic-bezier 贝塞尔曲线来模拟物理惯性。甚至在鼠标移动时，它自动补全了视差滚动 (Parallax Effect) 的逻辑。 这种对“美”的通感，才是 AI 最让我细思极恐的地方。

😈 魔鬼细节：那些 AI 替我填的坑

除了大框架，真正让我觉得“AI 能处”的，是它对细节的补全。这些点我甚至都没提，是它自己想到的：

  1. 移动端适配：我只测了 PC 端，AI 却自动给手机端加上了触摸滑动事件，防止在手机上无法翻牌。
  2. 图片预加载：为了防止翻开牌时图片还在加载（白屏），AI 自动插入了 new Image() 预加载逻辑。
  3. 防误触：在洗牌动画结束前，它贴心地禁用了点击事件，防止用户乱点导致动画穿模。
  4. 无障碍支持：所有的 SVG 和按钮，它都顺手加上了 aria-label。

它比我更像一个有经验的高级前端工程师。

🛠️ 工具复盘：为什么我选择了 Trae？

这次开发我全程使用的是 Trae 编辑器。说实话，作为阅“软”无数的 AI 博主，Trae 的进步真的让我惊喜。

以前我可能会用 Claude Code，但最近它越来越贵，而且在某些立场问题上（你懂的）让人无法接受。作为一个中国开发者，我更愿意选择尊重我们的工具。

而 Trae 在接入了最新的 Gemini 3 模型后，能力直接起飞。特别是它对 MCP (Model Context Protocol) 的深度集成，让 AI 对项目上下文的理解达到了一个新的高度。 在写这个塔罗牌项目时，Trae 的开发效率完全不比 Claude Code 差，甚至在处理复杂的中文逻辑时更胜一筹。

🔥 便宜、强大、还尊重用户，还要什么自行车？

image.png

图注：这就是我的“开发现场”，全是自然语言对话。

💭 最后的思考：在算法的浪潮里，寻找人类的坐标

三个月前，当我还在为那个八字算命 UI 逐行调试 CSS 时，我内心其实充满焦虑：“如果 AI 编程进化得这么快，我们这些程序员存在的意义是什么？”

今天，看着 Lumina Tarot 在屏幕上流转的光影，我找到了答案。

AI 确实拿走了“搬砖”的瓦刀，但它交还给我们的，是“设计”的权杖。 它让我们不再受困于 Syntax Error 和繁琐的配置，从而能腾出手来，去思考那些更本质的问题： “什么是好的体验？” “如何用交互传递情感？” “如何在这个焦虑的时代，给用户一点点慰藉？”

技术门槛的消失，并不意味着创造力的贬值，反而是创造力的解放。 当代码不再是壁垒，审美、共情能力、对人性的洞察，将成为我们在这个 AI 时代唯一的、也是最坚固的护城河。

Lumina Tarot 的代码也许 99% 都是 AI 生成的，但那个决定“要用星空背景来安抚人心”的念头，属于我，属于人类。

别让代码限制了你的想象力，更别让对 AI 的恐惧禁锢了你的可能性。 去创造吧，就像从未受过伤一样。 🌟

❌