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