Web Design Craft · 网页设计手艺

> 好设计 = 一个明确的观点 + 一套严格的系统 + 足够多的细节。

平庸的页面往往不是"丑"，而是"没有立场"：它什么都像，所以什么都不是。AI 生成界面最常见的失败就是平均值——白底、紫蓝渐变、居中大标题、三张一模一样的卡片、到处都是 rounded-2xl shadow-lg。本 skill 的目标是让每个页面都有性格、有系统、经得起细看。

本文件是总纲。深入的规则、数值与代码片段在 references/，17 个完整案例在 examples/（每个都是可直接在浏览器打开的单文件 HTML）。

1. 工作流：五步从需求到成品

Step 1 · 读懂语境

能推断就推断，不必事事追问用户：
- 谁在看？ 开发者、消费者、儿童、投资人、设计师……
- 要他们做什么？ 注册、购买、阅读、查数据、记住品牌……
- 应该有什么感觉？ 用 3 个具体的形容词定调，如"克制、温暖、手工感"。"现代、简洁、高端"约等于什么都没说。
- 内容是什么？ 真实内容决定布局。先写（或合理推测）真实文案，再排版，而不是先画框再塞 lorem ipsum。

Step 2 · 选方向，写一份迷你设计简报

动手写代码前，在 HTML 顶部注释里写下这份简报（所有案例文件都这样做，可以参考）：

风格：日式侘寂 × 编辑排版
字体：Noto Serif SC 300/600 + EB Garamond Italic（数字与英文）
色板：宣纸 #f4f1ea / 墨 #2b2a27 / 石 #8a8378 / 柿 #9c5b3b（全页只用 1–2 处）
布局：大量留白、竖排标题、非对称两栏、视觉重心偏右
签名细节：手绘圆相 SVG、极细分割线、缓慢淡入

签名细节（signature move）是让页面被记住的那一两个东西：可拖拽的 Win98 窗口、跟随鼠标的眼睛、朱红印章、按 G 键显示网格……每个页面至少要有一个。它把"一个模板"变成"一件作品"。

Step 3 · 先建系统（design tokens）

把所有决定写成 CSS 变量，后面只引用变量、不写魔法数字。系统感是"高级"的主要来源——人眼能察觉到间距和颜色背后的秩序。

:root{
  /* 色彩：按"角色"命名，不按色相命名 */
  --bg:#f4f1ea; --surface:#fbf9f4; --text:#2b2a27; --muted:#6f685d;
  --line:color-mix(in oklab, var(--text) 14%, transparent);
  --accent:#9c5b3b;
  /* 字体 */
  --font-display:"Noto Serif SC", serif;
  --font-body:"Noto Serif SC", "Songti SC", serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  /* 流体字号：模数比例 1.25–1.333 + clamp */
  --step--1:clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-5: clamp(3rem, 1.8rem + 6vw, 7rem);
  /* 间距：4/8 基准 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* 形状与动效 */
  --radius:6px; --ease-out:cubic-bezier(.16,1,.3,1); --dur:.5s;
}

Step 4 · 由粗到细地搭建

骨架（网格、分区、留白）→ 字体层级 → 色彩 → 组件与状态 → 质感细节 → 动效。
每完成一层做一次眯眼测试：把眼睛眯起来（或整体模糊），还能看出层次、焦点和阅读路径吗？看不出来，说明对比不够——先解决它，再往下走。

Step 5 · 自检与打磨

对照第 6 节清单逐条检查。最后 10% 的打磨决定了"还行"和"惊艳"的差距。
能用浏览器时，一定要亲眼看：截图桌面宽度（1280+）和 375px 手机宽度，滚动到每个区块；在控制台跑一次 references/layout.md §8.1 的横向溢出排查脚本。代码"看起来对"和页面"真的对"之间，隔着字体回退、网格最小宽度、浮点误差这些只有渲染出来才会暴露的问题。

2. 选方向：风格不是装饰，是决策

用五条轴给需求定位

场景 → 推荐风格（对应 examples/ 编号）

三条原则

1. 用户指定了风格或品牌规范 → 严格服从，并把它做到极致。 不要偷偷换成你更喜欢的风格。
2. 未指定 → 根据语境选择，并做一个"意料之外但合理"的决定：给 B2B 工具配一个编辑感的衬线标题，给金融产品一个暖色纸张背景。可预测 = 无聊。
3. 混搭用 80/20：一个主风格定骨架（网格、字体、色板），另一个风格只贡献 1–2 个细节。两个风格五五开，结果通常是一团糟。

3. 五大基本功速查

