在好未来AI黑客松的极限挑战中，一个零代码基础的产品经理如何在3天内完成从产品构思到全栈开发的壮举？本文揭秘如何用Gemini和Vibe Coding搭建儿童科普APP的全过程，从UI设计的多次翻车到前后端联调的崩溃瞬间，呈现AI开发工具的突破与局限。

周六参加了好未来的AI黑客松比赛，参赛的产品是完全一个人从0开始构建，3天时间承担了产品- UI-研发-测试-本地部署全流程。

PS：我是个产品，轻量级UI，代码能力为0

PART 01 背景

根据直播中的信息，有几个重点需要进行关注

• 产品需要通过AI coding进行开发，也可以是跟AI相关的产品
• 产品整体开发周期10天，需要从方案- UI-开发-测试完整闭环，且产品需要有一定完整度
• 产品的定位需要跟学生、家长相关，不可太大的偏离

PART 02 立项

2.1 思考

“我没有特别的才能，只是拥有强烈的好奇心。”——爱因斯坦

“好奇心是学者的第一美德。” —— 居里夫人

“好奇心很重要，搞科学离不开好奇。”—— 李政道 （诺贝尔物理学奖得主）

“儿童的好奇心是对知识的渴望。”—— 约翰・洛克 （英国思想家）

根据要求来看，可以做的方向比较广泛，本身好未来就具备学科的能力，在学习范围里单纯学科的产品会非常多，而且比较卷，因此如果单纯从学习的角度出发将是红海，因此需要延展出其他方向。

用户：儿童，针对3-12岁的儿童，但产品需要有一定额外多站能力，能适配更多年龄段的人员

设备：优先PAD为主，这个年龄段的孩子更多会考虑平板类大屏幕，或者电视

产品方向：回忆有意思的产品，成年人有两款产品非常有意思“好奇心日报”“果壳社区”

1. 好奇心日报：每天会给你推送世界上你不知道，觉得神奇，觉得奇怪，觉得有意思的事情
2. 果壳社区：边缘化知识，给你生活中接触得不到的知识

通过以上两款产品进行延展，围绕【好奇心】出发点，好奇心是孩子很重要的因素

2.2 思考延展

2.2.1 绘本生成类产品

自己虽然有想法，但是还是想交给AI进行延展一些，gemini给我的感觉一般

第一个其实是最开始想做的，但是生成的质量可能出现不稳定性，而且这种生成类的估计有比较多，因此就放弃了，我也让他给我进行了延展

2.2.2 新奇特冷知识应用

我先让他扮演一个产品经理进行调研，角色、背景、任务、目标均给到了，现在的prompt不用像之前那样刻板，非要有标准化结构，要把细节描述的特别清晰，合理且清晰的说明即可

这个总结很匹配我想法，其实短视频平台有很多进行冷知识科普的几百万粉丝，内容就是可以让你呀哈一下，这个也是源自于这里，Youtube上有个博主“老高”我基本上把他所有的都看完了，被誉为Youtube上最会讲故事的男人，就是挑选新奇特的观点或者事件进行讲解，例如世界上攻击力最强的10种动物等等。

然后针对一些内容主题给我做了参考和规划，这些都是我后续作为章节可以参考的

最后针对产品给我了一些结构上的建议，12我采纳但是简化了，3社交分享的确有价值，还是后置

2.2 竞品分析

寻找相关儿童类产品：

斑马百科3D 互动百科（宇宙、人体、物理等），AI 交互练习4-10 岁纪录片级 3D 模型，知识点体系化，沉浸式探索宝宝巴士科学50 + 趣味实验、100 + 科普专题、500 + 科普动画3-7 岁解答 “十万个为什么”，实验 + 问答 + 动画多形式启蒙小灯塔300 + 趣味百科动画，看 – 学 – 练三步闭环3-8 岁动画涵盖自然 / 人文 / 艺术，低门槛激发兴趣

以上竞品都是通过视频、互动进行规定范围内的知识科普，但将好奇心放在一个框框中，这个事本身就不够好奇。

结合大模型的能力，将原本的生产模式变得更为高效和简单，让更多世界上有意思的内容提供给孩子。

更新频次在3个月甚至不进行更新，内容偏叙事没有更好的引导孩子好奇心

如果问题是这样的呢：

• 世界上最能吃的动物？一天能吃一头大象！
• 火烈鸟天生就是粉红色的吗？
• 长颈鹿的血压有多高？
• 蚂蚁根本看不到人类，你知道么？

至少对我还是有些兴趣的，而且大脑对惊喜的反应强度比普通事件高出 3-5 倍，这就是为什么惊喜时刻如此难忘。

PART 03 产品规划

要求：

