头像框出图规范

这是给画头像框的人看的规范，整份可以原样转发给画师 —— 不需要读站点源码。

一句话：头像框 = 一张正方形的透明 PNG，叠在头像上。它会出现在顶栏、讨论区、 评论区、博客列表和每个人的主页上，而且是同一个文件被缩放到 20px–120px 的各种尺寸。 所以这份规范里真正的设计底线只有一条：缩到 20px 还认得出。

速览（四条硬要求，理由都在后面）：

站点现成的六款示例框的源码是 scripts/make-frame-demos.mjs（纯 SVG，改一改 就是一款新框）；几何、命名与登记口径的权威是它和 src/lib/frame-refs.ts。 找站长要几张现成素材（ring.png、corner.png）当参照最省事。

一、它会出现在哪、有多大

三件事由这张表推出来：

• 一张图服务所有尺寸：不是每档画一张，是同一个文件被缩放。按最大档（120px）画， 按最小档（20px）验收。
• 20px 是底线：那一档只剩十几个像素宽，能活下来的基本只有颜色。 想让两款框区分得开，换配色比加装饰有效。
• 细节只在 120px（个人主页）和设置面板的预览里看得见。装饰（角标、挂件、纹理） 在那里是彩蛋；在 20–34px 上基本不存在 —— 别把它当成识别手段。

完整的落点清单（哪个页面用哪个尺寸）在 docs/frontend-styles.md §4.1； 那里改了尺寸，这里要跟着改。

二、画布与格式（硬规格）

⚠️ 「中间是透的」这件事没有第二道保险。站点在服务端只能查出「这个 PNG 有没有 透明通道」，查不出「你忘了挖空中间」—— 那种错要等全站头像上都盖着一块图案才被发现。 导出之后叠一张头像看一眼是最可靠的一步（附录给了现成的叠图代码）。

三、几何：8% 圆角（最关键的一条）

站点的头像不是圆形，是圆角方形：圆角半径 = 边长的 8%（全站统一， 见 docs/frontend-styles.md §4.1）。而框的可见区域就是头像那块形状 —— 划到它外面的 像素不显示。由此有三条：

① 外缘 = 一个 8% 圆角的圆角方形，正好顶满画布四边（零边距）。

② 环的粗细上限 = 边长的 8%。 这不是审美限制，是几何限制：头像的圆角就只有 那么点大，环再厚，内缘的圆角就被挤没了，四个角会变胖（看着像画歪了）。 换算到实际尺寸上：20px 的头像上，环最粗只有 1.6px —— 这是这套规格的物理上限。

③ 内缘圆角 = 外缘圆角 − 环宽（里外两圈圆心重合），这样环的宽度才是均匀的。 按描边（stroke）画的话，三个数是：位置 = 环宽/2、边长 = 画布 − 环宽、 圆角 = 20.48 − 环宽/2（以 256 画布为例）。

一张 256 的画布，几个现成的数：

④ 中央留白。 环宽不超 8% 时，每条边的中段至少露出 84% 宽的人脸。装饰（角标、 挂件）请压在靠外的一圈里 —— 经验值是画布外缘 1/8 的带内；中央 3/4 那块是脸， 别放东西。

造型本身是自由的（角标、挂件、上下饰带、四角小图案都行），第 ②③ 条只管 均匀的环。守住两条即可：所有像素在画布内、贴着画布边的地方跟着 8% 圆角走。 示例里的「鱼干蓝」就是在环上压了四条小鱼，「角框」是把装饰放在四个角上。

最小可用的一款框（可直接存成 .svg 用浏览器打开看）

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
  <!-- 环宽 w = 20（上限 20.48）。三个数都由 w 算出来：
       x/y = w/2 = 10，边长 = 256 − w = 236，圆角 = 20.48 − w/2 = 10.48 -->
  <rect x="10" y="10" width="236" height="236" rx="10.48"
        fill="none" stroke="#2563EB" stroke-width="20"/>
</svg>

改 stroke-width 时记得同时改另外三个数（公式就在注释里）。导出 PNG 时务必保留 透明背景 —— 截图 / 导出勾了「背景色」都会把中间填实。

四、小尺寸怎么看

换算很简单：256 的画布缩到 20px，就是缩到 1/12.8。所以画布上 X 像素宽的东西， 在 20px 下是 X ÷ 12.8 像素：

所以定稿前一定缩到 20px 看一眼。看的不是「好不好看」，是「还剩什么」—— 一款合格的框在那一档应该还能认出一圈有颜色的边。往 20px 上堆细节， 堆进去的都会消失，只有颜色留得住。

