不会写代码,我用 AI 做了自己的网站——完整踩坑记录
前一阵给娃做了个语音陪玩飞行棋机器人，公众号分享了vibecoding过程后，竟秒被删，可能是涉及到墙吧。我只是想记录并分享自己学习到的知识啊。好吧，我自己做个网站，展示自己的Vibe Coding作品和Blog。跟AI聊(我是问了Claude、chatGPT和Gemini)，有问题就问AI，最后自己确定方案后，提出要求，让AI给你出个给Claude Code的提示词。Claude和Claude Code最适配，让它出提示词。让CC写代码前，Claude让我先做3件事，于是按它的要求搞定了。Notion我以前没用过，但是有Claude在，不懂就问Claude就行。Notion里也有AI，创建数据库也是直接跟Notion的AI聊需求就行。提示词发给CC。我之前已经登录Claude的应用，并切换到Code的Tab了，就直接发提示词。期间，我发现本地访问正常但网站访问异常，以为是部分代码文件没传成功，而且想每次Push到Git就自动部署，于是就要把Cloudflare Pages关联Git。发现没地方设置关联（Claude和chatGPT都告诉我可以关联，可我死活找不到），还好Gemini说对了（可能它的数据源比较新？），只能在新建时设置，于是我删除后重新建了新的Cloudflare Page。按Claude的提示增加Node.js版本号环境变量。移除 SDK，改用原生 fetch 直接调用 Notion REST API。next-on-pages 换成OpenNext 方案（这是根据部署日志，Chat GPT给的方案，后来发现是行不通的，可能是我提供的上下文不充足导致的），安装所有依赖。换回next-on-pages，最后发现了根本原因：只要肯耐心问，没有bug是解决不了的。
网站框架搭建好后，AI作品和博客内容需要填充。在自己建的Notion数据库“作品集”和“博客”里直接写就行了。博客数据库详情页对应网页上的详情。由于我已经在微信发过文章了，所以就直接贴过来，发现图片无法显示。后来用简悦浏览器插件把文章转Markdown文件下载后，写了个Python脚本把文章图片转存到Cloudflare R2上，替换掉图片地址，再导入Notion就成功了。原本是做的苹果风格，室友说太丑了。然后改成AI Lab风格，更丑了。最后在https://github.com/VoltAgent/awesome-design-md 找到了Linear的DESIGN.md，拉到自己项目里，让CC给我替换风格，凑合用吧，先做更重要的事。
