作品区有五张卡。灵码官网和 Git Reference 有真实界面，Devkits、Vue Cmdk、FishMeter 没有页面可截。最早我给后三个做了「排版板」：网格底加真实命令和包信息。能看，但五张卡放在一起，两张截图和三张排版板像两个系统。
后来我把五张全换成了手绘插图。这篇写清楚两件事：为什么不用图库，以及怎么画。
为什么不用图库
先试了免费的插图库。人物、配色、线条都很完整，但放进这个站里不对劲：站点是暖白纸面、墨色文字、emerald 点色，图库插图是另一套视觉语言。更要命的是，插图库给不了「这个作品是什么」的信息，它只能让卡片看起来不空。
作品区需要的是物证，不是装饰。图库解决不了物证问题，只会把空白填满。
手绘是第三种选择
真实截图是最强的物证，但只有两个作品有界面。剩下三个，伪造界面是最差的选择：读者点进去会发现不是那样，损失的是整个作品区的可信度。
手绘插图是第三种选择：它明确是「速写」，不假装是截图。卡片的 alt 写「手绘草图」，读者不会误认。它不承担「证明产品长这样」的责任，只承担「让这一排卡有统一的视觉节奏」。
代价也要说清楚：手绘不是物证。原来两张真实截图的「可验证」价值没有了，换成了一致性。这是一个取舍，不是纯升级。
怎么画
五张图都是 SVG，1200×750，最后用 sharp 输出 1600×1000 的 PNG。源文件在 design/works，成品在 public/images/works。
统一的视觉参数：
- 纸面
#FAF8F4，墨线#1B1B18，点色#10B981，辅助灰#6B6A62 - 点阵纸面加四角裁切标记
- 所有线条画两遍，控制点加 ±1px 抖动，圆头
- 圆角矩形用二次曲线，不用直角
- 阴影不用渐变，用斜排线
手绘感不是随机乱画。线条抖 1px 是「手」，抖 10px 是「坏」。所有抖动都在一个固定种子的随机里，保证可复现。
五个作品的画面分别是：终端窗口、命令面板、菜单栏加鲸鱼、浏览器里的官网、Git 速查页。都是产品的一个侧影，不是产品界面。
一个技术细节：字体
「linmaa」和「Git Reference」用了 macOS 自带的手写字体（Noteworthy / Bradley Hand），在栅格化时渲染进 PNG。这样访客不需要装字体，图片也不会因为字体缺失变成方块。
但中文不能用这套字体。手写字体没有中文字形，中文会掉回系统字体。所以图里的中文说明全部用站点的黑体，手写只用在拉丁字母上。
结果
五张图放在一起，是一本速写本，不是五个截图。作品区从「两张截图加三块排版板」变成了一个统一的视觉系统。
验证方式很土：1440、768、390 三档宽度截图，浅色和暗色各看一遍，构建通过。没有用图库，没有版权问题。
下次要改，先改 SVG，再重新栅格化。图不是一次性的。