教程页截图过期:6 种 rot 来源 + 「版本戳 + 季度审」

截图里是去年 UI、说明对不上现在——信任掉、跳出率涨——审计 + 文件名加版本戳 + 季度刷新。

用户打开你「ChatGPT 自定义 GPT 设置」教程。Step 3 写「点 Configure tab」。截图里是 2024 ChatGPT UI 带 Configure tab——但用户看到的是 2026 重设计、没 Configure tab——被挪到 sidebar 改名「GPT settings」。用户困惑、跳出、Reddit 吐槽。教程技术上错了——UI 变了你截图没跟上。

截图会 rot。每次产品 UI 重设计都打破所有引用旧版的教程。多数团队没系统刷新流程——截图从”有帮助”渐渐漂到”主动误导”。修法:检测、按平台批量更新、加版本戳 + 季度审让 rot 可见。

常见原因

按命中率从高到低:

1. 平台重设计了、全站截图没审计

ChatGPT 3 月推了重设计——你有 40 篇文章引用 ChatGPT UI——没人安排审计——40 篇教程 3 月 16 日静默变错。

如何判断:挑近期重设计的平台、抽 5 篇引用其 UI 的文章、看截图是不是当前——3+ 显示旧 UI = 没审计。

2. 截图不集中管理

每篇文章 inline 自己的截图(或 assets/article-slug/)。没集中索引——UI 变时没”所有需要更新的截图”清单。

如何判断:试列出全站特定平台的每张截图——答案需要在 500 文件里手 grep——就是不集中管理。

3. 文件名没版本戳

截图叫 screenshot1.pngchatgpt.png——没版本戳,从文件名看不出是当前还是 18 个月前。

如何判断ls public/screenshots/——文件名没日期或版本标记——每张都是无日期。

4. alt 文字泛泛而非描述性

「ChatGPT screenshot」这种 alt 帮不到用户。慢连接 / 无障碍工具的用户截图没用。staleness 角度 alt 不够具体不利于审计。

如何判断:grep alt="screenshotalt=".*ChatGPT$"——任何匹配都是太泛 alt。

5. 教程文字不和截图具体对齐

文字说「点 submit」、下面截图显示 submit 按钮——submit 挪到 sidebar,文字截图分歧——之间没锚连接。

如何判断:读文章教程——你不能琐碎地匹配”截图说明哪步”——图文对齐松。

6. 没机制 flag 截图过期

没 PR check、lint、季度流程——staleness 只在读者投诉时浮现。

如何判断:上次主动(不是投诉响应)更新截图是什么时候?“不记得” = 无流程。

最短修复路径

按收益从高到低。Step 1 + 2 catch + queue,3-6 防再发。

Step 1:按平台清点所有截图

# 找每篇引用截图的文章
grep -rln "![[]" src/content/articles/ | head -20

# 每个按提到的平台分类
# 建清单:chatgpt 文章、claude 文章、midjourney 文章……

每个平台列文章——那平台重设计时你立刻知道更新哪些。

Step 2:按文章流量 + 平台重设计新近度排优先

最高优先:
- 文章高展示
- 平台 6 个月内重设计

低优先:
- 低流量文章
- 平台 2+ 年稳定

不能全更——更新最要紧的。

Step 3:文件名带日期戳

重命名截图带日期:

之前:chatgpt-ui.png
之后:chatgpt-ui-2026-05.png

或版本:
chatgpt-ui-v2-redesign.png

现在 ls 一眼看出哪些老。刷新时建新文件(-2026-11.png)、改文章引用——老文件留作 snapshot 记录。

Step 4:alt 文字改具体

<!-- 差 -->
<img src="..." alt="ChatGPT screenshot">

<!-- 好 -->
<img src="..." alt="ChatGPT Custom GPT Configure tab,显示 Instructions 字段和 Files attachment 区(2026-05 UI)">

具体 alt 服务慢连接用户、无障碍工具、你自己未来的审计。

Step 5:建季度审计 checklist

# screenshot-audit-Q2-2026.md

## ChatGPT 文章(15)
- [ ] chatgpt-custom-gpt-setup — 最后截图:2024-08、重设计 2026-03、**更新**
- [ ] chatgpt-memory-feature — 最后:2026-04、当前、OK
- [ ] ...

## Claude 文章(12)
- [ ] ...

季度排——time-box:每篇 10 分钟重截图。

Step 6:MDX 里加日期 / 版本注释

import ChatGPTUI from "./assets/chatgpt-ui-2026-05.png";

{/* 截图时间:2026-05、ChatGPT UI v3 */}
<img src={ChatGPTUI} alt="ChatGPT Custom GPT Configure tab(2026-05)" />

CI 脚本能找 9 月以上的截图作为「待 review」:

# scripts/audit-screenshot-age.mjs
# 解析 MDX 找 capture-date 注释,列 >9 月的截图

预防建议

  • 截图文件名带版本戳——一眼看出年龄
  • 维护按平台的文章清单——重设计就立刻 audit + 更新
  • 季度截图审计 cadence,预算时间
  • MDX 加 capture-date 注释 + CI 脚本 flag >9 月截图
  • 每张截图具体 alt——服务用户 / 无障碍 / 审计
  • 平台重设计后 2 周内 batch 更新受影响文章,不要等投诉

相关阅读

标签: #排查 #内容运营 #截图 #UX