如何靠一张草图Vibe Code出一个App

**一句话总结：** 一段 Google 演示展示了如何把一张手绘草图瞬间变成可运行的“氛围编程”复古虚拟衣橱：它能实时查天气、让你虚拟试穿——全程在 Google AI Studio 和 Nano Banana 里几分钟搞定。 ## 从涂鸦到上线应用 整个构建过程都在 [Google AI Studio](https://aistudio.google.com/apps) 里完成——这是谷歌的“氛围编程”环境，用自然语言提示就能生成可运行的网页应用。无需本地环境、无需 Git 仓库，打开浏览器直接跟模型对话即可。 ### 第一步：捕捉灵感 - 在纸上画出界面：复古风衣橱网格、迷你天气卡片、穿搭建议面板。 - 给草图拍照。 - 再找一张“感觉对”的参考图（Pinterest 截图、情绪板照片都行）。 ### 第二步：一句提示搭骨架 把下面这段话贴进 AI Studio： > “帮我做一个叫 My Closet 的复古虚拟衣橱应用，带虚拟试穿功能。我上传了设计灵感图和布局草图，要有穿搭建议板，并根据实时天气推荐搭配。” 回车。 模型立刻返回完整页面：配色、字体、占位衣物、天气组件、建议板——可直接交互。 ### 第三步：喂入真实衣物 - 在桌面新建文件夹，把每件衬衫、外套、裤子照片全拖进去。 - 在 AI Studio 切到代码视图，把文件夹拖进文件面板。 - 输入： > “用文件夹里的照片替换所有占位衣物图。” 应用自动给每件单品打标签（“条纹 T 恤”“牛仔夹克”“羊毛大衣”）并排进可滑动的衣橱网格。 ### 第四步：加入天气感知逻辑 提示： > “获取我的位置和实时天气，自动滚动衣橱，根据衣物厚度分析并推荐一套今天能穿的搭配。” 应用立即抓取纽约实况（下雨，58 °F），筛选出中等厚度层，高亮推荐组合。 ### 第五步：用 Nano Banana 虚拟试穿 新点子： > “加个上传/拍照按钮，让我选一套衣服后把它合成到我的照片里——就像照镜子。” 提示背后调用的是谷歌 Nano Banana 图像编辑模型。点击“试穿”后，不到两秒就把所选衣物合成到自拍上。 ## 用嘴迭代 每次微调只需说话： - “背景换成蜜桃色，不要薄荷绿。” - “低于 50 °F 时把最保暖的排在最前。” - “给每条推荐加个置信度百分比。” 循环就是：描述 → 构建 → 测试 → 优化——完全不用传统写代码。 ## 逛逛应用画廊 没灵感？AI Studio 自带公共画廊，满是氛围编程 demo：聊天机器人、行程规划器、菜谱生成器等等。复古衣橱项目也已上架，任何人都能一键 fork 继续玩。 ## 一键发布 满意后点“Deploy”，拿到可分享链接，或导出代码自行部署。从涂鸦到上线——“只需几分钟”。 **来源：** How to Vibe Code an App From a Drawing – Google（https://www.youtube.com/watch?v=b1Pvt072wKQ）