作者：Galvin · 共创伙伴：CodeBuddy
2026-08-02
先说结论
这篇文章是给所有被”我不会编程”挡在门外的人写的。
我不会写代码，也没有系统学过任何框架。但靠和 AI 对话，我在 5 天里做出了一个能用的个人网站，55+ 个双语页面，构建零错误，部署在 galvinai.pages.dev。
这篇文章讲四件事：Vibe Coding 是什么、我们怎么分工、五个阶段怎么推进、踩了哪些坑值得你避开。
这不是技术教程，是一篇关于”可能性”的记录。
一、Vibe Coding 是什么
这个词由前 OpenAI 研究员 Andrej Karpathy 提出。它描述一种新的编程方式：代码不再是一个字母一个字母敲出来的，而是你用自然语言跟 AI 对话，AI 执行、你讲想法、双方一起迭代。
我既不是前端工程师，也不是职业开发者。我是一个有想法、有内容想表达，但被技术门槛挡在外面的人。
这篇文章记录的，就是我如何把一个”我想要一个个人网站”的模糊念头，变成线上真实运行的 URL。
二、起点：我只想要一个网站
我的需求很朴素：
- 一个能装下思考、洞察、技巧分享、读书笔记的线上空间
- 中英双语，同时服务两类读者
- 干净、安静、不花哨
- 能搜索
- 手机和电脑都能正常看
按传统路径，我得先学 HTML、CSS、JavaScript，再学一个现代框架，再学响应式设计、i18n、部署运维。这些内容我只有一定了解，完整跑通过一次的经验是零。
但我有一个对话伙伴：CodeBuddy。它能在本地文件系统上改代码、构建项目，甚至用浏览器截图验证效果。
2026 年 8 月 1 日，我打开了第一个对话窗口。
三、我们怎么分工
回看这几天的开发过程，我意识到我们之间形成了一种很特殊的协作模式：
| 传统开发 | 我们的方式 |
|---|---|
| 我写代码，谷歌搜索查文档 | 我描述想法，AI 写代码 |
| Ctrl+C / Ctrl+V 复制粘贴 | AI 直接修改项目文件 |
| 运行 → 报错 → 看日志 → 改 | AI 构建 → 截图验证 → 定位问题 |
| 我查 CSS 属性含义 | 我只要说”间距太大” |
| “这个 Bug 修了 3 个小时” | “描述症状，3 轮对话解决” |
我的角色：产品经理 + QA 测试 + 决策者
AI 的角色：全栈开发 + 自动化测试 + 技术文档撰写
对话的方式极其自然。我经常就是截图后丢一句”你看，手机版样式是这样的，很明显不符合要求”。AI 自己分析根因、找到文件、完成修改、构建、验证，最后我只确认一句”可以了”。
不过这种偷懒的描述也浪费过不少算力。“很明显不符合要求”这种话，会让 AI 把不相关的内容全检查一遍。有一次只修一个文本溢出问题，烧了 100 多算力还没搞定。后来我调整思路，冷静下来把问题描述清楚，效率立刻上来了。
四、五个阶段：从零到上线
整个项目可以分成五个阶段。
阶段一：搭骨架（约 2 小时）
我说：“我想建一个个人博客网站，中英双语，用 Astro 框架。”
AI 帮我选型了 Astro。理由很实在：网站本质是一堆文章，不需要复杂的前端交互，Astro 编译后输出纯静态 HTML，快、安全、部署简单。
这一阶段搭好了：
- 项目初始化、目录结构规划
- 文章内容的 Markdown + Frontmatter 数据模型
- 首页 + 四个专栏页（行业洞察、实用技巧、阅读思考）
- 关于 / 联系页面
阶段二：做核心功能（约 1 小时）
每个功能都是一次”你的想法 + AI 的实现”：
- 中英文双语（i18n）：基于 URL 路径（
/zh/vs/en/）的双语切换方案，页面、导航、SEO 元数据全部同步 - 暗色 / 亮色主题：点击切换、跟随系统偏好、本地记忆
- 全文搜索：浮动搜索面板，支持中文分词和英文搜索
- 表格可视化：首页文章按标签分类，类似 Notion 数据库视图
阶段三：磨页面（约 4 小时）
这是对话最密集的阶段，也是 Vibe Coding 感受最强的阶段。典型节奏：
- 我说：“页眉要做成下拉菜单的形式”
- AI 理解后给出设计方案
- 我确认
- AI 改 Header.astro，构建
- 我看效果截图：“这个间距再大一点，箭头动画不够流畅”
- AI 微调，重新构建
如此反复，像一场即兴演奏。我的审美感 + AI 的执行力 = 双方都满意的结果。
最终页眉实现了：
- 桌面端：多层下拉菜单，带悬停和下划线动画
- 手机端：汉堡菜单展开为全屏侧滑面板
- 功能按钮：语言切换、主题切换、搜索切换，图标 + 文字，带 hover 态
阶段四：手机端适配（最艰难，约 6 小时）
这是全项目投入精力最多、问题最难攻克的环节。手机端汉堡菜单，我们至少迭代了 4 个版本：
第 1 版：菜单能打开，但只显示在 header 高度范围内，覆盖不全。问题出在 CSS：body { overflow-x: hidden } 导致 position: fixed 的定位基准从 viewport 变成了 body。
第 2 版：菜单覆盖全屏了，但汉堡按钮和关闭按钮视觉重叠。方案是把 header 层级提升到 z-[70]，移除 overlay 内独立的关闭按钮，让汉堡按钮本身动画切换为 X 图标。
第 3 版：菜单项间距太大、留白过多。压缩了菜单项 padding、分类标签间距、面板顶部 padding。
第 4 版：点击页面空白区域无法关闭菜单。之前的事件监听只捕获了 #mobile-overlay-bg，nav panel 内部区域的点击漏掉了。简化为”任何 overlay 内点击都关闭”。
每个问题都是截图发给 AI，它分析 → 修改 → 构建 → 用 Playwright 在 iPhone 模拟器下截图验证。没有一次是”拍脑门改一下试试”，每一步都有根因分析和验证手段。
阶段五：部署上线（约 1 小时）
最后一步是把项目推上线。选了 GitHub + Cloudflare Pages 完全免费方案：
- 本地 Git 初始化，关联 GitHub 仓库
- SSH 密钥配置
- Cloudflare Pages 连接仓库，自动构建部署
- 项目改名碰到
.pages.dev子域名冲突问题（Cloudflare 的设计特性，第一次用确实容易踩坑）
部署后 AI 还自动访问线上 URL，验证了首页加载、导航等核心功能。
最终线上地址：galvinai.pages.dev（55+ 个双语页面，构建零错误）
五、四种深度配合方式
这里的交互流程，比”问一句、答一句”要复杂得多。
1. 截图驱动
我最常用的方式：打开网页截图，发给 AI，说一句”你看，这不对”。
AI 会自动做这些事：
- 读取相关源码文件
- 分析截图里显示的问题
- 定位具体是哪一行 CSS 或 JS 逻辑导致的
- 给出修改方案并直接执行（很多时候我会要求先出方案，确认后才执行）
- 构建项目
- 启动 Playwright 在移动端模拟器下截图验证
整个过程我不需要理解 padding-top 和 calc() 的区别，不需要知道 overflow-x: hidden 会影响 position: fixed。这些技术细节 AI 会自己分析并绕过。
2. 感受驱动
我常说的都是这种话：
- “行与行之间间距过大，留白太多”
- “这个动画不够流畅”
- “按钮视觉重叠，用起来别扭”
- “字体大一点”
- “颜色可以再柔和一些”
这些纯主观的表达，AI 都能翻译成具体的技术修改：改 padding 值、调 transition 参数、重排 z-index 层级、修改色彩值。
3. 试探式探索
有时候我自己也不知道要什么，就问：
- “手机端菜单一般怎么做？”
- “这个页面还能加点什么？”
- “有什么推荐的做法？”
AI 给几个方案，我选一个，它实施。这种”给我看看选项”的方式，特别适合对技术实现不太熟的人。
4. 翻译 + 审校
所有界面的中英文文案，我写中文，AI 翻译成英文。导航菜单、按钮文案、404 页面、SEO 描述，全是我提需求、它执行。
六、四个最难的问题
问题 1：overflow-x: hidden 的连锁反应
现象：手机端汉堡菜单展开后只覆盖了页面内容区上半部分，下方还能看到正文。
分析：AI 发现 body { overflow-x: hidden } 让 <body> 变成了滚动容器，导致 position: fixed 的子元素基于 body 而非 viewport 计算位置。
方案：overflow-x: hidden 只保留在 html 上，移除 body 上的声明。
体会：一个看似无害的 CSS 属性，能引发跨文件的问题。让我自己调试，可能永远不知道是这个原因。
问题 2：两个按钮的光学重叠
现象：overlay 里的 X 关闭按钮和 header 上的汉堡按钮叠在一起，用户困惑”该点哪个”。
分析：两个按钮在同一区域，z-index 分布不合理。
方案：移除 overlay 内独立的关闭按钮，改为汉堡按钮本身动画变为 X，header 层级保持高于 overlay。打开和关闭是同一个位置，肌肉记忆统一。
问题 3：点击空白无法关闭
现象：菜单打开后，点击菜单项之间的空白区域，菜单不关闭。
分析：事件监听只匹配了 #mobile-overlay-bg，nav panel 内部的 div 点击不匹配任何关闭条件。
方案：简化为”overlay 内任意点击都关闭”，11 行代码变成 4 行。
体会：有时候最简单的方案就是最好的方案。
问题 4：Cloudflare Pages 子域名误解
现象：把项目名从 personal-site 改为 galvin，但 galvin.pages.dev 不能访问，旧的 personal-site-6ed.pages.dev 还能用。
分析：Cloudflare Pages 的项目显示名和 .pages.dev 子域名是分离的。子域名创建时锁定，改名只改显示名。
方案：了解机制后，删除项目重新部署，成功拿到 galvinai.pages.dev。
七、最终效果
| 维度 | 状态 |
|---|---|
| 页面数量 | 55+ 双语页面 |
| 构建状态 | 零错误 |
| 桌面端体验 | 下拉导航、表格视图、全文搜索 |
| 手机端体验 | 全屏菜单面板、触摸友好、safe-area 适配 |
| 国际化 | 中英双语，URL 路径区分 |
| 主题 | 亮色 / 暗色自动识别 + 手动切换 + 本地记忆 |
| 部署 | GitHub Push → Cloudflare 自动构建，1-2 分钟上线 |
| SEO | 每个页面独立的 title / description / og:image |
八、写在最后
动手之前，我对 AI 编程的期待只是”帮我写几段代码”。
实际体验完全超出预期。
最大的收获不是 AI 写得多好，而是它让我从一个”代码消费者”变成了”产品创造者”。我不再纠结”这个功能怎么实现”，转而关注”我想让用户感受到什么交互”。我从关注 How，变成了关注 What 和 Why。
这就是 Vibe：一种流动的、直觉驱动的创作状态。AI 把”实现”的成本降到几乎为零，释放了我的创意和审美。
当然，这不意味着我可以两手一摊什么都不管。最终做决策的还是我：这个动画要不要、那个间距对不对、整体设计方向走向哪里。这些判断 AI 代替不了，而正是这些判断，才让作品真正被视为”你的”。
如果要对想尝试 Vibe Coding 的朋友说一句话：不要想”我不会”，只要想”我想要什么”，然后去对话。
项目只是初步完成，后面还有更多要完善的地方，更多内容等着我去填充。
感谢 CodeBuddy，这次共创是我技术旅程上最珍贵的记忆之一 💪