根据梳理结果来看，其中内容整理的成本其实较高，本身做的是内容类APP，根据当前开发时间本身已经非常极限了，因此内容上可能考虑一定舍弃，用演示内容进行完整闭环的构建

本身时间短只有10天，而且还需要不影响工作的前提下，这个任务只能通过AI进行完成，因此需要先梳理整个的产品落地步骤（全程AI开发，vibe coding：http://120.53.7.157/，构建的针对vibe coding的知识学习网站）

“比完美更重要的是完成。”—— 马克・扎克伯格

PART 04 项目执行

4.1 功能优先级划分

没有做明确的功能清单，因为很多内容是AI生成的，核心针对页面进行了优先级划分

4.2 产品需求文档

采用Gemini进行生成，Gemini-3-pro

通过AI构建不需要特别明确的产品文档，我将核心页面的一些描述进行了整理，提供给AI让AI进行完善，定义了角色、背景、页面说明、要求，因为这里我已经想好了整体的交互逻辑，因此给的是相对明确的要求。顺便也让他把需要构建页面的提示词生成了。

全部的文档就不在这里展示了，实话说写的已经很详细了，不过作为产品没有写数据相关的，可能是我提示词给我不够清晰，其实应该把数据的一些信息或者结构表明会更清晰，便于后续的后端延展。

4.3 UI设计

用的平台google——sitch

实话说实话说AI做产品UI设计这款其实非常难，很难保证页面的一致性，如果用nanobanana出图效果非常好，但AI生成不了，现在Ai可以构建各种前端能力但都是框架，里面很多AI设计巧思样式，图标等相对较难实现，不过AI在实现3D的立体效果还是挺牛的，给几个截图看看。

AI的能力可以无中生有，或者让他进行创建他很快就能实现，甚至超出预期，但如果有一个已经框架完善，结构明确的内容时候，细节的一些点就很难把控。

决策性错误，最开始没有想好呈现方式，所以规划有现实APP的样式

但是跟小组成员沟通后发现，孩子看手机比较少，手机字小，学习起来也不方便，尤其是还有文字性质的内容，然后就恍然大悟，为了节约时间，我都是以独立平台进行规划，UI废了九牛二虎才完成，都开始进入后端开发阶段了，妥妥的浪费了3天时间

最初不了解AIstudio能力，以为直接能产出前后端，构建了前后端的描述prompt，但实际上AIstudio仅能构建前端能离，非常强大，后端完全不行，因此整个规划就是UI-前端-交互-后端的链路

以上是相关页面的html内容，请根据我的描述将每个页面呈现并将其组成一个完整可用的应用

#背景

这是一个针对儿童科普的App，帮助儿童学习更多课本之外的知识，类似电子版的百科全书，孩子可以通过有趣的交互进行不同奇特的内容学习

#后端要求

1.需要构建用户表，主题表，内容表、收藏表、知识关联表

2.用户表：记录用户的信息，包含用户ID、注册账号、注册时间、使用时常、卡片阅读此书（翻转则算阅读）、收藏卡片数、学习能量

3.主题表：包含主题名称、主题图片、关联内容数，默认构建动物奥秘、史前地球、人类百科、生活真相、宇宙探险、文化趣闻这6大主题

4.内容表：每个主题下面有很多内容卡片，内容也就是孩子需要学习的东西，包含卡片ID、内容图（1:1，jpg）、问题、奇怪引导、答案标题、答案（不超过200字）、延展关联故事、故事音频mp4（通过AI自动生成）

5.收藏表：关联用户ID、用户收藏了哪些卡片，记录用户ID、卡片ID

6.知识关联表：根据每个知识自动生成3-5个层级，每个层级1-3个小知识，包含关联卡片ID、层级、知识标题、知识详情，这个表用于在卡片下拉后的知识图谱中进行关联展示

#前端要求

1.登录页面，通过手机号及密码进行注册，若登录时用户表没有该用户，则自动进行注册并将数据补充的用户表中，若登入表已经存在这个用户，则需要校验其密码是否正确，不正确则提示错误，正确则进入系统

2.首页，首页主要展示各种主题，包含主题的名称，图片，每个主题有多个章节，每个章节有10张卡片，完成比例即对应的星级，1-5级别分别对应的1-5颗星，左右滑动可以切换不同的主题；右上角展示奇奇币，每10个卡片增加1点奇奇币，当天没有学习则扣除5点奇奇币，初始为100点，向上滑动进入收藏卡牌页；点击左上角设置进入设置页面；点击触发弹出章节页面，选择章节进入学习卡片页

3.收藏页，根据用户调取收藏表进行收藏卡片的展示，点击卡片弹出卡片详情，上滑进入卡片故事页面

4.设置页面，主题默认全选，语言默认中文