每一项的完整规则、数值表和代码片段在对应的 reference 文件里。做页面前至少读 references/typography.md；涉及对应主题时再读其余文件。

字体（→ references/typography.md）

• 字体是页面 80% 的"声音"。展示字体要有性格，正文字体要好读。拒绝把 Inter / Roboto / Arial / 系统字体当成唯一选择——它们适合做 UI 正文，不适合当主角。
• 字号对比要大：展示标题 ≥ 正文的 3 倍。平庸的页面几乎都是层级之间只差 4–8px。
• 字重对比要跳跃：300 配 700、400 配 900，而不是 400 配 500。
• 大字收紧、小字放开：48px 以上 letter-spacing:-0.02em ~ -0.04em，line-height:0.95–1.15；全大写小标签 +0.08em ~ +0.2em。中文标题不要用负字距。
• 中文正文：16–18px，line-height:1.75–1.9，行长 30–40 字；中文不用斜体（用字重、颜色或 text-emphasis 着重号）；西文字体写在前面、中文字体写在后面组成字体栈。
• 标题 text-wrap:balance，段落 text-wrap:pretty；数字用 font-variant-numeric:tabular-nums。

色彩（→ references/color.md）

• 60-30-10：60% 底色、30% 辅助色/中性色、10% 强调色。强调色是稀缺资源——只给 CTA、关键数据和一两处签名细节。
• 中性色要"染色"：暖调页面用带黄/红的灰（stone），冷调用带蓝的灰（slate）。纯 #888 灰和 #000 纯黑会显得廉价和刺眼；文字用近黑如 #1c1917。
• 暗色模式不是反色：底色 #0a0a0b–#131315，层级越高表面越亮；降低饱和度；正文用 #ededed 而非 #fff；边框用 rgba(255,255,255,.08)。
• 渐变用 in oklch 插值避免中间发灰；大面积渐变加一层颗粒噪点防止色带。
• 对比度：正文 ≥ 4.5:1，大字 ≥ 3:1。浅灰色小字是最常见的可读性事故。

布局（→ references/layout.md）

• 间距用 4/8 基准，分组靠间距：组内间距 < 组间间距（接近律）。大块分区之间要"奢侈"：padding-block:clamp(64px, 10vw, 160px)。
• 一切都要对齐于某物。建立 12 栏网格，然后有意识地打破一次：一个元素跨出网格、一行超大字出血到屏幕边缘。
• 默认左对齐，居中只留给短句、对称风格（Deco、奢品）和单一焦点的时刻。全页居中是 AI 模板感的头号来源。
• 一个屏幕只有一个主角。如果所有东西都在喊，就没有东西被听见。
• 布局模式速选：分栏 Hero、编辑式非对称、Bento 网格、粘性侧栏、Z 字交错、全出血色带、横向滚动、App 外壳……详见 reference。
• 移动优先：375px 下不能有横向滚动；触控目标 ≥ 44px；用 clamp() 和 auto-fit minmax() 减少断点。

细节与质感（→ references/details.md）

• 阴影要分层、要染色：两三层低不透明度阴影叠加，颜色取背景色相，而不是一层 rgba(0,0,0,.3)。
• 嵌套圆角：内圆角 = 外圆角 − 内边距。
• 1px 发丝线用半透明色，在任何底色上都和谐。
• 纹理：纸张颗粒、噪点、扫描线、网点——一点点就能让数字页面"有体温"。
• 图标：内联 SVG、统一 1.5–2px 描边、currentColor。专业界面不要用 emoji 当图标。
• 没有图片时，用 CSS / SVG 构造有意图的视觉（地图、产品剪影、几何构成、数据图形），绝不留灰色方块写"Image"。案例里所有视觉都是这样做的。
• 所有可交互元素都要有 :hover、:focus-visible、:active 状态；自定义 ::selection 颜色；accent-color 统一表单控件颜色。

动效（→ references/motion.md）

• 动效要有目的：引导注意、表达因果、提供反馈。没有目的的动效就是噪音。
• 时长：微交互 120–200ms，UI 过渡 200–350ms，入场 500–900ms。
• 缓动：入场用 cubic-bezier(.16,1,.3,1)（expo-out），弹性用 cubic-bezier(.34,1.56,.64,1)；不要用 linear 做 UI 动画。
• 页面加载做一次编排好的错峰入场（stagger 60–100ms），比到处零散的小动画更有冲击力。
• 只动画 transform 和 opacity；必须尊重 prefers-reduced-motion。

4. "AI 味"反模式清单

写完后用这张表扫一遍。命中三条以上，页面大概率"一眼 AI"。

