Day 04 · 不会 PS，但我用 HTML 做出了第一张小红书封面

先给结论

今天我用 200 行 HTML 代码 + 30 分钟，从零做出了一张小红书封面：

• 🎨 工具：浏览器 + 一个文本编辑器（没有 PS、没有 Figma、没有 Canva）
• ⏱ 耗时：30 分钟（含两次迭代 V1 → V2）
• 💰 成本：¥0
• 📐 尺寸：750 × 1000，小红书原生 3:4 比例，可直接发

但这篇文章的重点不是"我学会了 HTML"。

是我第一次看清「视觉杠杆」是什么——以及为什么这件事比"学会一个软件"重要 10 倍。

起点：一个看似简单的"做封面"

昨晚发完 Day 03，我想把它同步到小红书。

小红书的玩法很硬：封面决定一切。点击率低 5%，整篇文章就废了。

按我以前的本能反应——打开剪映，找模板，拖拖拖。

但我停了下来，先问自己一个问题。

一个让我停下来的问题

我接下来三个月的内容主轴是什么？

答案是 Web 视觉杠杆——HTML/CSS/JS 这一整套技能。它能做小红书封面、PPT、视频、网页，一套技能多种产出形态。

那做封面用剪映就是在违反主线。

我今天用剪映省 10 分钟，失去的是这 10 分钟本来可以变成可复用的代码资产。

我决定不打开剪映。

这不是一个"做封面"问题，这是一个杠杆选择问题。

30 分钟动手：从空白到 V2

让 Claude 帮我起一份 HTML 模板。整个文件只有 200 行，包括样式。

V1 是这样的：

看一眼就发现三个真实问题：

1. "是"字孤悬左侧——视觉上很别扭
2. 副标题和大标题间距太开——张力被稀释
3. 画面信息密度偏低——没有视觉锚点

改 4 行 CSS，加了一个右上角 "03/100" 大数字（强化「100 天裸辞实验」的承诺感），V2 就有了。

过程中每改一行代码，都会停下来理解为什么。比如：

".title .nowrap 上加 white-space: nowrap，这一行就锁住了'是 拒绝我'必须在同一行，永远不会断。"

看到任何"强行不要断行"的需求，就用这一招。

每改一行，确实学到一个能复用的东西。这不是教程，是带着真实任务的师徒制——AI 是教练，问题是真问题。

真正的认知升级：HTML 三件套就够了

30 分钟之后我有了成品。但更重要的是——我第一次清晰地看见「代码即资产」是什么意思。

整个 200 行的 HTML，真正撑起所有视觉的只有 3 个概念：

1. HTML 嵌套盒子

<div class="card">           ← 卡片最外层
  <h1 class="title">...</h1>      ← 大标题
  <p class="subtitle">...</p>     ← 副标题
</div>

像俄罗斯套娃。盒子套盒子，每个盒子贴个标签 (class="xxx")。

2. CSS 选择器 + 属性

.title {                  /* 找到所有 class="title" 的元素 */
  font-size: 78px;        /* 给它字号 78 像素 */
  color: #2B2622;         /* 给它颜色深棕 */
}

3 行规则就能完全控制一段文字的视觉。

3. 颜色就是 16 进制码

#F4EFE6  ← 米黄（SoloOS 品牌底色）
#2B2622  ← 深棕（SoloOS 品牌字色）
#D97757  ← 橘红（SoloOS 品牌 accent）

记住 3 个品牌色，所有视觉资产的颜色统一就解决了。

就这 3 件事。不是"学 HTML"，是"会用这 3 件事拼出任何你要的视觉"。

为什么这件事比"学软件"重要 10 倍

剪映/PS/Canva 是工具。学会了，做出来的图就只是一张图。

HTML/CSS 是技能 + 资产。今天我做了一张小红书封面——这套代码也能做：

• 公众号封面（改尺寸）
• B 站封面（改尺寸）
• 抖音/视频号封面（改比例）
• PPT 一页（改文字布局）
• 网站 Hero 区（搬到 Next.js 里）

一份代码，七种产出形态。

这就是 Naval 说的「代码是边际成本为零的杠杆」——我第一次不是从理论上理解，是从手感上理解。

做完之后我看清的一件事

我今天不是学会了做封面。

我是把"做视觉"这件事，从「重复劳动」变成了「可复利的资产」。

下次再要做小红书封面，改两行字 + 改三个色就好了。再下一次想做 PPT、做海报、做视频——同一套代码改几个参数就有了。

剪映永远做不到这一点。

这句话我写进了 SoloOS 的判断尺里，作为接下来 90 天的方向锁。

接下来

Week 1 的小红书封面已经出 V2。明天起：

• 📤 把这张封面发到小红书测试账号，看真实数据
• 🎬 Week 2 开始：用 Slidev 做一份"SoloOS 定位"PPT
• 🎥 Week 3：回到 Remotion，做一条 5 秒品牌视频

3 周后我会有：3 种视觉资产 + 3 篇 journey + 1 个可包装的"Web 视觉杠杆"系列。

---

如果你看完这篇也想试试——

不要先去学 HTML 教程。

打开 Claude，把今天这篇文章丢给它，告诉它：「按这个思路，帮我做一张 XX 主题的小红书封面。」

让它写代码，你看着改。

30 分钟，你也会有第一张属于自己的封面。

---

本文的封面源码 100% 公开，直接打开就能看到活的封面： soloos.cc/code/day-04-xhs-card.html 浏览器里右键 → 查看页面源代码，就能看到完整 200 行 HTML。 改成你的品牌色，改一下文字，就是你的封面。