内容卡片页面，通过主题进入后展示该页面，内容卡片随机在主题库中挑选进行展示，“神奇动物小知识”是主题的名称，跟数据库匹配，内容包含问题、奇怪引导、图片，左滑下一个卡片，右滑将卡片添加收藏，上滑播放这个卡片的故事，下滑进入这个卡片的知识图谱，点击卡片有反转效果，查看这个问题的答案

6.卡片回答，反转后的效果，包含答案标题、答案内容、AI根据内容生成小图标、AI生成的小吐槽，再次点击翻转回去

7.故事收听页面，可以调节大小声，AI识别重点内容进行标记

8.知识图谱页面，通过卡片页面下滑进入，知识图谱根据知识关联表进行呈现，以当前卡片为主，其余分支节点点击后会展示相应的卡片，卡片中展示延展的一些小知识

我是一个编程小白，根据以上描述生成相应的应用，中间如果有不清晰的可以提出，需要完整的复原图片中的样式，应用需要与前后端直接进行关联，一些需要AI支持的能力进行补全

生成的效果还可以，但的确问题还是比较多，需要持续调整

总之就是一言难进啊，最开始规划没有选择好，自食其果，然后我又开始调转方向，投降ipad端。

虽然有前车之鉴，但因为时间的确是太紧了，还是不做多端适配，因为前端在多端情况下要调试很久，又是调了A，B就出问题了。然后我就再一次的疯狂UI设计。

然后就又一顿输出

最终从众多的UI设计里面挑选了一组继续

因为本身stitch平台与AIstudio都是谷歌体系，可以一键直出

至此UI设计算是告一段落，大部分前端逻辑已经搞定了～但 实际上噩梦刚刚开始～

4.4 前端开发

问题了来了，因为整个项目比较庞大，我就将介绍的文档添加至描述中，进行生成

生成的结果是。。。

基本可以说是啥也不是…因为本身逻辑比较复杂，因此关联性又比较高，导致很多理解错误，那…一点一点来

我将每个HTML页面进行导出，开始进行一个一个页面进行构建，从登陆-首页-收藏-设置-卡片-左右滑动效果-翻转效果-上滑AI绘本-下滑知识图谱，以下是部分内容截图，每个页面基本上需要调整十几次才可以，部分页面需要几十次

其中翻转效果最头疼，不知道为什么总是出现透视效果，怎么调都没办法…崩溃

试了几个小时都不可以，最后还是得靠魔法打败魔法，让AI帮我出提示词，把我想要的呈现效果通过nanobanana进行展示说明，然后给我一段技术描述

终于成功了，你们不知道我经历了什么几度崩溃

中间过程就不说了，反正最后是终于算是完成了，然后在原有规划增加了一些AI能力

AI绘本、AI故事、AI语音等等，为了更好的让孩子了解和使用

因为调用的AI能力，生成效率的确是慢一些

生成的关联知识图谱，这个页面优化空间比较大，但由于时间问题先不进行调整了

至此，整个交互的闭环跑通了，理论上已经完整的应用参赛应该足够了，但是为了更好的进行展示

优化展示细节

构建后端能力，形成真正的前后端产品

4.5 展示优化

因为本身时间不多，但我是实在受不了登陆页丑了吧唧的图，因此就开始优化登陆页展示

整体来说是不错的，就是在图片展示上不太好看，准备小调整将左边更新下，为了更好的展示，左边决定用视频的样式，测试了gemini、即梦、可灵，最后还是谷歌的voe3效果好，能把所有文字正常展示出来

调整了下是不是一下子就变好了，其余的都是针对于产品的细节持续优化，这块就不额外展开了，核心就是，哪里不对改哪里

4.5 后端构建

后端开发平台claude code

很多历史就不展示了，核心提示词：

##角色

你是一个后端开发专家，同时也对前端的结构十分了解，可以独立理解前端的功能，完成后端的构建

##任务

1.了解整个前端的结构，树立出后端的规划框架，包含后端的技术栈、传输方式、表结构等

2.有限产出后端构建的规划文档，文档确认后才可以进行开发

3.在规划中若发现前端的一些结构不合理的地方对于后端构建有阻碍需要优先提出来

##目标

输出一套完整的后端规划文档

##要求

我是个技术小白，需要将技术栈、规划方案用通俗易懂的方式介绍补充给我

大概是这种，但是根据反馈的问题进行持续调整。给一些构建后端的截图：

让AI将所有表结构，积分、等级等进行自动规划和补充

前后端连调，这块需要非常细心，因为很容易出现联调的问题，很多的接口和数据对不上的问题

