实例，用 AI 搭建博客网站——GPTs、Tldraw、v0.dev 的综合运用
1. 11月5日我收到邮件，可以用v0.dev 产品了。建个人博客是我的一个小心愿，我特别喜欢7any.com网站风格。今天演示下，用Tldraw、GPT、Claude、v0.dev建个博客网站的操作。
2. 这两天Tldraw（drawmyui.com）工具很火，AI根据原型图就能生成网页代码。
看看视频，是不是很厉害，文字做标注就能生成互动效果。
3. Tldraw本身是个不错的免费白板工具，我画了个原型，但是遗憾没有OpenAI API key，不能直接生成。
4. 转换思路，让GPT生成代码，出来的效果如下。
这个就和Tldraw的视频效果相差太大了。
5. 转换思路，找一个非常强大的GPTs（Grimoire），已有2万5的对话产生了，这个GPTs有多神奇，请接着看。
我将原型图发给它，它就开始工作，到输出长度限制的时候，就问我是否要继续，我回复yes，它就自己继续工作了，不需要我其他指令，它就自己创建代码，提供下载了。
还给了我一个Netlify的链接，点开它给到的zip文件，解压，就可以部署了，这速度，从问Grimoire开始到最终发布网页，5分钟时间。
和我的原型图还挺像的。
6. 换种思路，用v0.dev来搭建网页。
先了解下它是什么。
7. 我用了v0.dev自带的博客模版提示语让它生成网页。
一步步向vercel提要求，中文英文都可以。
vercel生成后，我重复发给GPT让它优化，给到优化提示词。
我让它改成AI科技风
生成后的页面对应的都有代码。
对生成的页面不满意，右上角直接删除就好。
卡通风格，有动画效果
网页左侧加个边栏
我还是对之前的科技风比较感兴趣，请GPT给我优化意见，它建议我加上搜索框和发布日期。
用tailwindPLAY可以复制css
生成后的代码，可以在终端输入红色框内内容，下载到本地。
在下载过程中，因我第一次用npx，有很多小白问题，我和Claude一步步交流，它实在太贴心了，见下图红框内的内容，AI真是我们写程序的好助手，我被它激励到，就一步步按照它的指导解决问题，一直充满信心。
Claude-2-100k能处理多轮对话，反应速度也快，我和它应该对话了二十三次，各种小白问题，不明白就让它详细解释（和AI对话不须考虑脸皮问题），在多轮对话后，它会变慢，但是如果我重新开对话，还得告诉它背景，所以我还是在一个对话框里和它多轮对话。
v0.dev的功能还很少，我没看到在哪直接一键部署到vercel，所以我按照Claude的指导，先下载到本地（通过github部署也行，会更简单些）。
直接把文档链接发给Claude
上传多个文档，直接帮我改写代码
各种排查，还是出现了些问题，css没有关联上，下次再继续调整。
最终效果
8. 部署
（1）我昨日在godaddy购入了域名kateviews.com，godaddy支持网页搭建，我一开始用它的模板，简单改了下文字。
（2）我选择将Grimoire生成的网页代码部署到Vercel。我选择了Vercel CLI来部署。
（3）关联域名和托管
这里遇到了一个问题，vercel和godaddy的域名关联不上，部分godaddy DNS 记录无法删除，vercel就报错。
我知道是这个Website Builder Site的问题，但是找不到删除的地方，最后好不容易找到，删去才正常。
最终网页效果
9. 可能有人会说，为什么不用framer ai？notion？
我在6月用过framer ai用一个爵士乐网站，真的有被惊艳到，而且framer支持一键发布。大概就是想稍花点时间了解下整个流程，像做手工一样，而且在其中了解了些关联域名操作，Node.js 的常见命令行的使用也可用在其他项目上。
总结一下：
互动：
期待你的留言，分享你的感悟。
精选历史推文