野生码农
AI 开发踩坑：5 张电商图改 6 遍，才发现问题不在代码
最近在帮一个系统分析师备考产品做闲鱼上架。需要 5 张产品图：一张首图、三张功能介绍图、一张详情页。听起来很简单对不对？
我打开 Kimi Code，说："帮我生成 5 张闲鱼产品图。"
然后开始了长达 6 个版本的拉锯战。
第一版：AI 写代码，成品"像屎一样"
AI 用 Python PIL（Pillow）生成了图片。
图是出来了，但用户看完只回了四个字："像屎一样"。
问题在哪？
- 堆砌数字炫耀：首图大字写着"2431 题"，用户说这是在"炫耀数量"，不是卖货
- 卖点错了："勘误功能"被当核心卖点推，用户反问"你是告诉客户你的东西有错吗？"
- 产品名都错了：写了"软考AI学习系统"，实际产品叫"系统分析师备考系统"
这轮告诉我一件事：AI 能生成图，但你得告诉它卖什么，不是画什么。
第二到四版：改文案、改排版、改工具
改了文案方向——聚焦三个真卖点：AI 术语翻译、学练记三打通、AI 考频统计。删了勘误，删了数量炫耀。
但文字总对不齐。
PIL 没有自动换行。你得手算每个中文字的像素宽度，写 wrap_text 函数，一行一行地量。改了 3 版，文字还是超出边框。每次用户反馈"这张图的第 3 个框字溢出了"，我就回去调 padding。
重复了 3 轮后，用户拍桌了：
"你直接写代码来做图片，而且销售总监也没有检查复核……还搞了一堆的代码，一版又一版。"
他说得对。我在用最笨的方式调 CSS——用 Python 代码调。
第五版：换工具，不换方案
我从 PIL 换成了 HTML+CSS，用 Edge 的 --screenshot 参数截图。
HTML 的 CSS 天生会换行、对齐、自适应。文字框对齐问题一秒消失。
但新坑来了：Edge 截图截不全。
msedge --headless --screenshot=output.png --window-size=1280,800 index.html
// 截出来只有 1280x800，页面下方的内容丢了
问题：默认截图只截视口（viewport）大小，页面的滚动内容不截。
解法：把窗口设到 3000px 高，再把空白部分裁掉。
msedge --headless --screenshot=output.png --window-size=1280,3000 index.html
// 然后 Python 自动裁掉底部空白
第六版：JS 动态页面截图，时间对不上
产品本身是个单页应用（SPA），内容靠 JavaScript 渲染。截图时 JS 还没执行完，截出来是白板。
先后试了：
- setTimeout 等几秒 → Edge 截图不等 setTimeout
--virtual-time-budget=3000→ 虚拟时间模式下 timer 行为不确定- window.open → 用 win32gui 找窗口 → 窗口找不准，截了一部分
最终方案：在 index.html 里加一段直接、同步的 hash 导航脚本，不要 setTimeout，让它和页面脚本在同一事件循环里执行完。Edge 在所有同步 JS 执行后才截图。
var hash = location.hash.slice(1);
if (['learn','cards','quiz','stats','wrong'].indexOf(hash) >= 0) {
document.querySelector('.tab[data-tab="'+hash+'"]').click();
}
// 同步执行，不等 setTimeout，截图前 DOM 已经更新
真正的教训
折腾了 6 个版本，最后复盘，核心问题只有三个：
1. 选错工具，用代码硬调排版
PIL 适合画图，不适合排文字。电商产品图本质是文字排版工作，应该用 HTML+CSS，天然支持换行、对齐、居中。AI 默认选了它熟悉的 PIL，因为它"会写代码"，但没判断这个工具合不合适。
2. AI 生成的输出，缺一道自检关卡
用户每轮反馈都很具体："第二张图第二个框文字溢出了"、"¥49.9 标签装不下 56px 字体"。如果 AI 在输出前自己跑一遍自检，这些问题在交付前就能发现。
我把这件事写进了销售总监智能体的章程（.opencode/agents/xiaoshou-zongjian.md），加了一个 "自审查" 模块——卖点够不够具体、有没有用客户视角、禁词有没有删、各维度自评分。输出前自己打分，低于 4 分就不许交。
3. 让用户当 QA，是最大的浪费
用户是产品的 owner，不是测试。每次他发现问题，是帮他干活，不是帮我干活。正确的分工是：我（AI）交付经过自检的东西，他只需要做选择题。
结尾
AI 辅助开发的效率瓶颈，从来不在"AI 写不写得出来"，而在**"AI 怎么知道自己写得对不对"**。
加一道自检关卡，比优化 prompt 管用 10 倍。
如果你也在用 AI 做电商物料，建议试试 HTML+CSS 方案 + Edge headless 截图。比 PIL 省 80% 的对齐时间。
备选标题
- AI 开发踩坑：5 张闲鱼图改 6 遍，才明白选对工具比会写代码重要
- 电商图用 AI 生成？先看看我们踩的 5 个坑
- 为了 5 张产品图写了 6 个版本——AI 辅助开发最容易犯的 3 个错误