5. 风格案例库

examples/ 下 17 个单文件 HTML，内容、风格、技巧各不相同。每个文件顶部都有 DESIGN DNA 注释（气质、字体、色板、布局、签名细节、关键技巧），紧随其后是 :root tokens。examples/index.html 是一个可浏览的总览画廊。

怎么用：开始一个页面前，从第 2 节选出最接近的 1–2 个案例，先读它的 DESIGN DNA 注释和 :root，再按需阅读具体实现。借用的是系统与手法（字体配对、色彩比例、网格、签名细节的实现方式），不要照抄内容和结构。风格细节手册见 references/styles.md。

6. 交付前自检清单

方向
- [ ] 能用 3 个形容词说出这个页面的气质，并且页面确实传达了它们
- [ ] 至少有一个签名细节；删掉品牌名后仍能认出它不是模板
- [ ] 第 4 节反模式命中不超过一条

系统
- [ ] 颜色、字号、间距、圆角、缓动全部来自 tokens，没有散落的魔法数字
- [ ] 字号层级 ≤ 5–6 级，且相邻层级对比明显
- [ ] 强调色使用克制（约 10%）

排版与可读性
- [ ] 正文行长合适（西文 60–75 字符 / 中文 30–40 字），行高充足
- [ ] 对比度达标，没有浅灰小字
- [ ] 标题没有孤字、没有难看的断行（text-wrap:balance）

布局与响应式
- [ ] 375px 宽度下无横向滚动、无溢出、触控目标 ≥ 44px
- [ ] 1440px+ 宽屏下内容不会被无限拉伸（有 max-width）
- [ ] 眯眼测试：焦点清晰，阅读路径明确

交互与细节
- [ ] 所有可交互元素有 hover / focus-visible / active 状态
- [ ] 有入场编排；prefers-reduced-motion 下动效关闭或减弱
- [ ] 语义化 HTML（header/nav/main/section/footer、按钮用 <button>）、lang 属性、图片与 SVG 有替代文本
- [ ] 文案真实具体，使用用户的语言；没有 lorem ipsum 和空洞口号

7. 实现须知

• 技术栈：用户没指定时，优先产出单文件 HTML（内联 CSS/JS，字体用 Google Fonts），打开即可预览。用户用 React / Vue / Tailwind 时，原则完全一样：把 tokens 放进 CSS 变量或 tailwind.config 的 theme 里，不要使用框架默认色板和默认阴影；使用 shadcn/ui 等组件库时，改写它的 CSS 变量让它符合所选风格。
• 字体加载：<link rel="preconnect"> + display=swap；只加载用到的字重；每个字体栈都写好系统字体回退，保证字体加载失败时依然体面。面向中国大陆的站点，Google Fonts 可能无法访问——自托管字体或使用国内镜像/CDN，并确保回退栈（PingFang SC、Microsoft YaHei 等）好看。
• 中文页面：<html lang="zh-CN">；中英文之间加空格（或用 text-autospace 渐进增强）；中文字体文件很大，展示字体只用于标题，正文走思源/系统字体。
• 性能：动画只动 transform/opacity；backdrop-filter 和大面积 filter: blur() 很贵，控制面积与数量；固定背景噪点用 pointer-events:none。
• 图表：页面里有图表、KPI、仪表盘时，遵循这些规则：类别色按固定顺序分配（不随排名变化）；只用一个 y 轴；折线 2px、柱宽 ≤ 24px；两个以上系列必须有图例；悬停显示提示；提供"以表格查看"；文字不用数据色。案例 10 就是这样做的。

7.1 在 WorkBuddy 中使用

• 找文件：本 skill 的所有资料都在技能目录 ${CODEBUDDY_SKILL_DIR} 下。需要参考时，读取 ${CODEBUDDY_SKILL_DIR}/references/… 和 ${CODEBUDDY_SKILL_DIR}/examples/…；若变量未被替换，就在当前技能所在目录下按相对路径查找。
• 交付形式：WorkBuddy 的用户多数不是开发者。默认产出一个可直接双击打开的 .html 文件，保存到用户的工作目录，文件名用英文或拼音（如 landing-page.html），并告诉用户"双击用浏览器打开即可"。不要要求用户安装 Node、运行构建命令。
• 沟通方式：完成后用两三句话说明：选了什么风格、为什么这样选、签名细节是什么。用户不满意时，优先问"想要更安静还是更大胆、更温暖还是更冷静"，而不是抛出一堆技术选项。
• 能预览就预览：环境里有浏览器或截图能力时，打开页面检查桌面与手机宽度再交付。

8. 参考文件索引