摘要

同事一句"你这界面是 2010 年的？"把我干沉默了。美化第一轮翻了车——一句"帮我美化一下"，它上了彩虹渐变。这篇讲审美公式（参考物+风格词+禁忌词）、CSS 变量为什么像配置中心，以及夜班人最爱的深色模式。

话题标签：#WorkBuddy #AI美化 #网页设计 #深色模式

压垮我的最后一根稻草

第二轮迭代完，功能齐了，我把日常真的搬了进去。用是真好用——直到那天同事路过我工位。

"你这系统是 2010 年的？"

我顺着他的视线看自己的屏幕。他说得对。默认字体、系统蓝按钮、灰色边框，功能上是个现代应用，长相上是个古董。我一直忍着没治，理由是第 07 篇说的"装完家具再刷墙"——家具装完了，该刷墙了。

美化当天晚上我干的第一件事，恰恰是这轮唯一的翻车现场。我把当时真实输入的那句话原样贴出来：

帮我把界面美化一下，好看一点，现代一点。

它改完，我打开一看，差点没笑出声：

渐变。到处都是渐变。按钮是蓝紫渐变，背景是粉橙渐变，进度条是彩虹渐变。字体倒是换了，换成了跟渐变完全打架的衬线体。整个页面像 2008 年的 QQ 空间与非主流日志的联名款。

我没骂它。因为错误明显在我："好看一点"这四个字，在它的词典里对应的可能是人类历史上出现过的任何一种审美。它只是从那一千种里随机抽了一个。

审美公式：参考物 + 风格词 + 禁忌词

翻车之后我冷静了一下，问了自己一个问题：如果我雇一个 UI 外包，我会怎么跟他说？

我不会说"做好看点"。我会说：参考某某产品的风格，用某某色调，不要某某元素。

翻译成公式，就三段：

【参考物】参照哪个现成的东西 【风格词】用几个具体的词钉住感觉 【禁忌词】明确说不要什么

我的第二轮指令（就是最终生效那版）：

界面美化，按这个来：

  1. 【参考物】整体感觉参考 macOS 系统设置的干净感，卡片式布局
  2. 【风格词】克制、清爽、留白多一点。主色只用一个蓝色系，优先级红黄绿三个辅助色，其他地方一律中性灰白
  3. 【禁忌词】不要渐变，不要花哨的阴影，不要衬线字体，不要超过两种主色，不要动功能布局（第 07 篇排的"位置"全部保持）

另外加深色模式：右上角一个切换按钮，夜班用。深色要真深色（接近黑的深灰），不要为了好看用深蓝。

注意禁忌词那段，"不要动功能布局"是必须的——上一轮排好的位置，不能因为美化被顺手改掉。改布局是功能变更，不是美化，两码事得分开提。这是从变更管理里带出来的本能：一个变更窗口只干一类事。

美化前后对比

这轮一次到位。克制的蓝、卡片、圆角、干净的字——同事再路过的时候说的是"哟，换皮肤了？挺像那么回事"。我自己是那种打开一个页面第一反应想截图的状态。

美化后的主界面

最意外的收获：CSS 变量就是配置中心

美化完我照例读代码（第 05 篇立的习惯）。这轮读到一个东西，让我这个运维产生了强烈的既视感——CSS 变量。

代码里有一段大概长这样：

:root {
  --color-primary: #2563eb;      /* 主色 */
  --color-danger: #dc2626;       /* 逾期红 */
  --bg-page: #f5f6f8;            /* 页面底色 */
  --radius-card: 10px;           /* 卡片圆角 */
}

所有颜色、圆角、间距，全部收拢在这一小段里，页面其他地方只引用变量名。

这不就是配置中心吗？！我把这个发现发到运维群里，同行的反应出奇一致："这不是 Nginx 抽配置的思路吗""跟 Ansible 的变量文件一个道理"。

它的价值也一模一样：改一处，全局生效。我想把主色从蓝换成青，改一行；想把圆角调小，改一行。不用满页面找颜色值。而且深色模式就是基于这套变量做的——切换主题等于切换一套变量值，跟"生产/测试两套配置文件"是一个结构。

这也是我想给所有"我不懂前端"的同行说的话：前端代码里到处都是你熟悉的概念的变体。配置中心、变量模板、事件脚本——你不是不会前端，你是缺一本翻译词典。

深色模式：夜班人的刚需

深色模式我特意验了三件事：

  1. 切换按钮在右上角，一眼能看到
  2. 真的深——底色接近黑的深灰，不是那种"假装深色"的深蓝
  3. 会记住——切到深色，关浏览器，明天打开还是深色（这个状态也存在浏览器本地，和数据库文件互不干扰）

深色模式：夜班标配

写这篇的时候是晚上十一点，我屏幕上就是这个配色。给夜班做的东西，就该有夜班的活法。

这轮的积分学费清单

这轮的消耗结构值得单独列一下：翻车那轮（"帮我美化一下"）+ 公式那轮（一次到位）+ 深色模式，加起来占了整个系列前期消耗的大头之一。

学费换来的公式就一句话，你再抄一遍也不会亏：

参考物 + 风格词 + 禁忌词，外加一句"不要动功能布局"。

凡是要动"感觉"的需求（美化、风格、语气、排版），都套这个公式。它把一千种解释收窄成一种。

下一篇预告

到目前为止一切顺利，你可能觉得这活儿太稳了。

下一篇，翻车来了。我加一个新功能（搜索），它改完，整个列表直接点不动了，页面顶上飘着一行我看不太懂的英文报错。

但这一次，我有备胎——第 07 篇埋的那个"升级前导出"的习惯，加上一个运维都会的动作。怎么救回来的，下一篇见。