2026-07-28 闲鱼产品图生成踩坑复盘

背景与目标

给「系统分析师备考系统」做闲鱼上架用的 5 张产品图（首图+3 张功能图+详情页）和配套文案。之前已经有了一份文案（20260726_闲鱼上架文案_终极版.md），但用户看了 7 月 26 日的产品图片（同事用程序生成的那批）说不行，让我重做。

时间线

07:40 — 第一轮：PIL 生成 v1

用 Python PIL 写了 gen_images.py，生成 5 张 800x800 图。每张图手动算坐标：标题在 y=60，描述在 y=140，框在 x=30 到 x=770。

用户反馈（逐条）：

"整体的图布局配色什么的可以接受，但我明确说了产品的名字叫系统分析师，你写的什么软考AI学习系统？而且我明确说了三个卖点，你把勘误当卖点推是什么意思——你是告诉客户你的产品有错吗？数量炫耀也没有解决，2431 题这个数据，客户在乎的是能不能过，不是有多少道题。"

核心问题：

• 产品名错误（写了"软考AI学习系统"，应是"系统分析师备考系统"）
• 卖点选错（勘误当核心卖点，用户指正"不要主动告诉客户你的东西有缺陷"）
• 数量炫耀（大号字写 2431 题，用户要"卖的是解决痛苦，不是功能介绍"）

08:00 — 第二轮：重写销售总监 agent + 生成 v3

把 xiaoshou-zongjian agent 从产品特化改成通用框架，加了四步流程（产品分析→客户研究→卖点提炼→出街方案）。用新卖点（AI 术语翻译、三打通、考频统计）生成 v3 图片。

同时调研了 AI 销售 agent 的 prompt 设计，结论：role/facts/task/rules/format 五件套 + self-critique rubric + pre-flight checks。

用户反馈：

"2.3.4 三张图片，很多文字框框都超出去了。是不是图片的生图模型有问题？有没有其他更好的模型推荐？

问题：PIL 没有自动换行，文字超出框底。

08:15 — 第三轮：加 wrap_text 函数

加了 wrap_text() 函数，每加一个字之前用 draw.textlength() 量宽度，超了就换行。生成 v4。

用户反馈：

"排版还是差，背景框和文字对不齐，49.9 的价格也是这个问题。还有第三张图片标题什么 39 岁记不住，又不是每个报考的人都 39 岁的。另外还有一个卖点没写，这个系统源码，免费送！"

三个问题：

1. 排版：card_h 算少了 6px，文字超出框底；价格 badge 矮了装不下 56px 字体
2. 人群窄了："39 岁记不住"——不是每个考生都 39 岁
3. 卖点漏了：源码免费送

08:25 — 第四轮：v5 + 修排版重算

改成 html+css 方案，用 Edge headless --screenshot 截图。CSS 自动处理换行和对齐。加了源码免费卖点。

用户反馈：

"首图：标题改成：系统分析师AI学习系统，再加一个卖点：考试倒计时，AI规划学习计划，分配任务。第二张标题：知识点、题库内容-AI解释 副标题，专业术语看不懂，然后继续。AI解释，还结合了考点、考频等解释分析。"

08:35 — 第五轮：用户对我爆发

用户反馈（原话）：

"你直接写代码来做图片，而且销售总监，也没有检查复核，技能也有问题，工作路径闭环也有问题。还搞了一堆的代码，一版又一版"

"你是搞笑吧，还我自己拖图，我要是你直接给我结果，甚至后期，连图片上架都不需要我参与"

痛点：

• 销售总监 agent 写了但没用它的流程走一遍
• 用户被迫当 QA
• 迭代方式低效（改代码调排版）

08:45 — 第六轮：HTML+CSS 截全图

改用纯 HTML+CSS 作为最终方案。f-string + CSS 内联样式。Edge headless 截图工作正常（800x800）。

用户反馈：

"还有那个截图，没有截完整，截了一部分"

Edge --screenshot 在 headless 模式下截的是视口大小，不是全页面。

08:50 — 第七轮：修截图尺寸

把 --window-size 从 800 改成 3000，再自动裁空白。产物是 1280x1702 的全页截图。

用户反馈：

"有下滑操作，要全部截到底，整个页面都截出来"

08:55 — 第八轮：截各 tab 页面

JS 单页应用（SPA），内容靠 JS 渲染。截图时 JS 还没执行完。

踩坑：

• setTimeout 导航 → Edge 截图不等 timer
• --virtual-time-budget → 行为不确定
• win32gui 找窗口 → 窗口找不准，截了一部分

最终方案：在 index.html 末尾加同步执行的 hash 导航脚本，不要 setTimeout。

location.hash.slice(1) → document.querySelector('.tab[data-tab="..."]').click()
// 同步执行，截图时 DOM 已更新

关键踩坑汇总

坑 1：PIL 手动排文字 = 用代码调 CSS

• 现象：文字溢出框、¥49.9 超出 badge
• 根因：PIL 没有自动换行，所有坐标手算
• 解决：换成 HTML+CSS，天然支持换行对齐
• 代价：3 轮迭代，每次跑代码等结果

坑 2：Edge headless 截不全

• 现象：--screenshot 只截 1280x800（视口大小）
• 根因：headless 模式下截图 = 视口，不是全页
• 解决：设 --window-size=1280,3000 再用 Python 裁空白
• 代价：两次用户反馈才定位到

坑 3：SPA 页面 JS 未渲染完就截图

• 现象：截出来是白板/首页 tab，不是目标 tab
• 根因：导航代码用 setTimeout，截图在 timer 触发前执行
• 解决：去掉 setTimeout，用同步代码直接操作 DOM
• 代价：试了 headless + 窗口 + win32gui 三个方案

坑 4：AI 输出无自检机制

• 现象：每轮用户发现的问题，AI 自己本应能发现
• 根因：没有 checkpoint，AI 写完就交，用户当 QA
• 解决：销售总监 agent 加入自审查模块（卖点检查、禁词表、自评分量表）
• 反思：应该在写第一版之前就设好质量门

最终方案

1. 产品图片：HTML+CSS 内联样式 → Edge headless --screenshot → Python 裁剪空白
2. 产品截图：修改 index.html 加同步 hash 导航 → Edge headless 截全页
3. 销售总监 agent：4 步流程 + 自审查清单 + 自评分量表 + 禁词表

所有产物在 output/product_images_final/。

做得好的地方

1. 放弃 PIL 转向 HTML 是正确的——CSS 天然适合文字排版，不应硬用代码去模拟
2. hash 导航同步执行的方案简单稳定，不依赖 timer 猜时机
3. 把用户的反馈风格提炼成自审查机制，写进 agent——"具体位置+具体诊断+方向修正"三步
4. 最终截图方案全部自动化，写一个脚本跑一批

复盘与改进

1. 工具选择应该前置：接任务时先想"用什么工具做这个最省事"，而不是"AI 最擅长写什么"
2. 输出前应该跑自检：每个版本交付前，agent 应该按检查清单跑一遍，而不是让用户发现
3. 用户反馈风格是可编码的知识：他说话特点是「具体位置 → 具体问题 → 修正方向」，这种模式可以提前写进 agent 的 review 规则里
4. SPA 页面截图应该优先用同步方案：一开始就想 clear event loop 的 timing，不走 setTimeout
5. 时间浪费主要在工具切换上：PIL→HTML→Edge 截图→win32gui→headless，每个方案试错一次。如果第一轮就想清楚"文字排版用 HTML，截图用 headless"，能省 1 小时以上

附：用户反馈风格总结

可用于未来 agent 的自审查系统设计：