零代码用 AI 做网站实战

这个网站就是零代码用 AI 做的。从想法到上线，每一步都记录在这里。

起点：一个想法

我想做一个 AI 学习站——包含教程、提示词库、工具导航。但我完全不会写代码。决定试试让 AI 帮我做。

选工具

试了几个之后，选了 Claude Code——在终端里跟 AI 对话，它直接写代码。对我的需求理解最准，而且能执行终端命令。

Day 1：搭骨架

对 Claude Code 说：「我要建一个网站，用 Next.js + Tailwind CSS。首页要有 hero 区域、搜索框、工具卡片网格。」30 分钟后，一个能跑的项目骨架就出来了。

Day 2-5：加内容

每天加 5-6 个页面。每个页面就是一句话：「加一个 Markdown 编辑器」「加一个 JSON 格式化工具」。它写代码，我刷新浏览器看效果。不满意就继续说。

Day 6-8：加 AI 模块

不再只是工具站。加上了 AI 教程、提示词库、Agent 指南——这些是对用户真正有价值的内容。

Day 9-10：设计和动画

「加紫色渐变」「首页加点动画效果」「卡片悬浮时要有光泽扫过」。AI 处理 CSS 动画的能力让人惊讶。

Day 11-14：打磨细节

统一风格、修复 Bug、优化性能、部署到 Vercel 和 Cloudflare Pages。

遇到的最大困难

• AI 写的代码有时跑不通：把报错信息丢回给 AI，它自己改。
• npm 权限问题：目录不对、缓存权限问题，花了不少时间排查。
• 保持风格一致：每次加新页面都要提醒 AI「和之前的风格保持一致」。
• 部署踩坑：Vercel 国内不稳定，最后用 Cloudflare Pages 解决。

核心经验

1. 说清楚你要什么：背景 + 细节 + 风格 + 示例
2. 反复迭代，不要指望一次到位
3. 遇到报错把错误信息丢回给 AI
4. 让 AI 帮你管理 Git：每改好一个功能就 commit

🎯 你也能做：会打字就会做。需要的不是代码能力，是「知道自己想要什么」和耐心。