这个站我改了两轮。第一轮把它从「程序员简历」改成了「终端风工作台」；第二轮（就是你现在看到的这版）把它从一个风格化的网站改成了一个真实运转的工作台。
这篇记录第二轮的完整过程：发现了什么问题、怎么判断的、最后做了什么决定。里面有几个结论是我改之前完全没想到的。
第一版的问题：把「终端风」当成了风格
第一版我很满意：深色底、等宽字体、每个区块都套着带标题栏的面板（[01] lingma-qr 这种），标题旁边还有 $ ls ./products 这样的假命令。
问题在半年后暴露出来。
我给一个不懂技术的朋友看，他说的第一句话是："挺酷的，但看着有点像在展示你会用终端。"
这句话点到了要害。我自己写过一条原则叫"终端是工作界面，不是装饰"，但第一版里几乎所有的终端元素都是装饰：
- 标题栏里的"文件名"是编的
- 那句
$ ls ./products从来没有被执行过 - 首屏那个像终端窗口的东西，里面没有任何真实输出
当装饰性元素占了视觉主体，网站传递的信息就从"这个人做出了什么"变成了"这个人喜欢这种风格"。
最隐蔽的一个问题：中文其实一天都没在用我指定的字体
这是我在改版前挖出来的，也是最值得单独讲的一条。
我给站点配了三支字体的想法，但实际上：几乎每个区块容器上都写着 font-mono。
而等宽字体（JetBrains Mono）没有中文字形。所以页面上所有中文，都直接落到了系统默认字体上 —— 在我自己的 Mac 上是苹方，在别人的 Windows 上是微软雅黑。
也就是说：
- 我精心挑选的中文字体，从来没有生效过
- 中文在不同设备上的样子，完全由访客的系统决定
- 中文句子里的
AI、36这类拉丁字符走等宽字体，和周围的汉字之间会突然多出一道缝
修法本身很简单，但发现它需要先质疑一个"看起来在正常工作"的东西：
/* 中文回退栈写全，等宽只留给真正的机器输出 */
--font-sans: var(--font-noto-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: var(--font-jetbrains), ui-monospace, Menlo, monospace;
顺带一个认知："本地看着没问题"是排版问题的温床。你在自己电脑上看到的字体，很可能只是恰好好看。
卡片为什么显得 low：问题不在卡片
改版前我最不满意的就是卡片，觉得"看起来很廉价"。我一开始的打算是把卡片做得更精致：加渐变、加高光、换阴影。
后来我把页面截图放大，数了一下：一张 300px 宽的卡片里，有 4 条横线、3 种字号。
- 顶部是标题栏（一条横线 + 两个 11px 的标签）
- 中间是内容
- 底部还有一条
border-t分隔的"阅读全文"区 - 卡片外面还包着一层图框（因为案例图自己也带 border）
再看全站：正文 15px、标签 11px。所有字号都挤在 11px 到 15px 之间，等于没有层级。没有层级就没有重点，没有重点看起来就像原型图。
所以真正的问题不在卡片的装饰，在三件事：
- 字号没有对比（全站挤在小字号区间）
- 框太多（卡片里还有框，框里还有分割线）
- 七个区块节奏完全一样（同样的标题样式、同样的两列网格、同样的卡片墙）
改法：先把卡片删掉
既然问题是"到处都在用卡片"，那第一刀就是删卡片。
我参考了几个做得好的个人站 —— Josh Comeau 的暖、MVPFast 的结构感 —— 提炼出的共同点是：列表用"行"，不用"卡"。
现在的容器只剩三种，而且每种都有明确职责：
| 容器 | 用在哪 | 形态 |
|---|---|---|
| Stage | 精选作品、产品截图 | 圆角 16px + 柔和阴影，全站只有少数几个 |
| Row | 作品列表、文章列表 | 序号 + 标题 + 一句话 + 箭头，靠分隔线，没有框 |
| Note | 联系方式、状态说明 | 浅底 + 左侧一条强调线 |
效果是：首页上真正像"卡片"的东西只剩两三张，而且每一张都是真对象（产品截图、工作台照片）。其余全是行和留白。
字号也重新分成了七级，正文从 15px 提到 17px，最小的标签从 11px 提到 13px。层级拉开之后，"大气"这件事其实是自动发生的 —— 它不需要额外的装饰，只需要让该大的东西真的变大。
天光：让人记住的往往不是内容
这轮改版我最喜欢的一个决定，是首屏顶上那条会变的天光。
它不是图片，是几段 CSS 渐变。但它按天津时间分成四个相位：清晨是暖金、白天偏青、傍晚转橙、夜里沉下去。旁边配一句真实的问候：「晚上好 · 天津 21:34」。
为什么要做这个？因为"让人记住一个网站"通常不需要更炫的动效，而是需要一个只属于这个站的东西。同一天不同时间打开，它的颜色是不一样的；这个变化没有任何功能性，但它让这个站看起来像"有人住的地方"。
技术上有一个必须守住的约束：服务端渲染的输出必须是确定的。
如果直接在渲染时读 new Date()，构建结果会随时变化，还可能触发水合不一致。所以我的做法是：
- 服务端先渲染一个确定的默认值（白天相位 + "你好"）
- 客户端挂载后再按访客的时钟校正相位和时刻
这样 HTML 里始终有完整的一句问候语，爬虫和无 JS 访客都能看到内容，也不会出现水合报错。
改版前后
改版前（每个区块一套卡片，字号挤在一起）：
改版后（大标题、行式列表、只剩少数几个真对象）：
几个具体的判断
顺手记几条这轮改版里做过的决定，都是取舍：
- 服务价格表从首页移走。首页现在只讲"我在造什么"，报价放到独立的合作页。先让人相信你，再谈钱。
- 删掉了假案例。原来有一块"服务案例"，但其中一个是自家公司的站。与其把它包装成客户案例，不如把这一块改成「作品」，诚实列自己做过的东西。
- 删掉了所有假终端元素：标题栏里的假文件名、没有执行过的命令、macOS 红黄绿三个圆点。
- 数字和事实全部保留：正在构建什么、上次发布是什么时候、下一步做什么，这些看起来跟设计无关，但它们是"这个站在运转"的证据。
小结
这轮改版真正改掉的，不是配色和圆角，是三个想法：
- 装饰不是风格。终端元素只有在承担真实信息时才是风格，否则只是噪音。
- 层级比精致更重要。字号拉开、留白给足，"廉价感"自己就消失了。
- 诚实是最省力的设计。没有客户案例就写作品，没有用户数就不写数字 —— 省下的不只是心理负担，还有一堆需要在文字里绕过去的坑。
网站还在继续改。这版不是终点，只是当前这个阶段里，它最像我的样子。