AI 编码 + Vercel 部署 + 域名解析：一文搞定Web 应用开发上线全流程，氛围编码+MCP 审计优化。

🍹 Insight Daily 🪺

Aitrainee | 公众号：AI进修生

Hi，这里是Aitrainee，欢迎阅读本期新文章。

本期更新第二期的合集，是一期操作实践。

涉及：AI氛围编码、Next.js + GitHub + Vercel：真正意义上的 CI/CD 一条龙、域名、子域名、重定向。海外建站，MCP在建站的时候的帮助如（BrowserTools MCP 修改组件）、Vercel相关的实践经验、开发UI库以及低成本独立开发指南，服务部署扩展知识等等。

Vercel + GitHub 就能实现一种几乎“零感知”的持续集成部署（CI/CD）体验。你只需要把代码提交到 GitHub 仓库，Vercel 会自动检测变更、自动构建、自动部署上线，整个流程无需手动干预。

就像你在编辑器里敲下 git push，然后你关掉电脑去喝杯咖啡，等你回来，页面已经更新好了。

此外，合集后面马上继续更新两三期——AI绘画实践，分享一直用到现在的公众号或其他如小红书，B站封面创作工作流。当然，里面是些元方法，不只是用在这些平台。

值得注意的是，这三种方法涉及三种不同的AI绘画工具或方法。但是没有一种是GPT4o或Midjourney，并且这三种方法：

对AI绘画提示词功力要求为0（因为它包含了一种思维和工作流程）、可以自由组合创意，会有惊喜感、可以建立在已有的创作之上、最重要的是三种全是免费工具、可以根据文章或主题端到端直出封面。

并且出图快且多张一起出（比4o块）、出图效果好、优雅，这一点你可以查看以往公众号封面。如下：

总之就是一种有效率，并且效果不错的工作流。但是这个和Comfy UI这些没关系，我们这个是思维上的工作流。

以前太懒，所以这个一直没写，这次三个一起更新上吧。

对了，知识星球会同步更新所有期的合集。

好了，我们先来看一下这一期的内容吧， Ai氛围编码网站并标准的部署它。好吧，除了这个网站，后面好像还有mcp网站以及文档网站也没来得及写。慢慢更。希望对你有用。

小小酷酷的拼接网站的构建流程，简单而氛围。

AI时代，渐渐的，提效成了我的一种习惯。比如使用左边浏览器这种超级拖拽，右边这种极速办公鼠标。效率杠杠的。

又比如我日常写文章的时候，需要给文章配图。有些图片还需要拼接。

而ai类的文章可能很多配图来自于海外。直接右键复制粘贴到公众号是无法进行的。因为公众号不支持海外图床。

于是搜了一下现有的图片拼接网站。

不太好用，不能直接快捷键复制粘贴，得把拼接后的图片下载到本地，写许多文章时效性比较强，这样太不效率了。并且有些功能没有。。

于是自己一边写文章一边氛围编码了一个图片拼接网站：https://stitch.aiagency.xin/

（类似于用麦克风提需求：Cursor完成一轮需求会有声音提醒你，在此之间你可以异步去做其他的事。）

  他支持直接快捷键。复制进来，拼接完成，复制出去，无需下载。还有下图中框出来一堆可以自动控制的小玩意。

下面是一些拼接效果：

我最关注的提效点可能就是支持快捷键、正常粘贴到公众号、复制进去就可以双拼横图了。不用再下载到本地再粘贴了，往往是这个小方面的优化，感觉整个写文章工作流就顺畅了很多。

好吧，我们下面简单介绍这个工具怎么做的吧。不过这次重点我们说一下部署上线的事。包括域名等等，是目前主流的的操作实践，既方便也专业，不是随便找个托管网站上传你的代码那种。

也正如开篇，我们所介绍的还有很多东西会提到。

与AI的对话过程

遵循着原来的实践。我可能干啥都先使用这些氛围编码工具，编写mvp。之后再转到Cursor、Windsurf这些。

所以我一开始同时打开了这仨：Bolt、V0、Lovable。然后提示词的话，我懒的在提示词里面给他规划要实现哪些功能，我就随便搜了几个图片拼接的网站截了几个图。用截图代表我想实现什么功能。当然，不是复刻。

从左到右从上到下，分别是Bolt、V0、Lovable，这三个工具，软件以往的文章都有介绍。在公众号搜索即可。

Bolt 太简单了，没有很好的满足需求。V0功能挺多，但是出bug了。解决不过来。

Lovable一轮下来挺正常的，并最终作为了原型，然后给他下放到Cursor中开发。

当然这只是一次实验。这三者的水平处于同一级别。不过目前来说，我可能先倾向选择V0、Lovable。

此外，最近Bolt已经原生集成stripe，可以更快速的为你的产品接入付费功能。

Lovable是什么？

三分钟带你看完Lovable，这款全新的AI全栈APP构建器击败了Bolt吗？

我在Lovable进行了几轮迭代之后就触发了他的免费额度限制，这个时候我们得下载到Cursor来开发了，然后现有的界面还有许多不足点。

右上角可以下载：

在本地开发的时候，我上传了自己公众号的头像，作为品牌色彩让ai拟合到这个网站。。并且加上了这篇文章提到的效率提示词：从0到1用AI做了个AI服务网站, 全程没写一行代码。

这个效率提示词。用了许多轮。

因为我在整个过程中根本也没怎么提示它我怎么设计怎么规划。完全是他自发的做起来的：

包括左边，他的光晕一闪一闪的。以及最开始本来是一个不怎么成体系的图片拼接小工具后面它就改成了这种有名称有点规范的小网站，

功能和美观都兼具了。

后面增加了一些社交链接。

在这个过程中，我可能会用到一些mcp工具（如Playwright）。

用上效率提示词，可能更多需要关心的操作的就是版本控制了。保存较好的版本线程，然后让AI跑。

而且每次提交版本，我可能对于个人操作这个来说，我可能更喜欢把关键性的某段提供需求的作为提交信息而不是功能的更改（好吧，有时候是这样）。

当然当上下文太大的时候，你最好开一个新的对话。越大ai可能会越有幻觉。

也就是这样。一边写着文章，一边就把它开发完了，确实没啥好说的。反正下次写文章更快就行了。后续再想想ai自动化方面的。能提效就好。

使用BrowserTools 进行组件修改、SEO和性能审计

1、BrowserTools是啥：

手把手教你配置BrowserTools MCP，Windows 和 Mac全流程，关键命令别忽略。

比Playwright更高效！BrowserTools MCP 让Cursor直接控制当前浏览器，AI调试+SEO审计效率狂飙！

当然实践中我也发现BrowserTools和Playwright可以配合使用，前者不能自动化控制浏览器去搜索点击之类的，不过提供了许多端到端的功能，以及更好的解决控制台报错等等。

你可以对比看一下他们提供的工具差别：

2、使用BrowserTools 修改某个组件，让Cursor也具备Bolt、V0这些氛围编码工具修改组件的功能，详细看视频：

（文：AI进修生）