零、开篇：使用 AI 写代码，一天能做出什么样的网站
这是我借助 v0 开发了网站原型，然后在本地使用 Claude Code 做调整，开发出来的一个工具网站：
一天时间，是不是还行？
而且我完全不懂前端开发，之前不懂，现在也不懂，别说写代码了，包括整个上线过程都是与 AI 沟通才实现的。在现在这个 AI 时代，这已经不是什么难事了，只是存在一些信息壁垒而已。
接下来，我想完整重现一下整个过程，打破信息壁垒，让每个人都能复刻，跑通从0到上线的全流程。
一、引言：什么是 VibeCoding？
先聊聊什么是 VibeCoding，这个词最近比较火，尤其是在 AI 编程领域。这次的中文翻译比较迷啊，叫“氛围编程”，又是一个跟“鲁棒性”一样不如不翻的词。借用 GoogleCloud 上的解释：
其核心理念是让用户专注于描述他们希望软件执行的操作（“氛围”或意图），让 AI 处理大部分实现方式（实际的代码实现）。
纯氛围编程 (vibe coding) 可能意味着“忘记代码的存在”，这表明开发者深度依赖 AI 的输出，甚至不需要完全了解生成的代码。相比之下，Responsible AI 辅助开发要求开发者使用 Gemini Code Assist 等 AI 工具来提高工作效率，但在将代码集成到项目之前，开发者仍需仔细审查、测试并完全理解代码。
简单来说，区别与 AI 辅助编程，VibeCoding 不需要你懂代码、不需要你写代码、甚至不需要你去测试代码（其实这一步目前还没有哪个工具能做到，验收工作我们人类还是要做的），完完全全的交给 AI 来实现整个开发甚至上线过程。
比如最近比较火的 Trae Solo 模式（抢到激活码了没朋友们😂），其实就是把开发->测试->上线的过程都集成起来了，其实在 Trae Solo 之前，国外已经有很多工具实现了这种模式，比如：v0、Lovable、Bolt，都是非常优秀的。
我比较习惯使用 v0，这次我们就选用 v0 来快速完成原型开发。
二、实战：五分钟搞定原型
1. 注册 v0
网站：v0.dev/
没有魔法应该也能访问，但是速度好像非常慢，有条件的还是打开魔法来访问
网站没有中文，需要适应一下英文，没几个单词需要你读懂，跟着我的后续步骤来就 OK 了
点击右上角的Sign In后，可以使用邮箱注册，或者直接绑定Google、GitHub账号。
这个过程我就不多说了
2. 关于免费额度
登录后，不需要付费，做一个小的原型项目，免费额度就够用了。
官网看到免费计划里，我们就已经可以发布到 Vercel，可以使用中等的 v0-1.5-md 模型了（简直良心！
3. 输入提示词
我做上面那个示例网站的提示词已经找不到了，当时我也只是很简单的写了一个，甚至我都不知道我那时候要什么，没有很明确的需求，只是 v0 生成出来后我才让他跟我一起优化。
这次，我们也写一个简单的：
我想做一个markdown文本生成卡片图的网站，可以实时预览生成的卡片图，也可以下载生成的图片，对于不同的标题、有序列表、无序列表，有不同的表现形式，而且可以选择不同的主题
在主页的方框中输入上述提示词（如果你有别的想法，也可以自己写），点击文本框右下侧的那个星星按钮，AI 可以帮你优化你的提示词。
优化完成后是一堆英文，我也懒得看了，直接回车（你也可以细看一下，然后根据自己的需求去调整）
我这里优化后的提示词如下（我反正没看）：
Develop a web application using Next.js that generates and displays card images from Markdown text input. The application should feature a real-time preview of the generated card image, reflecting changes as the user types or modifies the Markdown content. Implement distinct visual styles for different Markdown elements, including headings, ordered lists, and unordered lists, to enhance readability and visual appeal. Provide a download functionality that allows users to save the generated card image in a common image format (e.g., PNG, JPG). Offer a selection of themes or style options, enabling users to customize the appearance of the card images. The application should be responsive, ensuring a consistent user experience across various devices and screen sizes.
耐心等待，见证魔法~
这是 v0 第一版给我生成，我觉得就已经非常好了，真的强
由于我前面的提示词比较简单，如果你有比较细致的需求，可以描述给他，或者整理成完整的需求设计文档（PRD），在对话框的右侧，有一个回形针按钮，在这里将文档贴给 v0，让他按照设计文档来实现需求，这样会更加细致可控。
4. 如何微调
聊天
如果你有需求补充、调整，或者 bug 反馈，可以直接在左侧聊天框中与之对话。不用太在意这个提示词怎么写，使用口语表达出即可，比如：
截图
使用任意截图工具，QQ 微信的都可以，拷贝到剪贴板，在左侧输入框直接 Ctrl V，就可以将图片贴给 v0，这样比单纯的文字描述更加精准，比如哪里有问题，比如可以参考图片中的设计：
Design模式精准选中
左侧上方，点击切换到 Design模式，非常强大
在这个模式里，你可以选择预览界面上的任意元素，以可视化的方式去修改任意元素的属性
比如这个 icon 我可以选中后，修改他的颜色、背景、布局、大小、边框等等等等......实时修改、所见即所得，是不是特别强大
接下来，请你用上述 3 个调整方法，完成你自己的网站吧。注意，v0 免费版本是有额度限制的。
三、告别复杂部署，一键上线
如果你觉得调整的差不多了，可以使用 v0 内置的发布，一键发布到网络上，让别人也能访问你的网站。
发布网站
右上角点击 Share -> Publish -> Deploy to Production 就能一键发布了
另外，也不要担心有bug，你修改后，也是可以在这里重复发布的，不需要复杂的操作，v0 都帮你集成好了网站的部署，一个按钮搞定~
耐心等待一会儿，等 v0 转完圈圈，我们就看到了这个。这就是发布成功了，朋友们就可以通过链接（就是图中箭头的那个，以vercel.app结尾的）来访问你的网站了。
但是有一点需要注意！
Vercel 对国内的网络环境可能并不友好，大概率是需要魔法才能访问的，以后的教程里，我们会采用另一种方式来发布网站，可以面向全球用户。
修改域名，拥有自己的专属域名
刚才 v0 生成的链接，前面的域名你不喜欢？没关系，支持自定义！
点击 Add a Domain，输入你喜欢的名字吧~
但是，vercel.app 这个域名的后缀是无法修改的，如果想要完完全全的自定义，关注这个系列教程，以后会有文章来讲解一套更自由的部署方式。
四、总结与后续优化
自此，我们就完成了一个简单的静态网站的开发与上线，是不是有点超速了，这就 AI 时代的速度。
最开始不熟练，可能用的时间会久一些，熟练了之后，5分钟出原型，1小时调整，秒上线那就是妥妥的。
但是我们这套流程还有一些优化项：
-
v0 只支持前端，而且每天的免费额度也有限，如果我们想要做更多的调整，或者接入后端该怎么办呢？
-
Vercel 部署方式的对国内用户的访问不太友好，如果希望面向全球（尤其是国内）用户呢？
-
上线后，到底有多少用户访问了我的网站，我想知道他们都干了什么，能不能有统计数据呢？
-
如果用户对我的网站有意见和反馈，我要如何收到对方的反馈呢？
这就是我们后续的优化项目，关注这个系列教程，会带大家一步步解决上述问题。
欢迎关注我的公众号：阿衡的AI日常
