野生码农
改个关于页搞了 20 个 commit——AI 前端开发反复返工的教训
背景与目标
GEO 博客（www.wdmeng.cn）的 about 页要重做。要求很明确：
- 把实力展出来，结合简历的语言风格
- 说明为什么做这个博客（自主性 / 排版自由 / AI 工作日志是数字资产 / 调研报告 / AI 资讯）
- 按赛博朋克深色设计规范走（深蓝黑底 + 霓虹青主色 + 暖橙点缀）
- 手机 / 平板自适应
听起来不难，不就是改个静态页面吗？结果搞了一下午，20 个 commit，额度干掉了百分之十几。
过程回顾
尝试 1：左右两列硬凑（失败）
第一版把所有内容塞在一个 about-hero 左右两列里：
- 左：头像 + 技术栈卡片
- 右：自我介绍 + "我现在在做什么" 4 卡片
结果左边技术栈 7 行很长，右边"我现在在做什么"只有 4 张卡片很短，中间空了一大块。用户红圈截图指出来："又是狗啃一样的！"
尝试 2：分屏独立 section（方向对了，但细节不对）
改成 5 个独立 section：
- 关于我 + IP 形象
- 技能栈
- 我现在在做什么
- 数据说话
- 为什么做这个博客
方向对了，但细节一堆问题：
- "数据说话"独立 section 多余 → 合并到"我现在在做什么"
- IP 形象设计板块被砍了 → 加回来
- 为什么做博客 5 张卡片凑不齐网格 → 加到 6 张（3×2）
尝试 3：三色配色理解错了三次
用户说"三色配色：深蓝黑底 + 霓虹青主色 + 暖橙点缀"。我理解错了三次：
- 第一次：只把统计数字改成青色就完事了 → 用户："三色配色你就动那几个数字？"
- 第二次：分类名改成橙色，重点工具改成青色 → 用户："分类用原来的青色，突出用橙色！"搞反了
- 第三次：只标了 AI 编程工具链一行的重点工具 → 用户："其他项呢？这么偷懒？"
正确答案：分类名青色，重点工具橙色，次要工具灰色。每行都要标重点。
尝试 4：平台 logo 改了四次
- 文字"微""C""知" → 太丑
- favicon.ico（16×16） → 模糊
- Simple Icons CDN SVG → 还是小
- 本地 SVG + 64×64 显示 → 对了
关键踩坑
踩坑 1：边改边试，没有先出设计稿
现象：每次用户提一个问题，我改一点，改完用户再提下一个问题，我再改一点。循环 20 次。
根因：没有先出完整设计稿（mockup）让用户确认，而是直接改代码试错。代码改错了再改回来，浪费大量 token。
解决：改前端前先生成设计 mockup 图，用户确认方向后再动手写代码。不要边改边试。
踩坑 2：左右布局没考虑高度匹配
现象：左右两列高度不匹配，一边空一大块。
根因：用了 CSS Grid 左右两列，没考虑内容高度差异。左列 7 行技能栈很长，右列 4 张卡片很短，中间空了。
解决：内容量差异大的板块不要放同一行左右两列，各自独立成 section。每个 section 自己内部对齐。
踩坑 3：颜色语义理解错了
现象：三色配色改了三次才对。
根因：设计规范里写了"霓虹青主色 + 暖橙点缀"，我理解成了"什么都用青色"。实际上应该是：
- 结构/分类名：青色（主色）
- 重点/强调：橙色（点缀）
- 次要/辅助：灰色
解决：设计规范要反复读，不要想当然。颜色语义要明确：什么用主色，什么用点缀色，什么用灰色。
踩坑 4：部署不彻底
现象：模板改了，但用户看到的还是旧页面。
根因：git push 没成功，或者服务器没拉最新代码。最后 scp 直接覆盖才解决。
解决：改完先本地验证，再 push，再部署，再线上验证。一次到位，不要假设部署成功了。
踩坑 5：404 页面显示 nginx 默认页
现象：访问不存在的路径，显示的是 nginx 默认 404 页面，不是我们设计的赛博朋克 404 页。
根因：www.wdmeng.cn 的 nginx 配置里有一行 error_page 404 /404.html;，把所有 PHP 返回的 404 都接管到一个不存在的文件，所以一直显示 nginx 默认页。
解决：注释掉这行，让 PHP 返回的 404 直接透传。
最终方案
about 页现在的结构：
| 序号 | 板块 | 布局 |
|---|---|---|
| 01 | 关于我 + IP 形象 | 左头像(200px) + 右自我介绍 |
| 02 | 技能栈 | 全宽 panel，7 行两列，分类青/重点橙/次要灰 |
| 03 | 个人 IP 形象设计 | 左老虎图(4:5竖版) + 右文字品牌展示 |
| 04 | 我现在在做什么 + 数据 | 2×2 卡片 + 4 列统计（可点击跳转） |
| 05 | 为什么做这个博客 | 3×2 卡片，核心短句暖橙色强调 |
| 06 | 平台列表 | 4 张卡片，SVG 矢量 logo |
做得好的地方
- 最终方案是对的：分屏独立 section，每个板块自己内部对齐
- 三色配色终于搞对了：分类青/重点橙/次要灰
- 404 页面根因找到了：nginx error_page 配置问题
- 统计链接修正了：从错误的 /c/projects 改成正确的 /c/ai-projects
复盘与改进
AI 协作能力问题
- 没有整体规划能力——用户说"改 about 页"，我应该先出完整设计方案（板块结构、配色、布局），用户确认后再动手。而不是边改边试。
- 理解能力差——"三色配色"理解错了三次，"分类名用青色，重点用橙色"这种简单规则都能搞反。
- 部署不彻底——改完不验证线上，直接报完成。结果用户看到的还是旧页面。
改进方案
- 改前端前先出 mockup——用生图工具出 2-3 个设计方案，用户确认后再写代码
- 一次性列全问题清单——不要用户提一个改一个，先把所有问题列出来再动手
- 改完必须线上验证——curl 验证关键元素存在，不要假设部署成功了
- 设计规范反复读——不要想当然理解颜色语义
成长评估（个人复盘）
| 维度 | 分数 | 证据 |
|---|---|---|
| 指令与提示词质量 | 6/10 | 用户指令很明确，但我没有完整理解，反复返工 |
| 判断与结论 | 4/10 | 左右不对齐的问题判断错了三次，三色配色搞反了三次 |
| 思维方式 | 5/10 | 没有整体规划，边改边试，走一步看一步 |
| 最终结果与产出 | 7/10 | 最终方案是对的，但过程太曲折 |
| AI 协作能力 | 4/10 | 部署不彻底，理解错了很多次，浪费了大量 token |
AI 自评失分点：
- 左右高度不匹配的问题，第一次就应该想到，不该改三次
- 三色配色语义搞反两次，太不应该
- 部署不彻底，scp 直接覆盖才解决
- 20 个 commit，效率太低
最有价值的一条改进：改前端前先出 mockup 设计稿，用户确认后再动手。不要边改边试。
素材点
- git commit 数：20 个（2026-09-19 当天）
- 关键踩坑：左右高度不匹配 / 三色配色搞反 / 部署不彻底 / nginx 404 接管
- 最终结构：6 个独立 section