五、配色与主题

站点有浅色与深色两套主题（页面底色 #F8FAFC / #131517，卡片 #fff / #181A1D）。 同一张框会同时出现在两种底色上，两边都要看一眼：

• 用饱和的中间调。示例框的配色可作基准：蓝 #2563EB（站点品牌主色）、 紫 #8b5cf6、琥珀 #f59e0b、青 #06b6d4。
• ⚠️ 避免纯白：浅色卡片上它会消失。也避免纯黑：深色主题下糊成一片。
• ⚠️ 别用大面积半透明填充盖住中央 —— 那会把每个人的头像染灰、染暗。 半透明适合做「往外淡出的第二圈」（示例里的「光晕」就是这么做的）。
• 外发光 / 投影画在画布外的部分会被裁掉；要做发光感，就画在画布里面。

六、命名与交付

• 文件名 = 小写字母 / 数字 / 连字符 + .png，例如 sakura.png、 mid-autumn.png。这个名字（去掉后缀）叫 key，会同时用在两处：站点的图片地址 /api/frames/<key> 与站长登记的表里 —— 所以不能是中文、不能有大写、不能有空格。
• 一稿一个文件，平铺在一个目录里，不要子目录。
• 名字别以下划线或点开头：那两种前缀是留给临时 / 预览文件的，站点会直接跳过。
• 只认 .png。.jpg / .gif / .webp / .svg 交过来也不会被收。
• 交给站长的东西：
  • PNG 文件（按上面的规则命名）；
  • 源文件（PSD / AI / 画笔文件）自己留着，别塞进素材目录 —— 那里只放 PNG，塞进去的其它文件会跟着站点一起发布；
  • 一句话说明（会显示在设置面板的卡片上，比如「2026 中秋限定」）；
  • 想署的名（可以写进那句话里）。
• 授权：素材会随站点的代码一起发布（这是站点的素材目录，不是用户上传区）。 请确认是你自己的原创；用到的笔刷 / 贴图 / 字体也确认授权允许这样使用。
• 改稿：把同名文件再发一次就行，覆盖即生效，不用改任何配置。注意浏览器会缓存 旧图最长一天 —— 你自己和身边人可能要多刷几次（或强制刷新）才看到新的， 其他用户最多一天内都会换过来。
• 交到站长手上之后：站长登记 key、把图放进素材目录，框才会出现在站上 —— 只把文件拷进去、没登记名字的，站点不认（防止误拷的文件被当成框）。 登记与发放见 docs/guide/头像框使用指南.md。

七、交付前自查（逐条过一遍）

• 画布是正方形、边长 ≥256（推荐 256×256）？
• 是 PNG 带透明通道？导出时没压平、没垫底色？
• 中央是透的？叠在一张照片上看一眼，脸上没有你的图案或灰雾？
• 外缘顶满画布四边、四角是 8% 圆角？叠在头像上看，角上既没露底、也没被切？
• 环宽 ≤ 边长的 8%？四个角没有变胖？
• 画布外面没有东西？（外面的一律不显示）
• 缩到 20px 看了一眼？颜色还认得出吗？
• 浅色（#F8FAFC / 白）和深色（#131517）两种底色下都看得清？
• 文件名是小写字母 / 数字 / 连字符，后缀 .png？
• 附了那句话说明、以及想署的名？

附录：两个现成的验收方法

① 叠在头像上看（这就是站点真实的做法，最准）：

<div style="position:relative;width:120px;height:120px;border-radius:8%;overflow:hidden;background:#F8FAFC">
  <img src="一张头像.jpg" style="width:100%;height:100%;object-fit:cover">
  <img src="你的框.png" style="position:absolute;inset:0;width:100%;height:100%">
</div>

把存好的 .html 用浏览器打开，把宽度依次改成 120 / 34 / 24 / 20 看四遍； 把 background 换成 #131517 就是深色主题。

② 缩到 20px 再放大看：不是看它好不好看，是看「还剩什么」。

八、做错了长什么样（对照表）

九、灵感方向

四季 / 节日、材质（金属、玻璃、纸感）、几何线条、食物、小动物、纯色渐变…… 都可以。只有一条经验值得记：同一屏上会同时出现好几款框（讨论区里每个人的 头像都带着框），所以「和别的框摆在一起能一眼区分」比「单独看很精致」更重要 —— 而区分度主要来自颜色（见第四节）。