不用设计软件：我让 AI 用网页代码做封面图

写《Pi 1.0 实测》那篇的时候，我需要一张封面图。最后用的是下面这张：

做这张图，我没有打开任何设计软件。它其实是一个网页：AI 用 HTML 和 CSS 把它排出来，再用浏览器截成图片。

这个方法我越用越顺手，这篇把过程拆开讲。

第一步：先有真实的素材

封面右边那两张终端截图不是画出来的，而是真的在我电脑上跑出来的。

我用了一个终端录制工具，写好一段录制脚本：打开 Pi，输入任务，等 20 秒，截图。同一个脚本跑两遍，一遍关闭 Codemode，一遍开启，得到两张可以直接对比的画面。

窗口大小、字号、配色全部写在脚本里固定好，所以两张截图风格统一，以后需要也能随时重录。

封面上的每一样东西都是真的：截图来自真实操作，数字来自真实测试。这一点比好不好看更重要。

第二步：先想清楚版面要说什么

这张封面的比例是 5:2，很扁，所以我让它分成左右两半：

• 左边放结论：大标题负责让人停下来，下面三个数据标签负责说服。数字用等宽字体加绿色，扫一眼就能看到；
• 右边放证据：两张截图叠在一起，各转一点角度，像桌上随手摊开的两张纸，比平铺更有层次；
• 用对比讲故事：后面那张“不开 Codemode”调暗、降低饱和度，前面那张“开启”保持鲜亮。红色标签写“一趟一趟跑腿”，绿色标签写“一个脚本办完”，不用读字也能看出谁好谁差。

配色用暖白底配深绿，和文章里那张对比图是同一套，整篇文章的视觉是统一的。

第三步：用网页代码排版

整张封面就是一个 1500×600 的网页。文字、截图、阴影、圆角、旋转角度、标签，全部是几行 CSS：

.t1 { transform: rotate(-3deg); filter: saturate(.6) brightness(.85); }
.t2 { transform: rotate(2deg); }
.t2 img { object-fit: cover; object-position: 0 18%; }

截图用 object-fit: cover 只露出最有信息量的那一块：前面那张只露出 Codemode 脚本，后面那张只露出一列 read。

这些代码我不用自己写。我只需要告诉 AI：版面怎么分、哪里放什么、想要什么感觉，它就能把网页写出来。改的时候也一样，说一句“标题再大一点”“标签往右挪”就行。

第四步：导出，然后自己检查一遍

用浏览器的无头模式把网页截成图片，加上两倍缩放，导出 3000×1200 的高清图：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --hide-scrollbars --force-device-scale-factor=2 \
  --window-size=1500,600 --screenshot="$PWD/cover.png" "file://$PWD/cover.html"

导出之后一定要看一眼成品。这次就发现“一趟一趟跑腿”这个标签压住了截图里的窗口标题，挪了个位置，重新导出一次就好了。

让 AI 做完，不等于做好了。 看一眼成品，是最便宜的验收。

为什么我喜欢这个方法

• 改起来快：换标题、换数字只要改一处文字，几秒钟重新导出；
• 可以复用：下次写别的测评，换掉截图和文字，就是一张新封面；
• 风格统一：颜色、字体、圆角都写在同一份代码里，一个系列的封面天然长得像一家人；
• 真实可信：截图是真的，数字是真的，封面本身就是证据。

这个博客的分享卡片也是同样的思路：先用代码画出一张图纸风格的版面，再导出成图片。

什么时候不适合

这个方法适合信息型的图：文章封面、数据对比、社交媒体配图、演示文稿里的图表页。

如果你要的是插画、照片质感或者复杂的品牌视觉，还是交给设计师或图像模型更合适。代码擅长的是排版和精确，不是画画。

如果你的团队也经常要做一批风格统一的配图，比如每周的文章封面、商品详情页的信息图，可以把它做成一个固定流程，交给 AI 来跑。这正是我做 Skill / Agent 定制时最常处理的一类工作。