fangdididi/asset-size-matrix

asset-size-matrix 是做什么的？

一张主视觉，每个槽位，没有重要内容被截断，以及每份文件的收据。

该技能的用途

一次上线很少只需要一张图片。它需要链接预览、视频缩略图、正方形帖子、竖版帖子、3:4封面、竖版故事、个人资料横幅、应用图标、仓库预览，也许还有竖版视频。每一个都有其自身的像素尺寸、自身的文件规则以及自身的界面叠加层：竖版信息流右侧的点赞栏、缩略图角落的时长徽章、位于横幅顶部的头像、图标上的圆角遮罩。

人们通常处理这个问题的方法是反复拖拽裁剪框十几次。结果大家都很熟悉：在9:16版本中标题被切成两半，Logo隐藏在头像下，在4K主视觉上可读的文字到信息流里变成三个像素高，缩略图因2.3 MB被拒绝，短视频比周围的视频安静了8 dB。

该技能把这项工作变成一个表格。每个投放目标变成一张带有数字和日期的槽位卡片。主视觉被标记一次：哪些框必须保留。一个小型规划器会计算，对于每个槽位，在保持这些框位于槽位安全区域内的前提下，能进行的最宽裁剪，并在无法进行任何裁剪时明确说明。然后，每个导出的文件都会根据其卡片进行检查。

它解决的问题

• 裁剪凭肉眼决定，一次一个，因此不一致，没人能说出为什么选择某个裁剪方案。
• 安全区域被遗忘，直到帖子发布后，发现行动号召按钮位于平台按钮下方。
• “随便裁一下”被应用于裁剪不起作用的槽位（宽布局被挤进9:16），结果要么内容被切掉，要么被缩小到无法辨认。
• 文本大小是在主视觉上判断的，而不是在槽位实际显示的尺寸下。
• 文件规则（格式、重量、编码器、帧率、响度）是通过上传错误发现的。
• 平台数据是从没有日期和来源的旧博客文章里复制来的。

何时使用

在以下情况使用：

• 一个设计必须以几种尺寸或为几个平台交付；
• 有人要求“上线工具包”、“社交包”、“所有尺寸”、“横幅组”；
• 封面或缩略图在上传后不断被截断或变模糊；
• 一个短视频也必须同时有竖版、正方形和宽版；
• 你即将导出一批文件，并且希望证明每个文件都符合其规格。

不要用于从零开始创建设计（请先制作主视觉）、编辑视频内容（剪辑、字幕、调色）或发布。它可以告诉你某个槽位需要新的布局；新布局是设计任务。

你需要什么

• 主视觉：理想情况下是可编辑的源文件（Figma/PSD/HTML/SVG/项目文件）加上最大尺寸的扁平导出文件。仅对于只需裁剪的槽位，像素图也可以。
• 目标列表，或目标（“在X、Instagram和我们的博客上发布”）。
• 对于视频槽位：视频文件，以及如果需要自动检查，请安装ffmpeg/ffprobe。
• Python 3.8+ 用于辅助脚本 scripts/matrix.py（仅使用标准库）。

分步指南

1. 评估主视觉

在 master.json 中记录（参见 examples/master.json）：

• 像素宽度和高度，以及它是静态图片还是视频；
• 是否存在可编辑的源文件（这决定了重新排版的代价）；
• 可用的最大版本。切勿根据有人在聊天里粘贴的缩小版副本来规划。

如果主视觉比最大的槽位还小，现在就说明；稍后它会显示为UPSCALE（放大）。

2. 编写槽位列表，带上日期

创建 slots.json（从 examples/slots.json 开始）。每个槽位一张卡片：

