第一回合：让 AI 再生成一张，还是去图库找#

原先那张紫鸟就是生成的。问题在于生成物总带着一股说不清的”平均感”——构图挑不出错，但也没有任何地方让人记住。再来一张大概率还是这样，所以换个思路：去公共图库找真人拍的图。

关键词锁定极简 / 抽象。下了三十张，第一轮把太花的、有明显主体的、一眼看着像壁纸的都筛掉，剩九张：

怎么从九张里定一张？我用了一个很实际的判据——站点主题色。

本站主色是 oklch(0.70 0.14 250)，约等于 #53A3F2，一个偏亮的天蓝。手写签名要压在头像上，所以头像最好是低饱和的中性底，能把天蓝衬出来。按这个标准排，3 号（蓝紫幻境）和 6 号（青蓝流线）先出局：它们本身就是蓝紫调，签名压上去等于蓝叠蓝，糊成一团。

最后选中的是 9 号，黑白灰的抽象几何。理由是它几乎是纯灰阶，签名不管什么颜色都压得住。

第二回合：我按圆形裁切，但头像框是方的#

选完图，我做了件想当然的事：把九张候选全按圆形裁切，拼成对比图。上面那张图就是这么来的。

但这是错的——回头翻 Profile.astro 才看清，头像外面套的是 rounded-xl + overflow-hidden，配 object-cover 填一个 256×256 的方框。是圆角方形，根本不是圆形。

后果很实际：那九张圆形预览完全不能代表真实观感。一张靠斜向线条构图的图（比如选中的 9 号），裁成圆形后只剩中间一坨，看不出原来的走向；反过来，方框下会露出来的四个角，在圆形预览里也全被切掉了。

重写预览脚本，按真方框、真圆角、真尺寸渲染：

裁切落地就一条命令，源图 → 中心裁 1:1 → 640×640 PNG，体积从 378KB 降到 192KB：

1
node .workbuddy/tools/set-avatar.mjs <源图> public/avatar.png

这里还有个容易忽略的细节：object-cover 是从中心裁的，所以选图时画面重点必须落在正中，否则会被裁掉。九张候选里就有两张主体的位置偏下，方框一裁只剩背景。

第三回合：签名换了三次字#

先说我想要的机制。签名不是文字，是一张透明底的单色图，视觉上压在头像下缘。显示时用 CSS mask-image 指向这张图，再给元素填 background: var(--primary)：

1
<span class="signature-mask" style={`mask-image: url('${signature}')`}></span>

1
.signature-mask {
2
    position: absolute;
3
    inset: 0;
4
    background-color: var(--primary); /* 图只负责形状，颜色由主题色决定 */
5
    -webkit-mask-size: contain;
6
    mask-size: contain;
7
    -webkit-mask-repeat: no-repeat;
8
    mask-repeat: no-repeat;
9
    -webkit-mask-position: center;
10
    mask-position: center;
11
}

好处是图只管形状、颜色由主题色决定。哪天改主题色，签名自动跟着变，不用重新出图。

接下来是选字，一共换了三轮：

1. 华文行楷「留心」——系统自带。落在图上太”印刷”，笔画粗细几乎一样，没有飞白，看着像从字帖上截下来的。
2. 志莽行书——比行楷活，但两个方块字撑不起一条签名，字形也偏”设计字体”。
3. 英文 Watch Your Back——最后定的。理由很实际：侧边栏文字栏是横长的一条（240×47），两个中文字放进去，左右全是留白；换成西文连笔，正好横向铺满，内容也和站点 name 对得上。

字体选 Great Vibes。它的笔画是 hairline 级的细，直接压在照片上几乎看不见，所以生成时给它描了一道同色的 0.8% 细边当”加墨”：

生成脚本走的不是文字渲染，而是取字形轮廓：opentype.js 取 path → 拼成一条 SVG path → sharp 按 300dpi 渲染 → 紧贴笔画外框裁切 → 输出 webp。这样字距、裁切边距、笔画粗细全部可控，也不受机器上装没装这个字体影响。

NOTE

这里踩了个 ESM 的坑：opentype.js 的 dist/opentype.js 是 UMD 包，在 ESM 下 import 会报 self is not defined；它的 loadSync() 内部走 require('fs')，ESM 下同样用不了。必须换成 dist/opentype.module.js，再自己 fs.readFileSync + opentype.parse()。

落款：短横 + 一句话#

到这一步其实就能上线了。真正让我决定再改一轮的，是一张手写题款的图：主体字下面跟一条短横，再下面一行小字。三层一凑，签名才像”落款”，而不是”贴了张字上去”。

于是补上：签名 → 短横（主题色）→ 一句话（取 profileConfig.bio）：

落点（原生 px，侧栏宽 280、文字栏宽 240）：

代价是卡片高度从 328.8 涨到 396.7（+68px），多一横一句的必然结果。

期间挖出来的两个真问题#

1
.signature-rule,
2
.signature-caption {
3
    position: relative;
4
    z-index: 60;
5
}

几个能复用的小工具#

这一轮攒下几个不用开 dev server 就能验效果的脚本：

好处是不依赖浏览器：改完样式直接出 PNG，比开 dev server 快得多，也不会因为”本地看着对”就放过一个只在真实宽度下才暴露的偏差。

一点体会：这一轮真正花时间的不是写代码，是把”看起来对”变成”量出来对”。圆形预览、记错的 margin 基准、被盖住却以为不存在的元素——三个坑同一个来源，拿感觉代替了测量。

相关阅读#

• 右侧悬浮工具栏：回顶部、随机一篇、目录抽屉与评论跳转是怎么做的：侧栏周边的按钮同样在这套工具栏里。
• 读完那篇「跳出舒适区」，我把侧栏折了起来：下一篇，侧栏折叠。