首页的作品区，上一版是一行行文字：序号、标题、一句话、标签，靠分隔线排开。信息都在，但看过去像一份更新日志。
这次重做，核心不是「加卡片」，而是回答一个问题：怎么让陌生人相信这些东西真的存在。
问题不在列表，在没有物证
作品和文章不一样。文章卖的是观点，读者看完可以不同意；作品卖的是「这东西真的跑起来了」，读者只能靠你给的证据判断。
旧版每个作品只有一段描述。描述可以写得很好，但它证明不了任何事。
另一个问题是标题居中。精选作品左对齐，文章左对齐，关于我左对齐，只有作品区标题居中，读到这里视线会断一下。
决定一：标题左对齐，数字从数据里算
区块标题改成左对齐，和整站统一。右侧补了一行「5 个产出 / 2 个开源」，数字直接从 works.ts 里算，不手写，以后加作品不会忘记改。
决定二：有真实界面的，用截图
五个作品里，只有两个有能看的界面：灵码科技官网和 Git Reference。
官网的截图直接截 1440×900。Git Reference 用无头浏览器截本地页面，顺手把开发浮标裁掉。
截图会过期，产品改版就得重截，这是维护成本。我接受它，因为一张过期的真截图，也比一段漂亮的形容词有用。
视觉上沿用精选作品的容器语言：16px 圆角、暖灰边框、悬停轻微浮起。作品区不该是另一个设计系统。
决定三：没有界面的，不伪造界面
Devkits 是命令行工具，Vue Cmdk 是 npm 包，FishMeter 是菜单栏 App。它们没有「页面」可截。
试过截 npm 页面。文字墙，放进卡片像一份文档，不像作品。
最后的做法是排版板：工程图纸的网格底纹，加真实信息。Devkits 放 npx devkits 和「6 条命令，零依赖」，Vue Cmdk 放包名和「gzip 3.4 kB」，FishMeter 放「macOS 菜单栏 CPU 监控」。
它不是截图，也不假装是截图。
我知道排版板有被误认为占位图的风险。但生成一张假界面，读者点进去发现完全不是这样，损失的是整个作品区的可信度。两害相权，我选不撒谎。
排版板有个技术细节：产品名、命令、体积这些拉丁字符走等宽字体，中文说明留在黑体。等宽字体没有中文字形，混在一起中文会掉回系统字体，这是上一版踩过的坑。
布局：6/6 和 4/4/4
12 栏网格。上排两个有截图的，各占 6 栏；下排三个工具，各占 4 栏。
第一版试的是 7/5。两张截图宽度不同，高度差了一百多像素，标题一高一低，整行看起来是坏的。改回等宽之后对齐了，视觉也安静下来。
图片的编号也挪了位置。原来叠在图片左上角，压住产品自己的 logo；现在放回标题左侧，和列表的编号逻辑一致。截图里已经有产品的视觉重心，再叠一个数字徽标是噪音。
顺手改了文章区
文章区原来的问题更明显：宽屏下是一条被拉长的行列表，每行只有一行标题，右边大片空白。
改成 7/5 分栏。左边一篇主打，栏目、日期、衬线大标题、摘要、入口；右边三条紧凑条目，靠分隔线排开。
不是所有模块都要卡片化，但宽屏下的横向空间要用起来。
代价
- 首页变长了，移动端要重新检查一遍。
- 截图有维护成本，产品改版要重截。
- 排版板可能被误读成「没做完」。
- 还没做作品详情页，现在点进去是外链或站内页面。
结果
构建通过，浅色和暗色都在宽屏下截图检查过。没有流量数据可写，也不编。
下次再改，优先补 FishMeter 的真截图，而不是继续加卡片。