关于 show-before-after
用于生成单页前后对比页面的设计技能，将两个视觉状态并排展示，并用编号注释把说明对应到具体区域。
主要功能
- 01并排或堆叠展示状态
- 02按来源渲染内容
- 03编号注释关联页面标记
- 04同步悬停高亮注释与标记
- 05支持滚动和视口控制
适用场景
- 01比较界面改版前后
- 02展示图表或模型输出差异
- 03对照终端文本或日志
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/show-before-after确认已加载。
附带文件agents/openai.yaml
详细介绍
展示前后对比
前后对比页面是一个独立的 HTML 页面，将某个视觉内容的两种状态并排展示，并让分析紧扣读者所见。Before 通常是当前状态；After 则是一个计划、已完成的分支或替代方案。
来源
尽可能使用最忠实的来源来渲染两侧，并在窗格标题下方标明来源（“Current app.css”、“localhost:5173 on main”、“matplotlib, seed 0”、“Screenshot, macOS”）：
- 两种状态都以网页形式运行：让每个
<iframe>指向各自的服务。 - 需要复现的 HTML、CSS 或 SVG（网页 UI、图表、电子邮件、渲染后的文档）：将实际源码放入
<iframe srcdoc>，以隔离两侧的样式表。 - 渲染后的输出（图表、模型预测、原生或移动端 UI）：每侧各放一张图片，图片由对应修订版本的实际代码生成。
- 文本输出（终端、日志、文案）：每侧使用等宽字体块展示实际文本。
两侧使用相同的输入、数据和随机种子，让变化成为唯一差异。
页面
- 标题，然后用一到两句话说明哪些内容发生了变化，哪些保持不变。
- 一行控件，只包含此对比所需的控件：标注开关、布局（并排 / 堆叠）、视口、长帧同步滚动，以及用于体现变化的输入变体。
- 两个窗格：“Before ·
”和“After · ”。 - 每个窗格下方放置编号说明。Before 说明问题；After 说明修复。每条说明包含一项加粗的论断，以及一句解释原因的话；存在具体数值（px、数量、价格、指标）时，应将其写明。
- 在画面中对应说明所描述的元素或区域上放置编号标记。悬停说明时高亮对应标记；悬停标记时高亮对应说明。
输出
将页面写入 $TMPDIR/<topic>/before-after.html，在后台浏览器窗口中打开其 file:// URL，并回复绝对路径。srcdoc iframe、指向运行中服务的 iframe，以及页面旁的图片都能从 file:// 加载，因此无需启动服务。只有在页面需要使用浏览器禁止从 file:// 访问的功能时才使用 python3 -m http.server 提供目录服务：fetch、ES 模块脚本或本地字体文件。
当每条说明都在其描述的内容上有对应标记，且两侧都与各自标注的来源一致时，页面就完成了。
评论
支持 Markdown