字段	含义
id	导出文件的文件名主干，例如 video-thumb -> video-thumb.jpg
w, h	交付像素尺寸；exact: false 表示“至少这么大，相同宽高比”
safe	平台UI覆盖的顶部、右侧、底部、左侧内边距（以槽位像素为单位）
drop	不应出现在此槽位中的命名框（例如，图标上的标题）
fit	wide（默认，保留尽可能多的上下文）或 tight（填充安全区域）
display_w	槽位实际显示的宽度，以CSS px为单位，例如网格中的缩略图
min_text_px	在 display_w 下仍可阅读的最小大写字母高度
formats, max_kb	允许的文件类型和大小上限
视频字段	video_codec, audio_codec, pix_fmt, fps 范围, min_s/max_s, sample_rate, lufs (+lufs_tol), true_peak_max
source	数据来源

列表的规则：

• 在顶部放置 as_of（今天的日期）。尺寸和覆盖层会变；没有日期的卡片是谣言。
• 对照平台自己当前的帮助页面或可下载的模板检查每张卡片。 如果你无法验证某个数字，请保留它，但写上 "source": "unverified" 并在交接时说明。
• 仅当目标不明确时才询问槽位。一次提出捆绑问题胜过五次单独问： “我会制作链接卡片、缩略图、正方形、9:16故事和横幅。需要增加或删除哪些？”

3. 标记主视觉

仍然在 master.json 中，以主视觉像素为单位，将框列为 [x, y, w, h]：

• keep：必须在每个未删除该框的槽位中可见的内容（产品、人脸、关键艺术）；
• text：每个文本块及其 cap_px（主视觉上大写字母的高度）；
• logo：标记；
• focus：当没有标记任何内容时，可居中对齐的点。

通过在设计工具中测量、从源文件中读取图层边界、或打开图像并仔细估算来获取框。每个框加宽几个百分点；紧贴人脸边缘的框在实践中会切掉下巴。

4. 规划每个槽位

python3 scripts/matrix.py plan --master master.json --slots slots.json

对于每个槽位，你都会得到一个裁决结果：

• CROP：一次裁剪+缩放将所需的所有内容都保留在安全区域内。该行包括裁剪矩形和一个准备好的 ffmpeg 滤镜（crop=w:h:x:y,scale=W:H）。
• UPSCALE：裁剪可行，但会放大主视觉。该行指明了所需的主视觉尺寸。请要求更大的导出文件或矢量Logo，而不是交付模糊的图像。
• REFLOW：无法进行任何裁剪，或者文字在显示尺寸下无法阅读。如果该行包含 art_only，则艺术图仍能干净地裁剪，只有列出的文本/Logo需要为此形状重新设置。否则，构图本身必须改变。

在导出任何内容之前，向用户展示该表格。这是改变主意的成本最低的时刻。

5. 解决每个REFLOW

选择最轻量且可行的修复方式，按此顺序：

1. 重新设置字体：使用 art_only 矩形裁剪艺术图，然后将标题和Logo重新放置到槽位的安全区域内，并设置能通过 min_text_px 检查的大小。
2. 重新堆叠：宽版布局（文字左，艺术图右）变成竖版布局（艺术图上，文字下），从可编辑的源文件出发，保持相同的字体、颜色和间距比例。
3. 扩展画布：在源文件中加宽背景（或使用纯品牌色），使艺术图适合安全区域，而不是缩小艺术图。
4. 为小槽位缩短内容：图标和头像只携带标记；双列网格中的3:4封面可能需要更短的标题。切勿自己重写文案；提出更短的文字，让所有者批准。

在每次更改后重新运行 plan，直到每个槽位都是CROP，或者是一个经过慎重考虑且有解释的例外。

6. 导出

• 仅裁剪的槽位：应用规划的滤镜，无论是静态图片还是视频： ffmpeg -i master.png -vf "crop=...,scale=..." link-card.png。
• REFLOW槽位：从可编辑的源文件中以精确的槽位尺寸导出。
• 将所有文件命名为 <槽位id>.<扩展名>，放在一个文件夹中，以便检查器能找到它们。
• 静态图片：sRGB，在平台会将其压平到未知颜色的地方不保留透明度，逐步降低质量直到满足 max_kb。
• 视频：偶数宽度和高度，yuv420p，除非卡片另有说明，否则使用源文件的帧率，响度归一化到卡片的目標。对于大小限制，计算比特率： python3 scripts/matrix.py budget --seconds 58 --max-mb 50。
• references/export-recipes.md 中有更多配方。

