不会写代码，我用 AI 做了自己的网站——完整踩坑记录

前一阵给娃做了个语音陪玩飞行棋机器人，公众号分享了 vibecoding 过程后，竟秒被删，可能是涉及到墙吧。我只是想记录并分享自己学习到的知识啊。好吧，我自己做个网站，展示自己的 Vibe Coding 作品和 Blog。

1. 需求分析

跟 AI 聊 (我是问了 Claude、chatGPT 和 Gemini)，有问题就问 AI，最后自己确定方案后，提出要求，让 AI 给你出个给 Claude Code 的提示词。

Claude 和 Claude Code 最适配，让它出提示词。

1. 前期准备

让 CC 写代码前，Claude 让我先做 3 件事，于是按它的要求搞定了。Notion 我以前没用过，但是有 Claude 在，不懂就问 Claude 就行。

Notion 里也有 AI，创建数据库也是直接跟 Notion 的 AI 聊需求就行。

1. CC 写代码

提示词发给 CC。我之前已经登录 Claude 的应用，并切换到 Code 的 Tab 了，就直接发提示词。

干完了，CC 还给我总结下。

然后按 CC 上面的 1、2、3、4 要求，手动完成。

1. 测试网站，让 CC 改 bug，踩坑

我点开自己的域名网站，怎么一片黑屏。

期间，我发现本地访问正常但网站访问异常，以为是部分代码文件没传成功，而且想每次 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是解决不了的。

1. 完善网站内容

网站框架搭建好后，AI 作品和博客内容需要填充。在自己建的 Notion 数据库 “作品集” 和“博客”里直接写就行了。

作品集数据库对应网页上的作品集列表。

博客数据库列表页对应网页上的博客列表。

博客数据库详情页对应网页上的详情。由于我已经在微信发过文章了，所以就直接贴过来，发现图片无法显示。

后来用简悦浏览器插件把文章转 Markdown 文件下载后，写了个 Python 脚本把文章图片转存到 Cloudflare R2 上，替换掉图片地址，再导入 Notion 就成功了。

1. 修改网站 UI

原本是做的苹果风格，室友说太丑了。然后改成 AI Lab 风格，更丑了。最后在

https://github.com/VoltAgent/awesome-design-md

找到了 Linear 的 DESIGN.md，拉到自己项目里，让 CC 给我替换风格，凑合用吧，先做更重要的事。

苹果风格：

AI Lab 风格：

Linear 风格：