<p>小编最近用 Cursor、Claude Code 等工具，Vibe Coding 了一些乱七八糟的小玩意儿，但需要消耗公司给大家发放的 token。</p>
<p>本着给公司省钱的原则，今天这篇小短文，就为大家分享一个如何通过 token 免费的 <strong>Google AI Studio</strong><sup><strong>[1]</strong></sup> 来 Vibe Coding，零代码快速生成你需要的 AI 应用。</p>
<p>本文和数据库完全无关，纯好物分享，大家可以放心阅读。</p>
<h1 id="背景"><strong>背景</strong></h1>
<p>前一段儿时间，有一个研发大佬给小编分享了一个应用。打开一看，上写 “唐诗三百首”，误以为是给他家娃做的小玩具，然后就直接敷衍过去了。</p>
<p>前两天该大佬又在公司内部给大家一起分享了他做的这个东西，大意是他用 Google AI Studio 零代码快速生成了一个和 seekdb 相关的应用。分享很精彩，后面好像也会有专人负责把他的分享整理并发布（欢迎大家关注）。</p>
<p>可惜大佬的应用只和诗词歌赋、电影、影评这些东西有关，小编的文学素养太低，实在看不明白这些文艺青年喜欢的东西，所以这次不给大家分享这种高端货，只截个图意思一下好了。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953878-1182512838.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953976-497782824.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953900-105842795.png" > </p>
<p>昨天中午碰巧得知 <strong>Google AI Studio 的 token 免费的，而且可以一键上传代码到 github，所以一下子就激起了我的兴趣</strong>！实践才能出真知，既然是免费的，那就必须要去试用下了。</p>
<p>没想到用完之后，效果出奇的好，所以也在这里和大家分享下 —— 如何通过这个 Google AI Studio 来 vibe coding 出一个对于公众号小编来说，更实用的东西~</p>
<h1 id="小编的需求"><strong>小编的需求</strong></h1>
<p>最近小编遇到了一个痛点，就是在发布文章时需要一张封面图</p>
<p>如果随便拿文章里的一张流程图或架构图当封面，略显敷衍；如果随便配一张游戏截图，过于儿戏（虽然经常这样做）；如果让设计团队的同学给我打黑工，又不好意思总浪费人家的时间。</p>
<p>然后试了一些通过自然语言生成配图的应用，虽然生成的图片是很漂亮的，但无论提示词怎么写，AI 老是喜欢自由发挥，最后的效果总和人类脑子里想象的那张图片相去甚远，然后就是无休止地通过更多提示词缓慢优化，极其麻烦。</p>
<p>所以想试试用 Google AI Studio 生成一个应用，输入一张随手涂鸦的草图，然后让 AI 基于人类脑子里的这张草图，加工绘制成指定风格的漂亮图。</p>
<h1 id="效果"><strong>效果</strong></h1>
<p>我的输入是用鼠标画了一张草图，哆啦 A 梦张大了嘴巴，说：“好惨呀”。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954032-1423217758.png" > </p>
<p>然后是应用的输出，最上面这张图的风格我选择的是 “精致素描”，出来的效果和我脑子里的东西几乎一模一样，不需要再反复调校。创意历史里的图片是选择其他画风（像素、油画、水彩等）的效果。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953946-1253018466.png" > </p>
<h1 id="步骤"><strong>步骤</strong></h1>
<p>和 Code assistant 一共交互了四句话：</p>
<ul>
<li>小编第一句：生成一个随笔画一幅画，然后帮忙加工的应用。</li>
<li>小编第二句：黑屏？</li>
<li>小编第三句：绘画风格里在增加一个像素风。</li>
<li>小编第四句：增加一个单次操作的撤回选项，同时增加右边预览图的显示比例。</li>
</ul>
<p>上来第一句提完需求之后，生成了一个叫 “Doodle Genius (随心画)” 的应用，但显示的 Preview 界面是黑屏。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954021-1034853562.png" > </p>
<p>用第二句 “黑屏” 进行了质疑，然后 Code assistant 又生成了一版代码，这次就正常了。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953984-1684014625.png" > </p>
<p>简单试用了一下，没啥问题。但感觉应该增加我喜欢的 “像素风” 和提高易用性的 “撤回上一个涂鸦动作的选项”，所以有了第三句和第四句交互。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953945-1370620090.png" > </p>
<p>还可以通过 view diff 看下这句 “像素风” 的要求，让代码发生了啥变化。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953947-940924473.png" > </p>
<p>小编应该是写不出 “pixel art style, 8-bit, retro game aesthetic, sharp pixels, vibrant colors, high detail pixelated masterpiece” 这种 prompt 的。</p>
<p>最后可以把你做的东西发布成可以供其他人访问的公开应用。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953993-1666365607.png" > </p>
<p>还可以把通过 vibe coding 开发的小项目一键上传到 github 仓库。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954133-1087198197.png" > </p>
<h1 id="whats-more"><strong>What's more？</strong></h1>
<p>这篇小文章，自始至终都和数据库没啥关系，怕被老大批斗，所以最后强行挽回一下局面，通过涂鸦生成一张和 OceanBase、seekdb 有关的图片，来看看应用的效果。</p>
<p>生成的图片：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953948-1517491659.png" > </p>
<p>如果需要用提示词生成上面这个东西，大概要写成这样：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953880-585087648.png" > </p>
<p>现在的输入：随手一画，外加选择 “赛博朋克” 画风即可。</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953937-1898492445.png" > </p>
<p>不过 “赛博朋克”这个画风还是略显夸张，偷偷添加了很多私货。如果选择其他几种画风，就会生成下面几张更精准图片。</p>
<p>像素：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953904-26161749.png" > </p>
<p>油画：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953985-1369043573.png" > </p>
<p>素描：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954466-967981465.png" > </p>
<p>写实：</p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954039-1682908778.png" > </p>
<h1 id="以后-oceanbase-社区公众号的封面图就用这个小工具来配了">以后 OceanBase 社区公众号的封面图，就用这个小工具来配了！</h1>
<p>至此，正文结束。</p>
<h1 id="commercial-break"><strong>commercial break</strong></h1>
<p>你期待的科技盛宴，正在加载 —— 1 月 31日，OceanBase 社区嘉年华，将在上海启幕！</p>
<p><strong>扫码即可报名参加~</strong></p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953938-633469749.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953887-1640312537.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954330-199129954.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953904-1602136798.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954035-2078538082.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953984-550280951.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170954098-636857649.png" > </p>
<p><img alt="" loading="lazy" data-src="https://img2024.cnblogs.com/blog/3648227/202601/3648227-20260123170953948-295854456.png" > </p>
<p>与技术领袖面对面，与社区伙伴组队碰撞</p>
<p>我们已备好全部精彩，只等你来</p>
<p>欢迎扫描海报二维码报名</p>
<p>名额有限，先到先得！</p>
<p>和社区开发者共赴技术之约！</p>
<p>拥抱开源，共探 AI，我们嘉年华见！</p>
<p><strong>参考资料</strong></p>
<p>[1] Google AI Studio: <em>https://aistudio.google.com/</em></p><br>来源：程序园用户自行投稿发布，如果侵权，请联系站长删除<br>免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ | 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