7. 检查每个文件

python3 scripts/matrix.py check --slots slots.json --dir out/ --loudness

每个槽位返回 PASS、FAIL、CHECK（某些内容无法测量）或 MISSING。

机械故障（尺寸错误、格式错误、重量超限、像素格式错误、采样率错误）可自由修复。会改变内容的故障（更短的时长、更紧的裁剪、提升背景噪声的更大音量）需要所有者的选择：说明选项及其代价。

8. 以实际尺寸观察

检查器无法看到。构建一份联系单，以 display_w 显示每个槽位，并标出安全区域，然后打开它：

python3 scripts/matrix.py sheet --slots slots.json --dir out/   # 写入 out/contact-sheet.html

查找： 文字越过安全线、人脸在关节处（下巴、头顶、手）被裁断、Logo置于繁忙背景上、两个槽位看起来像是不同的品牌。

9. 交接

交付文件夹加一份简短的清单：

工具包：Tidepool 上线，槽位截止日期 2026-10-24（2张卡片未验证：note-cover, article-cover）
link-card.png       1200x630   184 KB  PASS  crop
video-thumb.jpg     1280x720   402 KB  PASS  reflow：标题在96 px大写字母高度处重新设置
story-vertical.png  1080x1920  1.1 MB  PASS  reflow：重新堆叠，画布扩展
app-icon.png        1024x1024   61 KB  PASS  from vector logo（raster was 1.6x too small）
vertical-video.mp4  1080x1920  21 MB   PASS  -14.2 LUFS, -1.3 dBTP, 30 fps, 41.0 s
查看：contact-sheet.html（所有槽位以显示尺寸呈现）

示例

“让这个上线横幅到处都能用。” 主视觉 4000x2250，标题在左，手机模型在右。规划：链接卡片和仓库预览 CROP；缩略图 REFLOW（标题在网格尺寸下仅13.5 px高，需要14 px）；正方形、竖版和3:4 REFLOW，带 art_only 裁剪（在手机下方重新设置标题）；9:16 REFLOW，无 art-only（模型对于安全列来说太宽，因此扩展画布并重新堆叠）；应用图标 UPSCALE（使用矢量Logo）。参见 examples/plan.output.md。

“YouTube一直拒绝我的缩略图。” 一个槽位。检查显示2.4 MB，容量上限为2 MB，且尺寸为1280x721。重新导出为1280x720，JPEG质量从95降低到88：1.3 MB，PASS。

“同一个短视频要用于Reels、Shorts和宽版YouTube剪辑。” 三个视频槽位。竖版槽位从16:9的主视觉中CROP，仅因为演讲者居中；宽版剪辑就是主视觉本身。检查发现44.1 kHz音频（WARN）和-21.9 LUFS（FAIL，目标为-14）；归一化、重新导出、重新检查。参见 examples/check.output.txt。

小贴士

• 标记主视觉一次，并将 master.json 与设计文件放在一起；下一次活动可以重复使用。
• 当两个平台形状相同但叠加层不同时，仍然给它们单独的卡片。
• 如果一个导出文件必须服务于多个信息流，优先使用一个保守的竖版视频安全框。
• 通过数字检查但裁断了人物关节的裁剪方案仍然失败；请相信目视检查步骤。
• fit: tight 用于标记和图标；所有其他内容应保留上下文（wide）。
• 保持未验证的数字在清单中可见，而不是默默地信任它们。
• 每次重新导出后都重新检查，而不仅仅是你更改的文件：批处理工具会覆盖相邻文件。