习作：让AI帮忙生成一个可交互H5页面

偶然间看到苹果为美国的一些州设计了该州独有特色的电子驾照，可以通过倾斜手机看到炫酷的视差滚动+镭射闪卡的特效。

于是心血来潮想有没有可能在AI的配合下利用HTML实现，作为临摹练习。

先在脑海中分析核心功能：

HTML中的相关功能和样式实现可以完全交给AI，但我对AI开发工具不说是了如指掌吧，至少也可以说是

_(:з」∠)_og，所以首先想到求教DeepSeek（以下简称DS），

DS非常快速且精准地理解了我的要求，给出了初版demo：

这啥玩意儿啊丑不拉几的（摔），看来DS在审美方面还有很长的路要走😂，只好放弃直接用AI生成卡面的想法，不过幸好咱是设计师，可以让DS先用占位符表示图层，之后咱自己设计图片替换即可。

另外得知，苹果似乎是出于安全性考虑，禁用了浏览器调用陀螺仪的能力，不论是Safari还是Chrome，不管是iOS15还是最新的iOS26，都无法正常使用该功能（顺便吐槽一下，苹果对网页端限制的如此严格，但却放任APP开屏倾斜手机的弹出广告，真是匪夷所思😡）

陀螺仪调用宣告失败，退而求其次，只好完全使用触摸实现交互。

由于需要频繁的微调代码，DS网页端这种纯聊天式的界面不太适合代码修改和调试的场景，且每次修改都要重新输出一轮HTML代码，耗时也较长。

于是决定转战专业开发工具，起初想直接用Cursor，但光是下载就需要科学上网，装好之后又发现免费试用有时间限制；于是考虑用VS code + cline插件，cline调用DS的API似乎有问题，幸好默认的模型也挺好用（后来亲测GitHub Copilot也还行，可以根据个人习惯多试试不同的agent）。

用Figma设计好卡片并整理好分层导出图片，跟之前DS生成好的html放在同一目录下，再用VS code打开，几轮对话+修改后终于完成了预想中的效果。

本地预览没有问题，紧接着就是在手机上预览，由于之前我自己租过虚拟服务器，也有现成的FTP服务，可以传到自己的网站上预览。

手机端果然出现了不少问题，包括缩放比例、圆角大小不正确，内容溢出等等，于是又增加了响应式设计的样式来做适配，顺便增加了偏移量的最大值限制，避免穿帮和卡顿。

最终成品：

大功告成后我突然联想到，2024年发布的宝可梦卡牌TCGP，里边的卡片预览不也是这样类似的视差效果吗？竖版卡片在手机上预览效果应该更好。索性举一反三再做几张宝可卡牌：

又是好几轮的沟通与Debug，耗时大半天，齐活！

本文抛砖引玉，记录一下在AI的协助下实现灵感的过程，时间所限难免有遗漏和错误，各位看官如果有更好的看法，请不吝赐教。

推荐脑洞丰富但苦于没有代码技能的小伙伴也动手试试，当AI真的如你所想实现了某个功能的那一刻，真的会由衷感叹：科技的进步，真好