如果说最近AI圈子有什么最火，那一定就是Google新出的Gemini 3 Pro模型。
它不是一星半点的强，而是全方面的强。
用Nano Banana 2、Notebook LM、AI Studio Build 生成的图片和前端网站在X上和小群里到处传播。
这个风，我不得不跟，必须得自己亲自体验一下啊。
我在aistudio里，选择Build，输入一句话：
然后，它就给我生成了一个学习网站。
点进去，它连学习路线都给我做好了。
再点进去，是AI生成的内容页。但有个问题啊，如果每次点进去，都要做一次AI内容生成请求，显然很浪费token，也浪费时间。
于是，我继续对Gemini3提出要求，要求它给成可交互式的实践。
然后它就真的给我生成了测验和实践作业，作业需要提交代码，点击“检查代码”，会调用Gemini API来Review代码。
当然随便输入是不行的，这我试过了，只有代码通过了，才算完成这个作业。
不过这个回复干巴巴的，没什么意思，学习需要多巴胺的刺激。为了让它更有趣味性，我让AI输出风格为傲娇猫娘。
但是傲娇一旦把握不好，就容易因为辱骂学习者而被打差评。
在经过几轮提示词调整后，最终确定了口嫌体正直傲娇猫娘版本。
但我还想让它更有意思一点，逆袭打脸流一直很火啊。
这样比官方回复有意思多了吧。
网站给出的Compose学习路径比较简略，为了完善它，我打开一个新的对话窗口，让AI为我生成完整的学习路线。
这个路线图虽然不错，但仔细看，其实每一个小节的内容都不够最小化。比如1.1小节的内容里，包含了三个学习要点，一个是注解原理，一个是声明式和命令式，一个是UI公式。
我很喜欢可汗学院，因为它不仅降低了学习门槛，内容讲解清晰易懂，而且把每一小节、每一个关卡的内容细分到足够小。每一个环节像闯关一样有趣，在学习时能够不断得到正反馈。
这也是我想要这个学习网站达到的目的。
但是这个目录已经足够长了，如果把整个目录提供给AI，让它一次生成完整的细化小节内容，AI会在后面越来越偷工减料。于是，我用多轮会话，让AI一章一章的输出给我。
最后再用脚本把章节和小节标题单独提取出来，就是一个完整大纲路线图。这是最终的样子。
我把AI出的小节内容全部做成单独的markdown文件，在小节内容详情页显示。
这就不得不提到我之前做的Markdown编辑器了，它是我用来把markdown内容转成一键复制到公众号编辑器的工具。因为它已经有完整的Markdown渲染功能，所以我直接拿过来就能用，不怎么费力就实现了想要的效果。
这是一个完整的包含Makdown知识点、小测验和代码实践的内容界面。
但是我看着界面，感觉还是不满意。只有文字讲解，未免有些太枯燥了。这和其它的知识型网站有什么区别？还能不能更有意思一点？
恰好这时notebooklm发力，我在群里看到有人分享出来的哆啦A梦几何大冒险。
这不是正好是我想要的内容吗？用图文学习肯定比干巴巴的文字有意思多了啊。真是打瞌睡遇到枕头。
于是我立马打开Notebook LM，把我的完整路线图上传。
但这样得到的内容，不够细节和具体，归根结底是因为我上传的章节数太多了。
我仔细构思了一下路线图和内页想要达到的效果。
首先，我想要细分得足够小。这意味着，一个小节通常只讲一到两个知识点。所以，我应该把这个小节的内容上传进去，生成演示文稿。
虽然等待的时间比较长，做一个详细文稿需要十多分钟，但出来效果让我非常满意。
换个动画片就是另一种风格。
以动画片《甜甜私房猫》傲娇可爱猫猫小奇 和 《摇曳露营》 一起为零基础程序员讲解交互式学习内容，多使用马卡龙彩色图画+解说，内容专业，不要连续大段文字会造成阅读困倦 (好例子：style1.png和style2.png)，要有直观的代码运行效果图。
这彻底点燃了我的热情。于是我的想法开始爆发，我要把它做成一个真的能用、有趣的学习网站。
每个小节的内容页包含图片讲解和文字指南。喜欢文字阅读的读者和喜欢有趣轻松风格的读者，可以各取所需，自行选择，一起进步。
我看着已经初具雏形的网站，心里油然而生一种满足的喜悦。
但是仅仅是这样还不够，还有没有更有趣的方式呢？
既然Gemini 3 Build 能做网站，那如果把Notebook LM生成的PDF图片文件，发给Gemini 3 Build，会产生什么样的效果呢？
结果大大出乎我的意料。
不是不满意，而是超乎想象的优秀。
它竟然为我生成了一个交互式的学习卡片！光文字说你可能体会不了，直接上动图。
不怕被人笑，我在学习时，就希望老师把我当成傻子和幼儿园小朋友一样地教。越简单、越容易吸收、上手越容易，越好。
而Gemini 3 建造模式，让这种想法成为现实。想想以后，人们都能用一句简单的提示词，为自己想学的内容制作交互式小游戏，大大降低学习门槛。真是羡慕10后20后。
交互式生成的内容，也跟提供的文档有关。
比如我上传的是Notebook LM PDF文件，它本身就已经为我把内容，制作成了带有主题风格的图文讲解，再把它喂给Gemini 3后，不需要指示颜色风格，它就能创造主题色彩。当然也可以指定风格，比如，
效果如下。
不得不感叹一句，Gemini 3 Pro 的设计能力和审美，比起以前有了很大的提升。以前我们出原型设计稿，是垫图让Claude做。
现在图都不用垫了，直接说一句想要什么风格就可以。对我这种审美差的人来说，简直是天大利好。
如果上传的文件里带有测验，建造模式还会生成答题选项。
这绝对是学习者的利器啊。
当然你可能会问，Notebook LM里也可以生成测验啊，这和它有什么区别？
区别就是，在Notebook里的测试，还是枯燥的学习模式，而在Gemini 3 Build，你可以让它生成交互式的游戏，把测验嵌入到里面。
它不再是一个传统的做题模式，而是在游戏化学习过程中，做几道题巩固一下理解。
想到这里，我已经想做个小游戏，内嵌50道题，给老家的小表妹玩了。。。
我的热情一发不可收拾，越做越有劲，给每个小节都做成了交互式闯关小卡片。
点击路线图上的“魔法学院试炼”即可进入。
看着界面上的魔法学院，我突然有了新的灵感，如果像异世界动漫里的赏金公会一样，把代码练习题作为悬赏任务，接取练习任务，就像撕下悬赏。
我马上和Gemini讨论这个功能，完善需求细节和功能。
在我的网站里有多个学习模块，由于时间限制，目前只做到Compose，未来会开放诸如数据结构、计算机基础科目，如408，不局限于Android内容。而算法刷题，完美和这个公会悬赏体系融合。
确定想法后，我在Gemini 3 Build模式里，输入需求。它吭哧吭哧地就为我做好了前端界面。
还把卡片点击后的效果也做好了。当然样式效果是我自己调的。
接取任务后，界面上就会显示倒计时。如果没有在时间范围内提交任务代码，则任务失败。完成则有积分奖励，奖励积累可以升级为魔法师。
做到这里，我心里那个美啊，网站的整个雏形和框架就这么完成了。两天，只用了两天时间。借助谷歌的Gemini Build、Notebook LM，完成了整个前端页面的框架搭建。
不得不感叹一句，谷歌爸爸牛逼！
而且在Build模式，还能保存到Github，再也不怕修改丢代码了。
当然你要说弊端，也不是没有，AI Studio Build 模式毕竟不是为长上下文准备的，它在创造雏形上很有用，能带来很多灵感，但如果要专业开发、修复Bug（重要），还是要在专业的开发软件上调，比如Cursor。
但是目前的效果，已经是惊艳。
AI Studio Build 可以部署应用，也可以直接把链接分享出去。但我打算部署到Vercel上。在这个过程里，也走了一些坑，接下来我把踩的坑和解决方案一一道来。
第一个问题是API KEY。
我在Vercel的环境变量里添加了API_KEY，本地.env.local里面也配置了KEY，但点击Vercel的自带域名，xx.vercel.app，网站一片空白，打开调试台一看，提示API KEY错误。
为什么会有这个问题呢？
根据我咨询多个AI后得到的结果，是在前端浏览器使用API KEY的问题。直接在前端浏览器调用KEY是很有风险的，这是GoogleGenAI SDK的安全风险造成的。
解决方法是，使用 Vercel Serverless API 转发请求，只要在项目根目录下创建api文件夹，里面的文件就会自动变成接口。
新建一个文件chat.js用来写后端代码，在这个代码里调用GEMINI_API_KEY。然后在前端请求这个 Vercel 后端/api/chat，拿到返回值就可以了。
第二个问题是域名DNS。
Vercel的项目可以绑定自己域名，我添加后，用域名打开却总是无法显示网站。一开始以为这是DNS解析需要时间。但直到一天过去了还是无法访问，我才知道问题不是这么简单。
原因就在于Cloudflare，我之前在Cloudflare的DNS里添加了域名，开启了代理模式，所以把代理模式的小黄云关闭，手动修改www 记录的Target值为cname.vercel-dns.com，再把记录里域名那一项的IPV4地址改成76.76.21.21，Vercel 的官方固定 IP。
之后就可以了。
所以，现在你能通过网址 carriecat.cc 来访问我用两天时间爆肝出来的渐进式学习网站了。
前段时间，X上很流行一种论调，前端已死。
但在我看来，前端没有死，相反，你可能能看到许多有意思的前端项目迸出来，未来是拼想法、品味和落地执行力的时代。
前端可以主动乘上这波巨浪，实现更大的自我价值，也可能被动防御，被浪拍死。
这股浪潮个人无法抵挡，迎头而上顺应形势，接受变化，拥抱不稳定，才是正解。
（完）