遇到问题一定加一句话“我是个代码小白，如果出现问题请用简介易懂的方式跟我说明问题并提供你建议的解决方案”（如果你是大神请忽略这个问题，这个目的主要是面向小白用户的）

4.6 后台构建

发现忘记让他构建后台了，后台也是最后构建，前端和后端已经完整闭环了，再进行后台的开发

后台整体生成时间还是比较长的，后台其实踩了不少坑，因为生成后台时候提示词其实应该更明确下我要哪些页面，之前是通过AI进行规划的，没有遵照前端的逻辑，自动出现很多不必要的页面，这时候就需要多次调优

表格中多了主题logo的字段，这个在数据库和前端完全没有应用，我往上翻了下，其实规划时候有提到过，但是没有仔细看，所以导致后续的修改

为什么发现这个问题，因为后面构建的AI生图，卡片每次生成成功，主题不成功，因为AI默认将图标和图片一起给到AI进行生成，导致参数报错

最后通过持续的调优，核心是针对应用端和后台字段的匹配一致性进行调优，这个都是哪里不对指哪里就行，不需要过多的修饰，除了后端丑点

因为后端基本上都是一点一点调的，这里就不做过多的的说明了

4.7 内容生成构建

对于一个以内容为主的应用，如果没有内容那啥也不是，所以内容生成为这个产品的关键，内容核心分为两块，应用端生成和后台生成

应用端：故事、音频、绘本、知识图谱都是通过应用端进行请求，美其名曰是保持内容的多样化，其实是这些内容构建后端的成本高一些，因为时间原因没有完全落到后端能力上

后台管理：主题、章节、卡片都是基础的内容，也是核心，也是需要最下心思的，往常的内容需要教研，原画师等进行规划绘画等，通过AI能力构建更便捷的能力，但AI单点生成成本又高，我直接在后台构建workflow模式实现整体的能力构建

通过输入一个主题，章节数量，章节卡片数后台的脚本会自动执行生成需要的内容

通过输入一个主题后下一步进行生成

继续后会生成相应的章节

章节生成完成后，进行卡片的构建会将卡片拆解为多个任务，继续后会生成相应的卡片图片

当前请求接口能力有限，理论上一次性生成几十上百张卡片都是可以的

然后整体流程跑一遍，没问题，开始优化prompt

4.8 prompt优化

发现AI studio所自动生成的prompt非常简单，基本都是一句话，所以在生成应用后一定让他优化prompt，先将prompt提取出来，然后根据生成结果和数据进行调优，以下是调优后的提示词，肯定还有很多提升空间

最后觉得后台太丑，最近非常喜欢像素风，所以将后台改为像素风，前端修改后台可以随便改基本不会有影响，但应用端比较复杂不可以直接进行修改，要一个一个页面修改，保证交互逻辑稳定性

仅针对页面UI进行优化，将页面优化为“简约像素风”，禁止修改交互逻辑及表结构

切记，要有一些改动一定提前github同步，关联到github后一句话就能同步

PART 05 资料整合

通过notebooklm生成PPT，然后在进行优化

PPT生成的很效率，但没想到我会在封面上遇到了门槛，“奇奇怪奇奇”一直都是“奇奇怪奇”

生成无数字，怎么强调也不可，然后开始跟AI讨论方式

• 改成英文 ❌
• 反复强调 ❌
• 拆字生成 ❌
• 强迫症大法 ❌

最后测试了可灵、即梦等平台，即梦4.5的确是出乎我意料，完美成功，同时我一直尝试的gemini也成功了

更喜欢左边gemini的画风，选择这个了

PPT也终于构建完成了

以下是针对路演时候做的文稿准备：

传统的科学教育往往枯燥乏味，孩子学不进去；而娱乐性的内容又缺乏教育价值。 “奇奇怪奇奇”看到了这个巨大的市场空白——一个既能激发兴趣，又能系统学习的科学教育平台。

三个关键词来介绍我们的核心功能：

1. 【互动】 我们采用卡片式学习设计，每张卡片都是一次探索。孩子可以通过滑动（上下左右滑动）、点击等方式与内容互动，学习不再是被动接受，而是主动探索。就像打开一个个“奇怪”的知识盒子，发现里面“奇怪”又有趣的世界。
2. 【游戏化】 我们设计了完整的积分体系：注册送100积分，完成卡片得5积分，完成章节得50积分。孩子可以用积分解锁新章节，就像玩游戏一样，不知不觉中完成了系统学习。
3. 【个性化】 AI会根据孩子的学习历史，智能推荐相关内容，调整学习难度，真正做到因材施教。每个孩子都能找到适合自己的学习路径。

以上为整个制作流程，从0-1的构建这个项目，其实开发用了3天，后面总是在不断优化内容和拓展功能，最终7天完成了整个项目。