书名：驾驭Gemini 3与Nano Banana：人人都是AI产品创客
ISBN：978-7-115-68950-4
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 薛志荣 池志炜
责任编辑 贾 静
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书基于Gemini 3与Nano Banana模型，聚焦“文档驱动开发”核心范式，系统阐释AI编程的方法与落地实践。书中精选15个覆盖工作与学习场景的实战案例，层层拆解从一句话核心想法、参考图设计风格提取、逆向总结与参考文档撰写，到MVP文档编写与技术选型的全链路产品开发逻辑，再延伸至代码优化、自定义API服务及云端部署的实操环节，助力读者掌握从产品原型到上线的完整流程。即便没有技术基础，也能快速上手并掌握与AI高效协作的核心技能。
本书适合非技术背景的创业者与自由职业者，产品经理、设计师等非技术岗位的专业人士，希望提升效率的技术从业者，以及教育工作者与学生群体阅读。
19世纪中叶，当世界首位计算机程序员Ada Lovelace写下第一行算法时，她或许没有想到，人类与机器的沟通会变得如此复杂。两百年来，编程一直是少数人掌握的技艺。我们发明了各种编程语言和工具，只为了让机器明白人类的意图。
OpenAI联合创始人Andrej Karpathy把这段历史总结得很精彩：从最初的人写代码的Software 1.0时代，到喂数据训练模型的Software 2.0时代，现在我们进入了直接对模型“念咒语”的Software 3.0时代。
在我观察科技行业的十余年里，每一次技术进步都说要“降低门槛”，但结果往往是换了一套新的复杂规则。直到今年AI编程的兴起，涌现出Gemini 3这样的大模型，才让我看到真正的质变。
早期的AI编程助手更像是个勤奋但笨拙的学徒：它能补全代码，却常常理解不了你真正想做什么；它熟悉编程语言的语法规则，却不懂产品的灵魂。
而Vibe Coding（氛围编程）正在改变这一切。写代码不再需要你真的懂编程语言的语法规则，只需要你用自然语言描述自己的“意图”和“感觉”，剩下的交给AI。
这意味着，对普通人来说，编程的门槛彻底消失了。对专家来说，代码变得像纸巾一样是“廉价的”“一次性的”“用完即弃的”。
你能想象吗？为了定位一个Bug漏洞，可以直接让AI现场写个专门的App来测试，测完就删。这在过去听起来简直不可思议，但现在使用AI的成本已经低到让这一切成为日常操作。
本书作者薛志荣和池志炜，在过去一年多的教学实践中验证了这件事。在Gemini 3和Nano Banana Pro的帮助下，AI编程从写代码变成了描述想法，从“技术活儿”变成了“创意活儿”。
曾经需要花几周时间才能开发出的功能，现在只要花几分钟写一段清晰的自然语言描述就能实现。AI能理解模糊的需求，能补全缺失的逻辑，甚至能提供设计建议。
这让我想起人类最自然的沟通方式。它从来都与严格、刻板的语法（包括编程语言的语法与书面自然语言的语法）规则无关，只关乎日常的语言、图画和手势。
当你想做一个网页时，不再需要去想HTML标签怎么写，只要描述这个页面应该有什么“感觉”“功能”。即便你完全不懂图形学，也能通过几句话，让Gemini 3生成令人惊艳的3D粒子效果，或者让 Nano Banana Pro 在瞬间完成图像风格转换。
这一切发生得自然而流畅，这正是机器正在快速学习的“理解艺术”。
书中反复强调的核心：从“写代码”到“写文档”的转变，正是这种流畅体验的基础。无论是使用Mermaid画流程图，还是使用提示词定义设计风格，用文档来驱动开发，本质上是让你用更自然的方式表达想法。
回顾计算机科学的发展历史，每一次抽象层级的提升都带来了生产力的飞跃。从机器语言到汇编语言再到高级编程语言，每一次革新都让更多人参与进来。而Vibe Coding可能是这条路上最接近终点的一站：直接用意图来编程。
作为一名长期关注科技的内容创作者，我始终相信技术应该增强人的创造能力，而非限制我们的思维。Vibe Coding正在做这件事：它让非技术背景的创业者与自由职业者，产品经理、设计师等非技术岗位的专业人士，以及希望提升效率的技术从业者，都能跨越技术壁垒，把想法变成现实。
在这本书里，你不只是学会操作Google AI Studio这个工具，更重要的是，你会掌握一套适应AI时代的思维方式。本书提炼的5项核心能力：文档撰写能力、迁移能力、“打开黑盒”的能力、“以黑盒解黑盒”的能力及“边做边知”的能力，比单纯的编程知识要持久得多。
这轮革新的意义远超任何一次工具的升级。它不只让开发更高效了，更把创造的权利交到了每个有想法的人手里。
未来已来，你需要做的，就是迈出第一步。而阅读这本书，正是你迈出的第一步。
李超凡
爱范儿副主编，AI媒体APPSO主理人
在计算机科学的历史长河中，我们一直在试图跨越一道鸿沟：人类的“意图”与机器的“执行”之间的鸿沟。
几十年来，为了跨越这道鸿沟，我们需要学习汇编语言、C++、Python等编程语言，需要理解复杂的语法、逻辑和架构。编程，曾经是少数精英手中的权杖，是通往数字世界的窄门。但今天，这道门被打开了。
当我拿到这本书的成稿时，我看到的不只是一部技术教程，更是一张通往新时代的船票。池志炜（Shadow）作为Mixlab无界社区的创始人，一直站在跨界创新的前沿。这本书体现了他对时代脉搏的敏锐把握。
在我看来，Vibe Coding的本质，是“直觉式创造”。你不再需要像工程师一样去纠结每一个分号的位置，而只需要像艺术家一样去捕捉那一瞬间的灵感，像产品经理一样去定义清晰的目标。AI 就是你的超级编译器，它能理解你的直觉，将你脑海中的灵感瞬间转化为可运行的代码、可交互的产品。
这是编程方式的改变，也是生产关系的重构。
在胜算云的后台数据中，我们每天都目睹着这种变革。我们看到不懂代码的设计师调用国内外的多模态模型生成了惊艳的营销工具；我们看到文科背景的创业者用大模型搭建起了复杂的企业知识库。他们没有写一行传统意义上的代码，但创造的价值远超过去一个十人开发小组。
如果说Vibe Coding是你的“内功”，那么AI Agent（智能体）就是你的“外挂”。
未来属于那些善于驾驭智能体的人。想象一下，你不再是一个人工作，左手是负责逻辑推理的智能体，右手是负责视觉创意的智能体，而你是指挥官，是导演，是架构师。你的生活将被重塑，繁复的劳动将被剥离，你将有更多时间去思考“做什么”，而不是“怎么做”。
这也正是胜算云存在的意义。
作为一家深耕AI基础设施的平台，胜算云的使命就是在AI时代，为每一位“开发者”提供强有力的支持，解决烦琐的模型接入难题。我们打通了大语言模型和多模态模型，构建了工业级的多云并行计算底座。我们解决了复杂的网络路由、算力调度和模型聚合问题，就是为了让你在挥洒创意时，感觉不到基础设施的存在——就像呼吸空气一样自然。
通过阅读这本书，你将掌握Vibe Coding的心法；而使用胜算云，你将获得施展心法的兵器。
但这还不够。在这里，我要向各位读者做一个预告：胜算云即将上线Agent工作流编排与执行功能。如果说现在的API是零散的功能组件，那么这个新功能就是我们为你准备的模块化智能协作引擎。它将允许你通过拖、拉、拽，将复杂的业务逻辑编排成自动化的流水线，让多个模型协同作战，实现真正的“工业级”内容生产和任务执行。
我们希望，当你读完这本书，脑海中涌现出改变世界的点子时，胜算云能立刻递给你一套调试完毕的智能协作引擎，助你突破瓶颈，把想法变成现实。
这是一个属于超级个体的时代。不要做时代的旁观者，请打开这本书，拥抱Vibe Coding，去创造，去构建，去定义未来。
胜算在握，云端共舞！
周政军
胜算云创始人
2025年7月，我们出版了国内首部聚焦Vibe Coding的著作《人人皆可Vibe编程：玩转氛围编程》，系统介绍Vibe Coding的概念、4步创作方法、5大技巧及20多个实践案例，致力于让编程如同“说话”般简单。2025年8月，我们又出版了《零基础AI编程：Cursor助力Vibe Coding实践》，进一步拆解Cursor工具在Vibe Coding中的具体应用。通过这两本书，我们向读者传递了一种全新创作模式：借助自然语言与 AI 对话，即便是没有任何编程基础的普通人，也能打造属于自己的数字产品。彼时，我们曾认为这已是AI编程领域的一次重大变革。
同期，斯坦福大学计算机系在2025年秋季学期开设了新课“CS146S: The Modern Software Developer”（现代软件开发者），该课程鼓励学生更多地使用AI工具完成开发任务和作业。据Business Insider报道，讲师Mihail Eric在课堂上对学生表示：“如果你能整个学期都不写一行代码就通过这门课，那就太棒了。”课程开设两个多月后，便已有多名学生成功发布完整的全栈应用产品。作为头部高校中首个专注于AI软件开发的正式课程，其配套教学材料已对外公开。
然而，仅时隔数月，AI技术便迎来新一轮重大升级。
2025年11月，Google发布Gemini 3（官方名称为Gemini 3 Pro） 与Nano Banana Pro，这两款产品重新定义了Vibe Coding的实践体验。若以开发者与AI的协作比例来看，过去这一比例约为7∶3——开发者需投入大量时间进行架构设计、与AI反复交互、持续调整方案；而如今，这一比例已转变为4∶6，对于部分简单应用，甚至可以达到1∶9。这意味着，只要你能清晰表达需求想法，AI便可完成绝大部分开发工作。
与此同时，过去一年中，我们举办了20多期AI编程相关的线上、线下训练营，帮助数百名学员从零开始掌握AI编程。这些教学实践让我们沉淀出一套全新方法论——如何帮助零基础学员快速上手，如何设计更高效的学习路径，如何将抽象概念转化为具体操作。
正是AI技术的突破性进展与教学实践的经验积累，促使我们决定写作这本书。我们希望让更多人了解：在Gemini 3与Nano Banana Pro的助力下，AI编程的学习门槛已降至历史最低，任何人都能成为数字世界的潜在创造者。本书每一章的内容，均经过真实教学场景的打磨与验证，确保实用性与可操作性。
在过去一年多的AI编程线下培训与指导中，学员最常提出的疑问是：“AI编程技术进化得这么快，万一几个月后出现更强大的工具，现在学的内容岂不是白学了？”
这个问题值得认真回应。经过一年多的实践总结，我们发现，AI编程真正需要掌握的并非某个具体工具或某项特定技术，而是5项核心能力。无论未来出现Gemini 4、Gemini 5，还是其他更先进的AI模型，这5项能力都将是你在AI时代立足的根基。
（1）文档撰写能力，本质是逻辑表达能力。在AI编程时代，“写代码”的重心正逐步向“写文档”转移。你需要清晰描述自身需求、需求的核心价值及产品的运作逻辑——这种表达能力，实则是个人思维逻辑的外在呈现。即便AI再强大，也需依赖你明确“方向”。
（2）迁移能力，即参考竞品的能力。你无须掌握播放器的具体底层技术原理，也无须深入了解FFmpeg的技术细节，只需找到一个现成的播放器作为参考，然后告诉AI“我想做一个类似的产品”。这种能力对非计算机专业人群尤为重要，可将其理解为“参考竞品”的思维——当你不知如何开发某款产品时，先观察他人的实现方案，再让AI协助你复刻与优化。
（3）“打开黑盒”的能力，即信息检索与分析能力。找到合适的参考对象，便已初步“打开黑盒”；但要真正理解并运用其逻辑，还需具备基础的信息检索技巧与分析思维。目前AI检索工具已较为成熟，你只需掌握精准提问的方法，即可获取所需答案。
（4）“以黑盒解黑盒”的能力，即问题转换与工具替代能力。在AI编程过程中，你难免会遇到看似专业、复杂的技术问题。此时无须深入学习相关专业知识，可换个角度思考：能否通过其他方式绕过该问题？能否用现有工具实现功能替代？在大多数情况下，80%～90%的问题只需“初步打开黑盒”便可解决；剩余10%～20%的复杂问题，往往能通过“问题转换”化解——若技术层面难以突破，可调整产品设计思路。
（5）“边做边知”的能力，即实践中学习的能力。你无须追求“先掌握所有知识，再动手实践”的模式，因为等你学完现有的所有内容，技术或许已再次更新。正确的路径是“边做边学”：遇到疑问可向AI咨询，解决一个问题便掌握一个知识点。这种“实践驱动学习”的模式，或是AI时代最高效的学习方式。
在你真正理解并掌握这5项核心能力后，技术进化速度越快，你反而越能从容应对。因为这些能力属于“元能力”——它们不依赖任何具体工具或平台，却能让你快速适应并驾驭各类新工具。
当新模型（如性能超越Gemini 2的Gemini 3）发布或未来更先进的工具出现时，你不会感到焦虑，反而会心生兴奋——这意味着你能用同样的方法做出更好的产品。当新工具让图像编辑等操作变得更便捷时，你无须担心过往技能过时，而是看到自己的创意能更快地落地。AI的进化并非你的“敌人”，而是你的“盟友”——它在持续降低创造门槛，让你的核心能力释放更大价值。
因此，请放下“学了会白学”的担忧。你真正需要修炼的，从来不是某款特定工具的使用技巧，而是上述5项能伴随你长期成长的核心能力。
本书以Google AI Studio、Gemini 3及Nano Banana Pro为核心工具，带你从零开始系统掌握Vibe Coding。你将学会用自然语言清晰描述产品构想、借助AI生成完整应用程序的技能，以及在工作与生活中运用这些技能解决实际问题。
为帮助你系统掌握Vibe Coding，本书内容安排如下。
第1章开启Vibe Coding：从Gemini 3和Nano Banana Pro的核心能力切入，揭示“从写代码到写文档”的范式转移，带你掌握文档驱动开发的实现方法。
第2章Google AI Studio深度上手：详细讲解其Playground、Build与Gallery三大模式，涵盖模型选择、参数配置、版本管理、代码导出等实操环节，助你掌握与AI高效协作的方法。
第3～4章上手AI实战工具箱开发：提供15个覆盖工作与学习场景的、由易到难的实战项目，包括营销素材生成、创意设计、产品开发、知识可视化等。通过这两章的实践，你将扎实掌握Vibe Coding的核心方法。
第5章独立上线你的应用：讲解使用Cursor精修代码、自定义API服务、在Vercel上发布应用的完整流程，助力你完成从原型到产品的全流程。
本书各章紧密衔接，旨在助力你逐步领悟AI编程的精髓，实现从理论到实践、从设计简单应用到开发复杂系统的能力跨越，最终能自如运用Vibe Coding开展独立创作。
本书面向所有对创意和技术抱有热情的读者，尤其适合以下人群。
• 零编程基础，渴望将创意快速转化为实际应用的创意从业者。
• 非技术背景，期望突破技术壁垒，独立完成产品原型或小型应用开发的专业人士（如产品经理、设计师、创业者等）。
• 具备一定编程经验，希望借助AI探索全新工作模式、提升开发效率的技术从业者。
你读完本书并完成书中练习后，收获的不仅是数个可运行的应用程序，更是一套能在AI时代持续创造价值的思维方式与行动框架。无论你是首次接触Vibe Coding的新朋友，还是读过我们其他Vibe Coding图书的老朋友，我们都相信本书能为你带来全新收获。技术在迭代，我们的方法论也在持续优化，但初心始终未变：让每一个有想法的人，都能成为自己创意的实现者。
2025年11月，Google发布了两款重磅产品：Gemini 3和Nano Banana Pro，前者是目前最先进的多模态大语言模型（Multimodal Large Language Model，MLLM）之一，后者是基于Gemini 3打造的专业级图像编辑与文本生成图像模型。这两款产品的发布，进一步降低了Vibe Coding的门槛。
在深入学习使用Gemini 3和Nano Banana Pro进行Vibe Coding的具体操作之前，我们先来认识一下这两位“新搭档”的核心能力。
在LMArena排行榜上，Gemini 3以1501分的成绩位列榜首，成为首个突破1500分的模型。其核心优势集中在超长上下文（100万Token）窗口、原生多模态理解及编程与代码生成能力这三大维度。
Gemini 3最显著的特性是100万Token（约78万汉字，或者10本书的内容）的上下文窗口，远超同期主流模型——Claude Opus 4.5为20万Token，GPT-5.1为27.2万Token，DeepSeek-V3.2为12.8万Token。这一特性使其在以下场景中展现显著优势。
• 超长文档分析：一次性处理整本书、完整研究论文、大型代码库（理解项目全局架构）；高效完成法律合同审核、专利文档检索、学术文献综述及跨文档对比。
• 长对话连贯性：在长时间对话中始终保留历史信息，复杂项目讨论不“遗忘”早期需求，多轮迭代开发维持上下文一致性。
• 多文档对比与整合：同步分析多个文档并输出综合结论，跨代码文件提供重构建议，精准识别多版本文档的差异点。
• 复杂任务处理：可将中大型项目的完整代码纳入上下文进行全局分析，无须分段拆解，大幅提升开发效率。
Gemini 3支持同时处理文本、代码、图片、音频和视频，无须依赖第三方工具转换。你只要上传一张产品草图或者一个视频，用语音描述你的想法，它就能理解你想要做什么。具体表现如下。
• 图片与PDF文件：单次提示可处理最多900张图片或900个PDF文件页面，支持一次性提交整套设计稿供其分析。
• 音频：单次提示支持最长9.5小时音频，具备转写、翻译、说话人区分（识别不同发言者）及情绪检测功能。
• 视频：单次提示可分析约1小时视频（默认分辨率）或3小时视频（低分辨率），支持直接传入YouTube网址进行内容解析。
Gemini 3在多项编程基准测试中表现出色，以下数据来自Google官方新闻和第三方机构的测评。
• LiveCodeBench Pro：Elo评分2439分，比Claude Sonnet 4.5（1418分）高出1000多分，比GPT-5.1（2243分）高出近200分，在算法问题解决领域领先。
• SWE-bench Verified：76.2% 的任务完成率，测试模型解决真实GitHub代码问题的能力，与Claude Sonnet 4.5（77.2%）、GPT-5.1（76.3%）基本持平。
• Terminal-Bench 2.0：54.2%的终端操作正确率，测试模型通过终端控制计算机的能力，显著优于其他主流模型。
• WebDev Arena：Elo评分1487分，在前端开发任务中排名第一。
Gemini 3在编程任务中的核心优势是代理式编程（Agentic Coding）。普通大语言模型是“你问一句，我答一句”，而Gemini 3能理解模糊的需求描述，自主制订执行计划，生成完整的可运行项目（而不仅是单个文件）。沃顿商学院教授Ethan Mollick在测试后评价：“Gemini 3在编程领域表现卓越，即便你并未意识到自己正在进行编程操作——因为所有计算机行为本质上都是代码的执行，而AI具备强大的代码处理能力，因此能够完成各类可通过计算机实现的任务，例如创建数据仪表板、操作网站、制作PowerPoint文件、读取文件等”。
JetBrains测试显示，Gemini 3在主流IDE中的编程任务完成率比Gemini 2.5 Pro提升超50%。实际使用中，有开发者使用了一句模糊的提示“帮我做一个拳击教练应用，用电脑摄像头追踪手部动作”，Gemini 3在2分钟左右便生成了一个完整应用：包含实时计算机视觉追踪、屏幕目标指示、评分系统、连击计数器、卡路里估算及多难度等级设置，且一次成功，无须额外调试。
Nano Banana Pro（官方名称Gemini 3 Pro Image）是Google出品的基于Gemini 3的图像编辑与文本生成图像模型，并非简单的“AI绘画工具”。在Google官方的基准测试中，它在图像编辑和文本生成图像两项任务上的Elo评分均位列第一，超越了GPT-Image 1、Flux Pro及Seedream 4.0等模型。
Nano Banana Pro的核心能力，可以概括为以下四大维度。
传统AI图像生成模型的核心痛点是，生成图像中的文字常显示为乱码。Nano Banana Pro有效解决了这一问题。根据Google官方测试，它单行文字渲染的错误率远低于同期模型：英语的错误率为3%、中文的错误率为6%、日语的错误率为7%、韩语的错误率为5%、阿拉伯语的错误率为4%。
这一能力支持直接生成带准确文字的实用素材，例如只要输入一张图片，Nano Banana Pro就可以为你生成相关的科普图，如图1-1所示。
图1-1 输入一张图生成相关的科普图
这意味着你可以直接生成带有准确文字的海报、信息图、产品标签。例如，使用如下提示词（Prompt）。
| 创建一张柏林街景图，老房子的形状组成BERLIN字母，使用蓝、红、白、黑配色。 |
Nano Banana Pro就可以生成文字清晰且与建筑自然融合的创意图像。图1-2为生成的柏林街景图。
图1-2 柏林街景图
再如，上传一张照片，并输入如下提示词。
| 将这3个黄蓝色饮料罐上的英文翻译成韩语，其他元素保持不变。 |
Nano Banana Pro就能准确完成图像内文字的本地化翻译。翻译前后效果对比如图1-3所示。
图1-3 翻译前后效果对比
Nano Banana Pro提供接近专业图像编辑软件的精细化控制能力，具体包括如下4项。
• 镜头与景深：调整拍摄角度（如俯视等），改变景深效果（让前景或背景模糊），精准聚焦画面特定区域。
• 光照与色彩：支持将白天场景转换为夜晚，调整色彩分级，添加体积光（God Rays）或散景效果。
• 分辨率与比例：支持1K、2K、4K分辨率输出，兼容1∶1、3∶2、4∶3、16∶9、9∶16、21∶9等多种宽高比，适配不同平台需求。
• 局部编辑：可选择图像特定区域进行修改，无须重新生成整张图像。
例如，上传一张音乐会现场的人物特写，使用如下提示词。
| 聚焦到人群，让这个女性变模糊。 |
Nano Banana Pro就能改变景深参数，实现背景人群清晰、前景人物虚化的效果，如图1-4所示。
图1-4 改变景深
Nano Banana Pro单次提示最多支持14张图像作为输入参考，且能保持最多5位人物的形象一致性。其核心应用场景包括如下4种。
• 产品换场景：上传衣物照片与模特照片，生成模特穿着该衣物的效果图。
• 角色一致性：为同一虚拟角色生成不同场景、不同动作的系列图像，适用于漫画创作或品牌IP打造。
• 风格迁移：上传草图与材质参考图，将草图转化为具备该材质质感的产品渲染图。
• 场景合成：上传人物、物品、背景等独立元素，通过自然语言描述即可组合成完整场景。
例如，上传14个毛绒玩具角色的独立图像，搭配使用如下提示词。
| 中景画面，14个毛茸茸的角色挤坐在磨损的米色布沙发上，部分堆在地板上；所有角色面向前方，观看沙发前低矮木桌上的复古木盒电视机；房间光线昏暗，左侧窗户透进温暖光线，电视光芒照亮角色面孔与毛茸茸质感；背景是舒适而略显杂乱的客厅，含编织地毯、摆满旧书的书架及背景中朴素的厨房元素，整体氛围温暖有趣。 |
Nano Banana Pro就能生成保持每个角色核心特征的完整场景，如图1-5所示。
图1-5 生成保持每个角色核心特征的完整场景
Nano Banana Pro继承了Gemini 3的推理能力与知识库，且能连接Google Search获取实时信息，可将信息直接转化为可视化内容。例如，你可以让它“生成今天北京的天气预报信息图”，它会先搜索最新天气数据，再生成包含准确信息的可视化图表。
这一能力在如下信息可视化场景中，具有极高的实用性。
• 教育内容：使用提示词“创建一张关于太阳能发电原理的信息图”，能基于真实知识生成准确的科普图解。
• 数据可视化：上传植物照片，使用提示词“为这株植物创建养护指南信息图”，可识别植物种类并生成包含学名、产地、光照、浇水等信息的图表。
• 食谱可视化：使用提示词“创建一张印度奶茶（Elaichi Chai）的制作步骤信息图”，能生成包含配料清单与操作步骤的视觉指南。
1.1节介绍了Gemini 3和Nano Banana Pro的多种能力，如原生多模态理解、专业级创意控制，为Vibe Coding提供了关键技术支撑。
本节将通过5个案例，展示如何将这些抽象的能力应用到可运行的产品上。其中，前4个案例来自Google AI Studio的官方示例库，无须复杂配置，用户便可直接在浏览器中在线体验，也能下载完整源代码在本地部署运行；第5个案例是我们基于Gemini 3开发的粒子动效作品，专门用于呈现AI在复杂图形编程领域的落地能力。5个案例与核心能力一览如表1-1所示。
表1-1 5个案例与核心能力一览
| 案例名称 |
核心能力展示 |
解决的问题 |
|---|---|---|
| SVG Generator |
代码生成 |
无须设计软件，用自然语言创建矢量图形 |
| Gemini OS |
代理式编程 |
AI动态生成完整的应用界面 |
| Image to Code |
多模态理解 |
将照片转换为可交互的创意编程作品 |
| ENHANCE! |
图像生成与编辑 |
无限放大图像，AI生成更高分辨率细节 |
| Lumina Lotus |
3D粒子动效 |
用自然语言描述生成复杂的WebGL粒子系统 |
当你需要为网页或应用创建一个图标时，传统流程是：打开Illustrator、Figma等设计工具，手动绘制图形、调整颜色与渐变效果，最后导出SVG文件；而使用SVG Generator，只需在图1-6所示SVG Generator界面的对话框中输入一句自然语言描述，大幅降低图标制作的门槛。如需体验该案例，可访问https://ai.studio/apps/bundled/svg_ generator。
图1-6 SVG Generator界面
SVG Generator支持接收自然语言描述，输出可直接使用的SVG矢量图形代码。典型应用示例如下。
• 输入“一个橙色的狐狸头像，使用渐变效果”。
• 输入“一个简约风格的购物车图标，蓝色描边”。
• 输入“一朵带有光晕效果的太阳花”。
AI在数秒内即可返回完整的SVG代码，代码中包含路径定义、渐变参数、颜色配置等核心要素，可直接粘贴至HTML文件中使用，或导入设计软件进行二次调整。
这个案例直观体现了Gemini 3在前端代码生成领域具有核心优势（1.1节提及Gemini 3在WebDev Arena测评中排名第一），尤其擅长前端开发相关的代码生成任务。SVG作为基于XML的矢量图形格式，本质是结构化的标记语言代码，AI需同时实现如下3层能力的融合。
• 精准理解用户的视觉意图：如“橙色狐狸”对应的色彩取值、“渐变效果”对应的视觉呈现形式。
• 严格遵循SVG语法规范：包括路径命令、渐变定义、视图窗口等技术参数的正确配置。
• 兼顾基础设计美学：确保生成的图形在颜色搭配、比例协调、视觉层次上符合通用设计标准。
这3层能力的融合，实现了从自然语言描述到设计资产生成的端到端落地，让没有专业设计与编程基础的用户也能快速制作可用的矢量图标。
1.1节提到，Gemini 3的核心优势是代理式编程——理解模糊的需求描述，自主制定执行计划，生成完整的可运行项目。Gemini OS作为该能力的极致落地案例，构建了一个完全由AI实时生成的虚拟操作系统，直观呈现了AI端到端开发的核心价值。
Gemini OS启动后会呈现标准桌面交互界面（见图1-7），但与传统操作系统不同，其桌面图标、窗口组件等所有界面元素均无预设静态资源，完全由AI实时动态生成。用户操作触发的每一次响应，本质都是一次全栈代码的即时生成与渲染，典型应用场景如下。
• 点击“Documents”图标：AI可以快速生成具备文本编辑、格式调整、保存导出等基础功能的文档编辑器界面，界面布局符合通用办公软件的操作习惯。
图1-7 Gemini OS呈现的标准桌面交互界面
• 点击“Settings”图标：AI会生成系统配置面板，支持语言切换、主题更换等基础操作，且所有配置变更实时生效。
• 点击“Games”图标：AI可生成贪吃蛇、井字棋、国际象棋等多款完整可玩的轻量级游戏，包含游戏逻辑、交互控制、计分规则等功能。
这个案例展示了Gemini 3的代理式编程能力。传统的代码生成是“输入需求→输出代码”，而Gemini OS则是“理解上下文→动态决策→生成完整功能”。在这个过程中，AI需要完成以下4件事。
• 理解当前界面状态和用户的操作意图。
• 决定生成什么类型的应用（编辑器、游戏、设置面板）。
• 生成完整的、可交互的、自包含的代码。
• 处理后续的交互事件。
这与1.1节提到的在JetBrains中，Gemini 3在主流IDE中的编程任务完成率比Gemini 2.5 Pro提升超50%相呼应——AI不只是写代码片段，而是能完成端到端的应用开发任务。
如需体验Gemini OS，可访问https://ai.studio/apps/bundled/gemini_os。
1.1节提到，Gemini 3支持同时处理文本、代码和图片，而Image to Code工具则将这3类能力深度串联——上传一张图像，AI会先分析其视觉特征，再生成具备交互功能的创意编程代码。
例如，上传一张鸟群聚集的图像（如冰面上的鸭群），AI会分析画面中的群体行为与空间分布，生成一段模拟鸟群算法（Boids算法）的p5.js代码，代码运行后粒子会像真实鸟群般呈现聚集、分离、避让的动态效果。Image to Code使用示例如图1-8所示。如需体验该案例，可访问https://ai.studio/apps/bundled/image-to-code。
图1-8 Image to Code使用示例
再如，上传一张树木图像，AI可生成递归分形树代码，点击鼠标时树枝会动态生长；上传一张水面图像，AI可生成涟漪扩散效果代码，移动鼠标时波纹会跟随鼠标轨迹。
AI不是简单地复制图像，而是理解图像的本质（运动、生长、流动），并使用代码重新表达。这个案例不仅体现了Gemini 3的多模态理解能力，更凸显了多模态的核心价值：不止于“处理图像”，更能“理解图像并转化为其他形式”。Image to Code的完整流程如下。
• 视觉分析：识别图像中的物体、色彩、构图及运动感。
• 算法匹配：将视觉特征映射至适配的创意编程算法。
• 代码生成：输出包含交互逻辑的p5.js代码。
• 构图保持：确保生成的动画与原图的边界框、视觉重心一致。
这是从理解到推理再到创作的完整链条，而非简单的格式转换。
前3个案例聚焦展示Gemini 3的核心能力，本案例则重点展示Nano Banana Pro的图像生成能力。1.1节提到Nano Banana Pro的专业级创意控制能力，ENHANCE!工具正是将这项能力应用于图像增强场景。
上传一张图像后，点击任意区域即可放大。与传统图像放大不同，ENHANCE!不会让图像变得模糊——AI会为放大区域生成全新且逻辑合理的细节，支持无限次放大操作，每次放大均能看到AI生成的新内容。
例如，上传一张城市街景图像：放大某扇窗户，AI会生成窗户内部的场景（如办公桌椅、绿植），如图1-9所示；进一步放大桌上物品，AI会生成物品的细节纹理（如杯子的陶瓷质感、纸张的褶皱），整个过程如同电影中的放大、增强特效，兼具科技感与实用性。
图1-9 AI生成窗户内部的场景
这个案例展示了Nano Banana Pro的如下两项核心能力。
• 图像理解与风格延续：AI需深度解析原图的内容、风格及上下文逻辑，确保生成的细节与原图在视觉上高度统一。
• 高分辨率细节生成：1.1节提到Nano Banana Pro支持1K、2K、4K分辨率输出，ENHANCE!正是依托这一能力，在放大过程中生成符合高分辨率标准的细节图像。
这与传统图像超分辨率算法不同：传统算法仅能通过像素插值“猜测”像素排列，生成的细节缺乏逻辑；而Nano Banana Pro能理解图像语义，生成符合上下文逻辑的新内容。
如需体验ENHANCE!，可访问https://ai.studio/apps/bundled/enhance。
前4个案例源自Google AI Studio的官方示例库，本案例则是我们基于Gemini 3开发的作品，用于展示AI在复杂图形编程领域的落地能力——通过自然语言描述，即可生成完整的WebGL粒子系统。
打开页面后，可看到由20000个发光粒子构成的3D形态，粒子会在如下4种预设形态间平滑过渡：
• Quantum Lotus（量子莲花）：参数化莲花拓扑结构，带有“呼吸”动画——花瓣会随时间动态舒展与收拢。
• Mobius Strip（默比乌斯带）：仅含一个面与一条边界的非定向曲面。
• Cardioid Nebula（心形星云）：心形曲线的3D投影形态。
• Entropy Cloud（熵云）：随机分布的混沌粒子云。
WebGL粒子效果如图1-10所示。如需体验该案例，可访问https://art.xuezhirong.com。
每30秒，粒子会自动过渡至下一种形态。你可以通过拖动画面旋转观察视角，或点击右下角按钮手动切换形态。在技术层面，所有粒子采用Additive Blending（叠加混合）模式，搭配Bloom（光晕）后处理效果，最终呈现出发光通透的视觉质感。
该案例充分体现了Gemini 3在复杂图形编程领域的代码生成能力，AI在其中需完成如下3层核心理解与转化。
• 数学概念转化：将参数方程、拓扑结构等抽象数学概念，转化为可运行的代码逻辑。
• 3D图形架构理解：掌握WebGL的核心架构模式，包括粒子系统初始化、缓冲区几何体创建、后处理效果配置等专业技术点。
• 动画原理理解：理解插值计算、缓动曲线、状态过渡等动画原理，确保形态切换过程平滑无卡顿。
图1-10 WebGL粒子效果
传统粒子动效开发需开发者具备图形学基础、Three.js（WebGL框架）使用经验及数学功底；而Gemini 3可根据自然语言描述（如“生成20000个粒子的3D莲花动效，支持4种形态切换”），直接生成包含复杂逻辑的完整项目，大幅降低复杂图形开发的门槛。
上述5个案例完整呈现了Gemini 3与Nano Banana Pro的不同能力组合，如表1-2所示。
表1-2 Gemini 3和Nano Banana Pro的不同能力组合
| 案例 |
输入 |
输出 |
核心AI能力 |
|---|---|---|---|
| SVG Generator |
文字描述 |
可复用SVG代码 |
代码生成 |
| Gemini OS |
点击交互 |
实时生成的完整应用 |
代理式编程 |
| Image to Code |
图像 |
带交互的p5.js代码 |
多模态理解+代码生成 |
| ENHANCE! |
图像+点击区域 |
高分辨率细节图像 |
图像生成+风格延续 |
| Lumina Lotus |
自然语言描述 |
WebGL粒子系统 |
复杂图形编程 |
后续章节将继续介绍如何在Google AI Studio中构建类似应用。你会发现，这些看似复杂的功能，核心往往仅是一个精心设计的提示词与几十行代码的组合。Vibe Coding的本质，正是以“写文档”（清晰描述需求、逻辑与目标）的方式，指导AI完成“写代码”的工作。
下一节将探讨这一新型协作模式——从“写代码”到“写文档”的编程范式转移。
1.2节介绍的案例呈现了Gemini 3和Nano Banana Pro的多元能力——从自然语言生成SVG代码，到动态生成完整应用，再到将照片转化为交互式艺术作品。这些案例的共同核心规律是：AI生成结果的质量，直接取决于提示词的精准度。这也引出了Vibe Coding的核心技能——撰写结构化、清晰化的需求文档。
在Vibe Coding中，存在如下两条创作路径。
• 精准控制：以结构化产品文档为指导，让AI将脑海中的想法精确落地。这种方式需投入更多前期准备，但能最大限度保证生成结果符合预期，本节将详细展开。
• 边做边探索：向AI传递简单想法，交由其自由发挥。这种方式高效随性，适用于快速原型制作、创意探索，或需求尚未明确的场景，1.4节将具体介绍。
精确控制这一创作路径，对应前言提及的核心能力——文档撰写能力，本质是逻辑表达能力。AI不具备“读心”能力，仅能基于用户提供的信息生成结果。信息越准确完整，生成的结果越贴合预期。若仅给出“帮我做一个管理系统”这类模糊描述，AI只能凭借自己的理解去猜测你想要什么；但如果清晰告知AI该管理系统的目标用户、核心痛点、关键功能及设计风格，AI就能精准交付所需产品。
AI编程并非取代开发者，而是重构人力投入的分配比例。在传统软件编程中，开发者通常将80%的时间用于编写代码，20%的时间用于思考需求；而在Vibe Coding模式下，这一比例完全反转——需投入80%的精力厘清需求、撰写清晰文档，再由AI在20%的时间内完成代码实现。这正是写好需求文档的关键价值所在。
根据实践经验，一份能让AI“秒懂”的产品说明书（见图1-11）通常由以下6个模块组成，你可以根据项目实际情况灵活组合。
• 用户画像分析（可选）：描述产品的目标用户及其特征和使用习惯。
• 场景故事（可选）：通过具体场景说明用户在什么情况下会用这个产品。
• 功能描述和交互流程（可选）：列出产品的核心功能和优先级，并描述相关交互流程。
• Mermaid描述的产品架构（推荐）：用流程图清晰展示产品的整体结构和业务流程。
• 参考图或设计系统（可选）：提供视觉参考，定义产品的设计风格。
• 技术选型或代码参考（可选）：说明技术栈偏好或提供代码示例。
图1-11 一份能让AI“秒懂”的产品说明书
需要注意的是，产品说明书的模块并非越多越好，应该根据项目复杂度进行合理选择。若是简单工具类项目，仅需包含功能描述和交互流程与Mermaid描述的产品架构两个模块即可满足需求；若是面向特定用户群体的复杂产品，则需补充用户画像分析、场景故事等模块，帮助AI更全面地理解需求。
不少人会过度纠结“文档是否足够专业”“格式是否规范”，但这些并非关键。评判Vibe Coding产品文档好坏的唯一标准，是AI生成的结果是否与你的预期一致。
若AI生成的结果符合预期，说明文档已有效传递需求；若未达预期，则需有针对性地调整文档，而非怀疑AI的能力。未达预期时可从3个维度审视自己的产品说明书文档：关键信息是否完整清晰？是否存在相互矛盾的要求？核心需求是否被冗余细节掩盖？
产品说明书文档并非一次性完成的静态作品，它的完成是一个持续优化的动态过程。你可以先撰写一个基础版本的文档让 AI 生成初始结果，再根据结果反推文档的改进点，优化后重新生成，生成后再次调整，形成一个良性循环。
通过这样的迭代循环，你会逐渐掌握精准向AI传递需求的方式，文档对需求的表达也会越来越精准，最终实现AI生成结果与预期的高度匹配。
在动手开发之前，需要先明确3个核心问题：产品为谁而做？用户会在什么场景下使用？产品需具备哪些核心功能？这3个问题的答案，恰好对应用户画像分析、场景故事与功能描述和交互流程这三大基础要素。
好消息是，你无须从零撰写这些内容，可以借助以下提示词让AI帮你快速生成一份结构化的产品说明书（使用时替换{{}}中的产品想法即可）。
| 帮我设计一款**{{我想做一个工具，上传产品图片，AI自动将其融合到不同的场景中，生成产品宣传图}}**，需要清晰地定义其功能范围和应用场景，包括如下4个步骤。 - **用户画像分析**：明确目标用户的特征、痛点和需求。 - **场景故事描述**：用具体的场景描述产品如何解决用户问题。 - **功能边界确定**：定义产品能做什么，不能做什么。 - **交互流程设计**：规划用户使用产品的流程和交互方式。
采用MVP原则，实现包含最少功能的产品。 输出MVP描述。 1． 典型用户画像：一句话描述。 2． 场景故事：一句话描述。 3． 功能：用列表描述（只描述明确要实现的功能，不需要的功能不描述）。 4． 交互流程：用列表描述。 |
AI会输出包含用户画像、场景故事、功能描述及交互流程四大要素的完整文档。要做好结果的评估与优化，需先理解这四大要素的核心含义。
用户画像是对目标用户的具体描述，而非“所有人都能用”的泛泛表述，需精准覆盖年龄、职业、使用习惯、核心痛点等细节。清晰的用户画像能帮助AI明确产品的核心问题优先级、界面设计方向及交互流程复杂度。
例如，你要开发一个招聘助手，可以这样描述用户画像：“目标用户为30～40岁的企业HR（人力资源）经理，每天需处理50份以上简历，习惯用Excel管理候选人信息，常因信息分散而遗漏重要人选。他们技术水平中等，更看重效率与准确性，而非花哨功能。”这种描述能让AI明确产品需满足简单易用、聚焦核心功能、能快速上手的核心要求。
描述用户画像时需遵循“具体大于抽象”的原则，避免模糊表述。不要说“面向所有需要招聘的公司的HR经理”，而是说“面向团队规模为10～50人、没有专门招聘系统预算的中小型互联网公司的HR经理”，描述越具体，AI对需求的理解越精准。
场景故事是通过具体案例，说明用户使用产品的时机、操作流程及预期结果。它能将抽象需求转化为具体场景，帮助AI更准确地理解产品使用逻辑。
继续以招聘助手为例，你可以这样描写场景故事：“周一早上，HR经理李明打开邮箱，发现周末积累了30封简历。他将简历批量上传至招聘助手，系统自动解析姓名、学历、工作经验等关键信息，并按岗位要求给出1～5分的匹配度评分。李明仅需查看4分以上的简历，10分钟内便完成初筛，节省了2小时人工筛选时间。”
这样的场景故事能自然传递核心功能点（支持批量上传、自动解析、智能评分、按评分筛选），比单纯列举功能更具说服力。
撰写场景故事需遵循“真实场景优先”原则，优先采用真实观察或用户访谈获取的场景：为自己做产品可回想自身遇到的痛点的情境，为他人做产品可记录真实用户的操作流程。一个完整的场景故事应包含时间、地点、用户角色、核心问题、使用过程及最终结果。
功能描述是用清晰的语言说明产品的具体能力。
例如，简历自动评分功能可描述为：“用户上传简历后，系统自动解析内容，根据岗位要求（学历、工作年限、技能匹配度）给出1～5分评分并显示评分理由，评分准确率需达到80%以上。”这种描述比“实现简历评分功能”更清晰，既明确了文件上传、内容解析、智能评分、结果展示等子功能，也给出了明确的质量标准。
在提示词中只描述明确需要实现的功能，本质是最小可行产品（Minimum Viable Product，MVP）原则：用最少的核心功能验证产品价值，而不是一开始就堆砌大量非必要功能。
撰写功能描述需遵循“核心价值优先”原则。你可以先思考：若产品仅能实现一个功能，那么这个功能是什么？该功能即为核心价值，需详细阐述；其他围绕核心价值的辅助功能，简要说明即可。
以招聘助手为例，其核心价值是“快速筛选简历”，那么简历解析与智能评分就是核心功能，而候选人管理、面试日程安排等功能可规划至后续版本。
交互流程是用户使用产品完成目标的完整步骤，清晰的流程能帮助AI理解产品操作逻辑，进而生成更合理的界面与功能。
仍以招聘助手为例，其交互流程可描述为：用户打开应用→点击上传按钮→选择简历文件（支持批量上传）→查看系统解析进度→查看候选人列表及评分→点击目标候选人查看详情→标记候选人状态（通过/待定/淘汰）。
撰写交互流程需遵循“用户视角优先”原则，每一步都要从用户角度描述，而非系统角度。例如，避免描述“系统调用AI接口进行简历解析”，应表述为“用户看到解析进度条”。用户视角优先的描述可帮助AI明确所需的界面反馈形式（如进度条、加载动画、成功提示等）。同时，交互流程需线性化并具备可预测性——确保用户在每一步都清晰知晓下一步操作。
AI生成的产品说明书文档初稿通常需要调整，可从以下4个维度检查优化。
• 用户画像是否具体？若用户画像过于宽泛，可以追问AI“请细化目标用户的职业、年龄段、技术水平及核心痛点”。
• 场景故事是否真实？若AI给出的场景故事脱离实际，可以用自身或用户的真实经历替换AI编造的内容。
• 功能描述是否聚焦？若功能描述过长，需筛选核心必要功能，剔除锦上添花的非核心项，坚守MVP原则。
• 交互流程是否顺畅？在脑中模拟一遍完整操作流程，排查是否存在卡顿、困惑或逻辑断层的环节。
完成产品说明书后，下一步需将抽象的产品思路转化为可视化内容。Mermaid是一款通过文本语法生成流程图的工具，无须学习复杂的绘图软件操作，仅需几行文本代码，就能清晰描述产品的整体架构与交互逻辑。在Vibe Coding中，Mermaid架构图能将文字描述的产品结构转化为结构化、可视化的逻辑图，帮助AI更精准地理解产品的模块划分、功能关联及交互流程。
你可以使用如下简单提示词，让AI基于已完成的产品说明书生成Mermaid流程图。
| 使用Mermaid格式展示MVP，输出仅包含核心功能和交互的mermaid：flowchart TB。 |
例如，当你要做一个货币汇率转换计算器时，AI会生成类似这样的代码。
| flowchart TB A[用户打开计算器] --> B[显示默认汇率CNY→USD] B --> C[用户输入金额] C --> D[自动计算目标货币金额] B --> E[用户切换货币对] E --> D D --> F[显示结果+更新时间] |
上述代码在Mermaid Live Editor（在线编辑器）中可以渲染成图1-12所示的效果。
图1-12 Mermaid渲染效果
Mermaid的语法直观易懂，只需掌握如下几个核心规则，就能快速读懂并修改AI生成的架构图表。
• flowchart TB：表示流程图的渲染方向为从上到下（Top to Bottom）；若需从左到右展示，可替换为flowchart LR（Left to Right）。
• 方括号[]：用于定义普通流程节点，如A[用户登录]。
• 花括号{}：用于定义菱形决策节点，如B{是否登录成功}。
• 箭头-->：用于表示节点间的连接线。
• 箭头上添加文字：可在箭头后通过|文字|补充说明，如-->|点击开始|。
使用Mermaid生成图表的关键前提是：语法必须完全准确才能正常渲染。即便仅存在微小的语法错误（如箭头符号写错、括号不匹配、标点遗漏等），都会导致整个图表无法显示。
你可以通过Mermaid Live Editor实时预览并修改流程图。将AI生成的Mermaid代码粘贴至编辑器中，若代码无法渲染，可直接将错误提示信息发送给AI，并使用如下提示词。
| 这段Mermaid代码无法正常渲染，请定位语法错误并修正。 |
AI通常能快速识别问题并完成修复。
参考图或者设计系统属于产品需求落地的可选模块：若你对产品视觉风格没有特定要求，可直接跳过此步骤，由AI在生成代码时自主定义样式；若你有明确的视觉设计规范（如品牌色、组件风格等），则设计系统需纳入产品架构范畴，必须在项目启动前明确定义。
视觉风格会渗透到产品的每一个页面、每一个组件中，是产品体验的核心组成部分。如果在开发中途调整配色、组件样式等核心视觉要素，AI需批量修改已生成的大量代码——这种操作不仅效率低下，还可能出现遗漏部分页面、修改后不同模块样式不一致等问题，导致额外返工。因此，提前明确设计系统，能从源头避免这类问题。
设计系统的核心要素可概括为如下四大类，它们共同构成产品的视觉与样式规范。
• 颜色方案：定义产品的主色调、辅助色、背景色、文字色等，所有颜色需协调统一，契合产品调性（如企业工具多用沉稳的蓝灰色系，创意产品可采用活泼的高饱和色系）。
• 字体选择：明确不同场景的字体规范，通常包括标题字体、正文字体、代码字体等，兼顾可读性与产品风格。
• 间距规范：统一页面内、组件间的间距标准（如内边距、外边距、行高），确保页面布局整齐有序，避免视觉杂乱。
• 组件样式：定义按钮、输入框、弹窗、卡片等核心组件的样式（如圆角半径大小、边框粗细、hover状态效果），保证同类组件在全产品内风格一致。
定义设计系统前，需先锚定目标用户群体。不同用户群体对视觉设计的需求有显著差异。
• 面向老年人的产品：需采用大字体、高对比度配色、简洁布局，降低操作认知成本。
• 面向企业用户的工具：需遵循简洁专业的风格，减少冗余装饰，突出功能实用性。
• 面向年轻人的创意产品：可采用活泼多彩的配色、个性化组件样式，契合目标群体的审美偏好。
明确用户群体后，可通过参考图具象化设计风格。参考图的获取途径主要有如下两种。
• 设计平台检索：在Pinterest、Dribbble、Behance、站酷（ZCOOL）等专业设计平台，搜索与产品调性、用户群体匹配的现成设计案例。
• AI生成效果图：通过AI图像生成工具（如Nano Banana Pro）生成符合预期的视觉参考图，具体操作可参考3.2.2节。
获取参考图后，可通过以下两种方式传递给AI，实现视觉要求的精准落地。
（1）直接附参考图。最便捷的方式是将参考图嵌入产品说明书，同时告知AI：
| 产品设计风格完全参考此图。 |
该方式无须手动编写烦琐的设计规范，将颜色、字体、组件样式等细节交由AI自主解析，适配快速开发场景。
（2）生成结构化设计系统文档。若需对视觉风格进行精细化控制，可使用以下提示词，让AI基于参考图解析并生成结构化的设计系统文档。
| #
## 你是一位拥有史蒂夫·乔布斯般审美趣味的**UI/UX设计专家**，专精于**"移动优先"** 和 **"桌面端响应式"** 设计。你精通各种设计风格，能根据用户指令融合创新，专门基于用户上传的界面设计图片进行深度分析并生成UI设计系统文档。
## 1． **高保真分析**：从设计图片中提取像素级细节、阴影效果、渐变处理和现代设计元素 2． **设计一致性**：识别色彩、字体、间距、组件样式和图标的统一性规律 3． **用户体验洞察**：分析用户流程、交互逻辑和信息架构的设计意图 4． **现代设计趋势**：掌握玻璃拟物、新拟物、极简扁平等当前主流设计风格
## 基于用户上传的界面设计图片或需求描述，你需要提炼设计语言、视觉风格和基础规范，帮助建立具有系统化、风格一致性的UI设计系统。
## - **设计风格**：设计理念与视觉特征 - **颜色系统**：主色调、辅助色、功能色 - **组件样式**：按钮、卡片、输入框等组件外观 - **圆角边框**：圆角半径、边框样式规律 - **阴影效果**：投影、光影视觉层次 - **图标风格**：图标设计特征与应用规范
## 以 **Markdown格式**生成精简的UI设计系统文档，**控制在200字以内**，提供标准化设计指南，确保界面一致性和专业性。分析过程逐步展示，完成后可根据需要修改补充。
### ## 设计系统 ### 设计风格 ××× ### 颜色系统 ××× ### 组件样式 ××× ### 圆角边框 ××× ### 阴影效果 ××× ### 图标风格 ××× |
实际使用时，你可以先将以上提示词发送至AI，随后上传已准备好的设计参考图。AI会基于参考图的视觉特征，生成一份包含具体参数的结构化文档，文档中会明确标注主色值、圆角半径大小、阴影效果等具体参数。将这个结构化文档放到产品说明书里，AI在开发时就会遵循这些规范。
在你完成了用户画像分析、场景故事、功能描述和交互流程、Mermaid描述的产品架构、参考图或设计系统后，最后一个可选模块是技术选型和代码参考。该模块的核心作用是向AI明确技术栈选型、代码风格规范及已有方案参考方向。这个模块虽为可选模块，但对有技术偏好（如指定前端框架、后端语言）或需与现有项目集成的场景而言，能大幅提升AI生成代码的质量与精准度。
如果需要AI调用特定的外部服务，提供完整的API示例代码及返回格式示例是最高效的传递方式，但是这种方法适用于集成第三方服务、更换模型提供方或实现异步任务等场景。
一份完整的API规范需涵盖四大要素：请求方式、请求地址、请求参数及返回格式。以集成视频生成API为例，可按如下方式提供参考。
| 视频API采用异步任务方式，<token> 是API Key。image字段是参考图像，支持Base64编码或图片URL。返回的request_id是任务编号，需要定时请求获取任务进度。
请求示例： curl --location --request POST 'https://router.shengsuanyun.com/ --header 'Authorization: Bearer <token>' \ --header 'Content-Type: application/json' \ --data-raw '{ "model": "kling/kling-v1-6", "image": "https://picsum.photos/500/800", "prompt": "让图片中的人物微笑并轻轻点头", "duration": "10" }'
返回格式： {"code":"success","data":{"request_id":"xxx","status":"SUBMITTING",
获取进度： curl --location --request GET 'https://router.shengsuanyun.com/ --header 'Authorization: Bearer <token>'
完成后返回： {"code":"success","data":{"status":"COMPLETED","progress":"100%", |
以上API规范，能向AI传递三大关键信息：如何发起服务请求、如何解析返回数据及如何处理异步任务。基于这些信息，AI可生成包含提交任务、轮询进度、获取结果的完整逻辑，确保外部服务集成逻辑的完整性与正确性。
在给AI提供技术选型或参考代码时，需要注意如下3个事项。
（1）精准筛选参考内容，避免信息冗余。避免一次性提供大量无关资料，防止AI混淆核心需求。应根据当前开发任务，筛选最相关的参考内容。例如，如果你要开发用户登录功能，可以有针对性地提供3类参考：历史项目的登录模块代码、身份认证库的官方文档及偏好的表单验证实现方式，这样AI能聚焦在具体问题上，生成更精准的代码。
（2）明确传递技术偏好，统一风格规范。例如，“请参考该项目的代码结构，采用React Hooks而非Class组件开发”“遵循此文档的API调用规范，使用async/await语法替代Promise链”。这类明确指示能帮助AI精准匹配你的技术选型和代码风格。
（3）引用官方代码示例，保障正确性。若对AI使用的库或方法不熟悉，可以从官方文档中提取关键代码示例提供给AI，这样既能保证代码的正确性，又能给AI提供明确的实现路径。例如，需要修改模型服务地址时，可以提取官方示例代码并告知AI需求。
| 帮我修改geminiUrl的地址： import { setDefaultBaseUrls } from '@google/genai'； setDefaultBaseUrls({ geminiUrl: 'https://router.shengsuanyun.com/ |
产品说明书的六大模块——用户画像分析、场景故事、功能描述和交互流程、Mermaid描述的产品架构、参考图或设计系统、技术选型或代码参考，本节已逐一讲解如何借助AI快速生成这些内容。完成这些内容正是前言中提到的5项核心能力中的两项的具体落地。
• 文档撰写能力：集中体现在用户画像分析、场景故事、功能描述和交互流程与Mermaid描述的产品架构中，通过结构化文字与可视化图表，将模糊需求转化为AI可以理解的清晰逻辑。
• 迁移能力：集中体现在参考图或设计系统、技术选型或代码参考中。你无须从零构建设计规范或技术逻辑，只需提供参考图、开源代码、官方示例等素材，即可让AI复刻并优化现有方案。
实践本节内容，需始终牢记：AI生成结果的质量，直接取决于提示词的精准度；评判Vibe Coding产品文档好坏的唯一标准，是AI生成的结果是否与你的预期一致。如果AI生成的结果不符合预期，回头审视产品说明书文档，持续迭代，直到满意为止。
1.3节介绍了如何撰写一份能让AI“秒懂”的产品说明书，并借助AI高效落地为具体成果。但并非所有创作场景都适合提前撰写完整的产品说明书。
设想一下这些场景：你想制作一款粒子特效，却尚未明确最终呈现效果；你想开发一款小游戏，玩法仍在脑海中模糊酝酿；你想打造一件交互式艺术装置，具体交互方式需边做边调试。这些场景的共同特征是：你只有一个大致的创作方向，但缺乏明确的最终目标。如果强行按照1.3节的方法，你会发现根本无从开始——因为你尚未明确自己想要什么。
本节将介绍另一条创作路径：边做边探索。这种方式无须提前规划所有细节，而是从一个模糊想法出发，通过与AI的持续交互，让产品在迭代中逐步成型。这对应了前言中提及的5项核心能力中的4项：迁移能力（即参考竞品的能力）、“打开黑盒”的能力（即信息检索与分析能力）、“以黑盒解黑盒”的能力（即问题转换与工具替代能力）与“边做边知”的能力（即实践中学习的能力）。
在第3章的案例中，你会发现很多产品的起点仅是一句话。例如，“开发一个工具，用户输入营销文案后，它可自动生成适配不同社交媒体平台的配图”，或是“开发一个工具，上传人物照片后，AI能自动生成多种不同发型的效果图，让客户在剪发前就能看到效果”。
一句话即可生成一款产品的主要原因有以下两点。
• Gemini 3作为推理模型，具备出色的意图理解能力。当你给出模糊需求时，它会主动拆解并分析：用户需要何种技术方案？界面应如何设计？需处理哪些边界情况？这种意图理解能力使AI能从一句话中推导并补全完整的产品逻辑。
• 诸多产品类型在AI的训练数据中已存在大量案例，例如营销配图工具、智能发型试换工具、待办事项管理器等均为常见产品模式。一旦你的需求契合这些模式，AI便能基于其学习过的海量同类项目，自动补充技术细节、界面设计及交互流程。
一句话生成的核心原则是敢于模糊。你无须在第一次与AI交互时就厘清所有细节，只需明确核心意图，让AI先输出一个可运行的版本。看到实际效果后，再确定需调整的地方——这种方式远比凭空构想高效。
当然，一句话生成不意味着放弃控制。若你对设计风格有明确要求，可补充一句设计描述，或上传一张参考图；若你对技术方案有偏好，可以指定使用某个框架或库。关键在于区分“必须明确的内容”与“可交由AI决定的内容”——前者明确说明，后者交由AI处理。
用参考来指导AI，对应了前言中提到的第二项核心能力：迁移能力。你无须知道播放器的底层技术原理，只需找到一个已有的播放器作为参考，然后告诉AI：“我想做一个类似的东西。”
参考图片是最直观的方式。在第3章中，我们展示了如何用参考图提取设计风格：在网络上找到喜欢的UI风格参考图，上传给AI，让它分析颜色系统、组件样式、圆角边框、阴影效果等设计元素，输出一份设计系统文档。将该文档与你的一句话需求一同发给AI，它就能生成符合该风格的产品。
以 AI 生成设计稿作为参考是另一种方式。当你对设计风格有想法但难以用文字描述时，可先用Nano Banana等图像生成模型生成GUI设计稿，再将设计稿图片与功能描述作为提示词一同输入Google AI Studio的Build模式的首页界面的输入框（详见2.2.2节），让AI同时理解视觉设计和功能需求。第3章使用草图生成动态海报的案例便采用了这种方式，尤其适用于视觉效果优先级较高的产品。
参考视频是第三种可行方式。若你想开发一款游戏或制作动效，可录制一段类似效果的视频，或找到网上的示例视频，让AI分析视频中的交互逻辑和视觉效果，进而实现类似功能。Gemini 3具备出色的视频理解能力，能够解析视频中的动作序列、界面变化及交互流程，并将其转化为可实现的功能描述。
这对应了前言中提到的第三项核心能力：“打开黑盒”的能力。AI生成的产品对你来说可能是个黑盒子——看不懂AI做了什么、不知道选什么、不知道下一步做什么。好消息是，AI本身就是打开黑盒子的最佳工具。
逆向总结法可以解决“看不懂AI做了什么”的问题。在AI生成基础版本后，你可让其自行总结，例如输入以下提示词：
| 总结下项目的功能，输出Markdown文档。 |
AI会输出一份包含核心功能、所用技术栈、使用流程等内容的结构化功能描述总结，借助这份总结，你能快速理解AI的实现思路。
参考文档写法是迭代优化的核心方法。当你需要添加新功能时，可参考总结中已有功能的描述格式撰写需求，这能让AI更易理解你的意图，并保持整体风格的一致性。例如，在第3章的智能发型试换工具案例中，添加“调整人物角度”功能时，便参考了总结文档中“身份保留、环境融合”的描述格式，以相同结构和风格提出新需求。这种“参考文档写法”的方法能让迭代过程更顺畅，降低决策风险。
让AI推荐设计方案解决了“不知道选什么”的问题。与其让AI直接做决定，不如让它给出几种方案，例如输入以下提示词。
| 根据项目的情况，给我推荐3种不同的UI方案，要求列出优缺点对比。 |
AI会提供不同风格的设计方案，并说明各自的优缺点，你只需选定方案并让AI实现即可。这种“先看菜单再点菜”的方式，比“让AI随机生成”更具可控性。
让 AI 制定迭代计划解决了“不知道下一步做什么”的问题。完成基础版本后，可以让AI协助你规划，例如输入以下提示词：
| 制定迭代计划，按照精益开发的方法。注意：不需要更改代码，只输出文字建议。 |
AI会按优先级和复杂度分阶段规划功能。拿到计划后，你可以从中挑选所需功能，复制描述作为下一轮输入。由于AI的计划已经考虑了技术可行性，你只需做出选择即可。
可视化标注反馈解决了“难以用文字精准描述”的问题。当界面上某个区域存在问题时，可以直接在截图上圈出问题区域并上传给AI。在Google AI Studio中，点击预览界面右上角的标注按钮即可进行操作（详见2.2.3节），AI能理解标注内容并做出有针对性的修改。
这对应了前言中提到的第四项核心能力：“以黑盒解黑盒”的能力。在AI编程过程中，你一定会遇到一些看起来很专业、很复杂的技术问题。这时候，你无须真的去学习那些专业知识，而是可以换一个角度思考：能不能让AI帮你解决？能不能换一种方式绕过这个问题？
用MVP描述生成产品说明书文档是架构思维的核心方法。对于复杂应用，你可以使用MVP描述让AI生成包含用户画像、场景故事、功能描述、交互流程的产品说明书文档。在第3章和第4章的多个复杂案例（产品场景虚拟拍摄、AI角色动图生成器、AI记忆宫殿3D生成器、一词一课教学微视频生成器）中，都使用了这种方式。你只需要提供核心需求描述，AI会帮你梳理用户画像、场景故事、功能描述和交互流程，形成完整的MVP文档。这种方式虽然前期投入较多，但能确保复杂功能的正确实现。
让 AI 制定技术选型就是典型的例子。当你有了产品需求，但不知道该用什么技术方案时，可以直接告诉AI。
| 针对以上的MVP文档，基于React框架，给出核心技术选型，需要降低实现的复杂性。 |
AI会推荐合适的库和框架，并解释为什么选择它们。例如，对于GIF合成，AI可能推荐gif.js；对于手势识别，AI可能推荐MediaPipe。你无须自己调研这些技术，只需要让AI按照自己的建议去实现。
约束输出格式来简化处理是另一个实用技巧。有时候，问题的难点不在于让AI生成内容，而在于如何处理AI生成的结果。例如，在3.2.4节的AI角色动图生成器案例中，直接让AI生成多张连续动作图片会有一致性问题——每张图的角色外观可能不一样。解决方案不是去研究如何保持一致性，而是换一种输出格式。
| 生成一个3×3的九宫格图（雪碧图），内容为[角色描述]正在[动作描述]。背景必须为纯白色。所有9帧的尺寸和比例都必须完全一致。 |
通过强制AI输出一张九宫格图，所有动作帧都在同一张图里，一致性问题自然解决。前端只需要把图片九等分，不需要做复杂的边缘检测。这种“通过约束输出来绕过难题”的思维，能让很多复杂问题变简单。
引导式提问解决了“感觉不对但说不清”的问题。当你觉得生成的产品有问题时，可以直接问AI。
| 目前的审核逻辑是如何实现的？有哪些可以优化的地方？ |
AI会分析当前实现，指出潜在问题。例如，它可能会发现自己只是用了一个通用的提示词，没有基于真实规则——这种“流畅幻觉”是AI生成代码中常见的问题。你也可以用“这个想法怎么样？”来征求AI的意见，让它在动手前帮你发现方案的漏洞。
让 AI 优化系统提示词（System Prompt）可以解决“不会写提示词”的问题。AI生成的应用内部通常包含一个系统提示词，用于控制AI的行为。你可以直接问AI。
| 针对系统提示词，有哪些地方可以优化？ |
AI会分析当前提示词的问题，并给出优化建议。你不需要自己懂提示工程，让AI来审视和改进AI的提示词就行了。
用AI评估AI解决了“怎么知道哪个更好”的问题。当你有多个方案（例如不同的提示词写法），不确定哪个效果更好时，可以让AI来当裁判。这是元提示工程（meta-prompting）技术的典型应用：用一个AI模型（评估器）来评估另一个AI模型（被测试提示词）的输出质量。3.3.1 节的提示词批量测试与评估工具就是这个思路：用一个AI模型批量测试不同的提示词，再用另一个AI模型评估每个提示词的输出质量，自动给出评分和理由。你无须自己去逐个比较各个方案，让AI帮你选就行了。这种“用AI评估AI”的方式，实现了提示词质量评估的自动化，避免了手动测试的低效和主观性。
1.3节和1.4节介绍了精确控制和边做边探索这两条不同的创作路径。两条创作路径并不是非此即彼的关系。在实际开发中，你往往会混合使用：先用一句话生成基础版本，看到效果后发现需要精准控制某些功能，再补充详细的文档描述；或者写好核心功能的文档，但把设计风格留给AI自由发挥。
选择哪种方式，主要取决于以下3个因素。
• 对产品功能描述的清晰程度：越清楚想要什么，越适合使用精确控制方式；越不清楚想要什么，越适合边做边探索。
• 产品的性质：工具类产品通常功能明确，适合使用精确控制方式；创意类产品（游戏、特效）往往需要边做边探索。
• 迭代成本：如果每次生成都需要很长时间或很高成本，值得花更多时间写清楚需求，适合使用精确控制方式；如果生成速度很快，不妨先试试效果，适合使用边做边探索方式。
根据项目复杂度，你可以选择不同的方法组合。
• 简单工具：一句话核心想法+设计系统。适合快速验证想法，如智能生成社交媒体配图工具、品牌MIDI音乐生成器。
• 中等复杂度：一句话核心想法+逆向总结+参考文档写法+迭代优化。适合需要精确控制和包含复杂功能的工具，如智能发型试换工具等。
• 复杂应用：MVP描述+技术选型+约束输出格式。适合需要多模型协作、完整技术选型的商业级应用，如AI角色动图生成器、AI记忆宫殿3D生成器、一词一课教学微视频生成器等。
无论选择哪种方式，核心都是：你给AI的信息越准确，AI生成的结果就越符合你的期望。只不过，“准确”不一定意味着“详细”。一张精准的参考图，可能比一千字的文字描述更有效；一个明确的约束条件，可能比详细的功能描述更能保证生成结果的质量。
掌握了这两条创作路径，你就拥有了应对各种应用开发场景的能力。接下来，让我们进入第2章，深入了解Google AI Studio这个核心工具的使用方法。
UI设计系统分析专家
角色定位
核心能力与原则
功能说明
分析内容
输出成果
输出格式
