vibe coding可让零基础用户通过google ai studio输入需求生成可运行网站：先注册并提交带验收标准的需求文档，再本地调试修改交互细节，接着替换真实资源导出单html文件，最后用vercel一键部署获取公网网址。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
从模糊想法开始生成可运行网站
你只想做个个人作品集、活动报名页或小团队内部工具，但没写过一行HTML，也不懂部署——Vibe Coding能让你在浏览器里输入几句话就跑出真实网址。
打开 Google AI Studio（https://aistudio.google.com），用国内手机号注册并完成年龄验证，跳过地区限制提示后进入主界面。
在左侧菜单点【Build】→粘贴你刚让豆包/千问整理好的需求文档（含页面数量、核心功能、风格关键词），点击右下角【Build】按钮启动生成。
这一步必须带验收标准，比如“首页轮播图要自动切换+手动点击切换”，否则AI默认只做静态图；【不写明交互细节，生成的页面大概率无法点击】。
本地调试与精准修改
预览页加载完成后，直接在下方对话框输入具体问题：“把‘联系我们’按钮改成蓝色，悬停时变深蓝，点击后弹出邮箱输入框”。
方法一：用“替换式指令”——“把所有button标签的class从btn-default改为btn-primary，并在main.js末尾添加邮箱弹窗函数”。
方法二：用“截图反馈”——截取当前按钮区域图片，上传后说“按这个蓝灰色样式重绘所有操作按钮”。
AI每次只改局部，别写“整个首页重做”，它会清空已有逻辑；修改三轮内必须跑通基础交互，超五轮还没响应说明需求描述存在歧义。
使用豆包（火山引擎 Ark）生成图片或视频并保存本地。用户提及“豆包生图/图片/生视频/视频”、“Doubao”、“Seedance”、“火山引擎图片/视频”时触发。
替换真实资源并导出代码
第一步：用图床（如sm.ms）上传头像、二维码、产品图，获取直链URL。
第二步：把全部链接发给AI，指令为：“将代码中所有src=‘placeholder.jpg’替换成对应URL，共7处，按以下顺序替换：1.首页大图→https://xxx/hero.jpg；2.关于页头像→https://xxx/avatar.png……”。
第三步：要求AI输出完整可运行的单HTML文件（含内联CSS和JS），不要分文件夹结构——【Vercel和GitHub Pages都支持直接托管单HTML，分文件反而增加部署失败率】。
一键部署到公网
① 访问 https://vercel.com/new ，登录GitHub账号，点击【Import Project】→【Continue with GitHub】。
② 选择刚生成的单HTML文件所在仓库 → 点击【Import】→ 在配置页将Framework Preset设为【Static Site】→ 点击【Deploy】。
③ 部署成功后，Vercel自动生成类似 https://xxx.vercel.app 的网址，30秒内全球可访问。
这一步不需要配置域名或SSL证书，Vercel全自动处理；如果选GitHub Pages，需手动开启Pages功能且强制使用.github.io子路径。
