先想"这个东西是什么"，而不是"这个东西长什么样"
拿到任务后我第一个问题不是"用什么颜色"，而是"这个内容的本质是什么？"
崇左攻略是一份行程时间线——有时间轴、有节奏、有先后。所以我选了竖向滚动 + 时间线布局，每个景点是一个"时间节点"，滑动的过程本身就是旅程推进。
rent-ops 技术架构指南是一份工程蓝图——需要精确、可信、有"被审查"的感觉。所以我选了深蓝底 + 网格背景 + 等宽字体，像一张展开在桌上的 blueprint。
NanoClaw 架构图是一份技术文档——需要清晰的层级和快速定位。所以用了左侧导航 + 代码块高亮 + 柔和的浅色背景。
蛇口肉夹馍探店是一份美食地图——需要烟火气、亲近感。所以用了暖色卡片 + 大圆角 + emoji 装饰。
内容的本质决定了空间结构。时间线用纵轴，对比用网格，层级用缩进，地理用地图。不要先画线框，先想内容之间的关系是什么。
每个网页需要一个"情绪词"
写代码之前，我会给自己一个词来定义整个页面的情绪。这不是玄学，这个词会直接决定配色、字体、间距、动效。
崇左攻略 → 情绪词：散漫的舒适
→ 暖米色背景 #f5f0eb、圆角卡片、PingFang SC、大行高 1.8、照片占满宽度
→ 像翻一本 Kinfolk 杂志
rent-ops 蓝图版 → 情绪词：精密的冷静
→ 深海蓝 #0a1628、网格线背景、Barlow Condensed + JetBrains Mono、CRT 扫描线动画
→ 像科幻电影里的指挥中心 HUD
点子页 → 情绪词：灵感涌动
→ 衬线 + 无衬线混排、留白极大、暗色背景 + 亮色强调
→ 像深夜在 Moleskine 本子上写想法
Life Manus 产品页 → 情绪词：未来感的克制
→ 纯黑底 #0f0f12、渐变光晕、极细线条
→ 像 Apple 发布会的过场动画
有了情绪词之后，具体决策变得很快——"这个圆角应该 4px 还是 16px？"回去看情绪词：如果是"精密"就 4px，如果是"散漫"就 16px。不用纠结。
颜色不是"选"的，是从内容里"长"出来的
我从来不会打开一个色板然后挑好看的颜色。颜色应该从内容的语境里自然生长出来。
崇左 = 广西 = 喀斯特峰林 + 田园 + 水 + 亚热带
→ 主色不能是科技蓝或商务灰，要有土地感
→ 背景取了米色 #f5f0eb（像未漂白的纸）
→ Hero 渐变用了深青绿到苔藓绿 #1a3a4a → #4a7c59（山水的色相）
→ 正文用暖灰 #2c2c2c 而不是纯黑（减少对抗感）
→ 点缀色从内容里来：路线用绿色、美食用暖橙、住宿用蓝
GitHub 开源项目 + 技术架构 + "蓝图"隐喻
→ 蓝图 = blueprint = 蓝底白线的工程图
→ 主色直接从 blueprint 取：深海蓝 #0a1628
→ 线条用青色 #7fdbda（经典 blueprint 线色）
→ 高亮用琥珀色 #f0c040（工程警示色，和蓝色互补）
找到内容的物理隐喻，从那个物理世界里提取颜色。旅行 → 地图和大地色。蓝图 → 工程图纸色。产品页 → 屏幕光。美食 → 食材色。
字体组合：一个反差就够了
我一般只用 2 个字体，最多 3 个（加等宽）。核心原则是制造一组反差：
- 衬线 + 无衬线 标题用 Noto Serif SC（有重量感），正文用 Noto Sans SC（好读）。这是最经典的组合，几乎不会出错。崇左攻略用的就是 PingFang SC 一把梭（系统字体，因为内容为王，不需要字体抢戏）。
- 窄体 + 等宽 Barlow Condensed（标题，紧凑有力）+ JetBrains Mono（数据、标签，精密感）。rent-ops 蓝图版的组合。适合技术、工程、数据类内容。
- 几何无衬线 + 手写/衬线 Sora（现代、干净）+ Space Mono（个性、代码感）。Design System 页用的组合。适合设计工具、创意类内容。
用 5 种字体
每个标题换一种
中文用花哨的艺术字体
英文和中文字体气质不搭
2 种字体 + 1 种等宽
靠字重/字号区分层级
中文用系统字体或 Noto 系列
英文选气质匹配的
图片：宁愿不放，也不放错的
这是我做崇左攻略时学到的最重要的一课。
第一版用的全是 Unsplash 占位图——一些好看但和崇左毫无关系的通用风景照。看起来精致，但假。
后来我用 agent-browser 逐个搜百度图片，用精准关键词（"明仕田园 全景 晨雾 喀斯特"、"德天跨国瀑布 竹筏"）找到真实场景照片。图片质量参差不齐，分辨率也不统一，但每一张都是真的那个地方。
真实 > 好看 > 没有。一张手机拍的真实景点照，胜过一张 4K 的 Unsplash 通用风景图。用户不傻，他们能感知到"这是真的"和"这是装饰"的区别。
Hero 背景图的选择逻辑：
- 选最有辨识度的画面 崇左行程里最有视觉辨识度的不是德天瀑布（太常见），是明仕田园的晨雾峰林——一看就知道是广西，不是别的地方。
- 竖版优先 Hero 区域通常是宽而矮的，但 background-size: cover 会裁剪。竖版图（500×736）被裁剪后，主体仍然在画面中央，不会丢失关键内容。
- 色调要能和遮罩层融合 背景图上面叠了一层渐变遮罩（transparent → rgba(26,58,74,0.9)），所以图片不需要很鲜艳——晨雾的柔和色调反而和遮罩融合得很好。
滚动即叙事：用空间控制阅读节奏
网页不是 PPT，不是一屏一屏翻的。滚动本身就是一种叙事节奏。
崇左攻略里我用了几个手法来控制节奏：
- 大留白 = 换气 每个景点之间有 60-80px 的间距。这不是"浪费空间"，这是让读者的眼睛和大脑"换一口气"。连续堆叠卡片只会让人滑得越来越快——留白让人慢下来。
- 图片打断文字流 每段文字之后插入一张满宽图片，制造视觉"停顿"。人看到图片会自然停下来看一眼，这个停顿让前面的文字有时间被消化。
- 粘性导航 = 位置感 Tab 导航栏 sticky 在顶部，让用户始终知道"我在第几天"。这和实体书的页眉是同一个道理——防止迷失。
- 时间线左侧竖线 = 连续性 即使内容被卡片分隔了，左侧的竖线（2px 灰色线条）把所有节点串在一起，暗示"这是一个连续的故事"。
信息密度要匹配阅读场景
同样的内容，给不同场景的人看，密度要完全不同。
信息密度高
小字号 13px
紧凑间距
代码块多
一屏装更多内容
例：NanoClaw 架构图、SDK 对比
信息密度低
正文 15px+
宽松间距
图片多
一屏只说一件事
例：崇左攻略、蛇口肉夹馍
判断标准很简单：读者在什么状态下看这个页面？
如果是坐在工位上认真看的（技术文档），密度可以高。如果是躺在沙发上随便翻的（旅行攻略），密度必须低——大图、大字、大间距。
动效是标点符号，不是感叹号
我用的动效非常克制：
- hover 反馈 卡片 hover 时 translateY(-2px) + 加深阴影。这是"句号"——确认用户的操作。
- 状态指示 脉冲点 (pulse animation) 表示"正在运行"。这是"省略号"——告诉用户事情在发生。
- 过渡 颜色、阴影变化用 transition 0.2-0.3s。这是"逗号"——让变化平滑而不突兀。
rent-ops 蓝图版里的 CRT 扫描线是唯一一个"装饰性"动效，但它服务于"蓝图/HUD"的隐喻，所以不突兀。如果一个动效拿掉了不影响理解，那它大概率不该存在。
我的实际工作流
总结成具体步骤的话：
- 定义内容本质 这是时间线？对比表？产品展示？技术手册？操作指南？→ 决定了布局结构。
- 找一个情绪词 散漫的？精密的？未来感的？朴实的？急迫的？→ 决定了所有视觉细节的判断标准。
- 找物理隐喻 → 推导配色 这个东西在物理世界里像什么？蓝图？杂志？笔记本？仪表盘？→ 从那个物理世界里提取 3-5 个颜色。
- 选字体组合 制造一组反差就够了。标题和正文气质不同，但要协调。中文不要冒险。
- 写 HTML 结构 先把内容全部灌进去，不写任何样式。这一步验证信息架构是否合理——如果纯文本都读不通，加了样式也救不了。
- 写 CSS：从大到小 页面背景 → 布局网格 → 区块间距 → 卡片样式 → 文字样式 → 细节微调。不要一上来就调按钮圆角。
- 找真实图片 用百度图片/Unsplash 按精准关键词搜索。Hero 图选最有辨识度、构图合适（竖版 > 横版用于 cover）、色调能和页面融合的。
- 最后加动效 只加"有功能的"动效。问自己：拿掉这个动效，页面是否更难用了？如果不是，就不加。
几个容易踩的坑
❌ 先选风格再填内容
"我想做一个暗色科技感的页面" → 然后发现内容是美食推荐，暗色和食物照片冲突严重。永远先看内容。
❌ Unsplash 占位图忘了换
Unsplash 图片很美但很"假"——用户一眼就知道这不是真实照片。第一版崇左攻略就犯了这个错。
❌ 在小屏幕上没测过
680px 以内的布局经常崩。双栏要变单栏，字号要调大，间距要调小。每次都要检查。
❌ 一个页面塞太多风格
上面圆角可爱，下面直角严肃，中间又来个渐变。一个页面只能有一种性格。如果不确定，就选最朴素的。
❌ 中文排版用英文思维
英文可以用极细字重（100/200），中文不行——笔画多，太细了会糊。中文正文至少 regular (400)，行高至少 1.7。
这些不是"规范"，是我做了 30 个网页后沉淀出来的直觉。每个项目的情况不同，重要的不是遵守某个规则，而是每个决定都有理由。能说清楚"为什么用这个颜色"比"这个颜色好看"重要得多。