极简现代网站

极简现代 UI：让简约站点感觉“已完成”

适用于个人网站、作品集、落地页和博客：小巧、内容优先的站点，克制与细节本身即为设计。不适用于网页应用、产品界面、仪表盘或工具；它们的问题（应用状态、数据密度、复杂表单）需要不同的指导原则。

这里的一切都是纯 HTML、CSS 和少量原生 JS，因此适用于任何技术栈或不使用技术栈。如果项目已经有构建或模板设置，请使用它；原则不变。

这是一个指南针，而非模板：每条规则都提供了“为什么”以及一个可根据主题和用户品味进行调整的“起点”。标记为**“坚定”**的项是少数不应跳过的事项。

支持文件（按需查阅）：

• references/snippets.md：可直接复用的构建块（令牌、基础、正文、文章列表、表单、动效）。
• references/interface-checklist.md：详细的交互、表单、内容和性能检查清单，改编自 Vercel 的 Web 界面指南。
• references/ship-checklist.md：SEO、社交预览、RSS、分析、托管。
• references/lessons.md：来自真实项目的陷阱和浏览器验证技巧。
• references/templates.md：来自 10 个 Carrd 落地页模板的测量数据（按 Carrd 模板编号引用，例如 #304）。用于校准眼光的参考数据，而非规则。

1. 工作流程

1. 理解任务。 谁的网站？为谁？访客应做或了解的一件事是什么？需要哪些页面？“完成”意味着什么？当答案改变构建时询问：最终域名，是否跟踪访客，谁拥有文案，以及是否有现有内容（文章、项目）需要导入。
2. 设定方向（§2）并记录下来：在项目说明（CLAUDE.md、AGENTS.md 或 README）中写下色彩令牌、字体配对、间距和圆角比例以及动效个性，使后续会话保持一致。
3. 在第一个页面之前设置共享部分（§3）：令牌、基础样式、布局原语、组件以及头部、页脚和 <head> 的一个来源。每个页面，包括第一个，都基于这些构建。
4. 先放真实文案。 占位符文本会隐藏布局问题。遵循页面配方（§4）。
5. 构建静态、响应式且可访问的页面，然后添加动效，最后润色。
6. 发布（§11），在浏览器中验证（§12），然后进行克制性检查（§13）。
7. 以小而可见的步骤迭代。 一次更改一个，查看它，询问品味判断而非猜测，清晰说明哪些已验证哪些未验证，并且仅在要求时才提交或发布。

2. 选择方向

极简是默认状态：内容优先，一个强调色，充裕的空间，细线而非边框，轻微的动效。每个元素都应承载意义；不承载意义的装饰将被移除。

系列	外观	通常适合
安静明亮	近乎白色、中性无衬线字体、极细分割线、一个清晰的强调色	个人网站、博客、写作
安静暗色	近乎黑色、浅色大号字体、一个强调色、用于元数据的等宽字体	工程和个人网站、发布
编辑风格	显示或正文使用衬线字体、宽阔栏宽、轮廓按钮	长文写作、书籍、文化；可能对科技受众显得过时，因此先展示实际效果
柔和辉光	安静基础加上一个微妙的渐变或径向辉光，可选毛玻璃表面	需要一些温暖感的着陆页
一个醒目色块	安静基础加上一个全幅色块或框住的照片	作品集、活动、个人品牌

• 基调胜于新颖。 严肃的主题需要冷静和可信；俏皮的字体和夸张的效果在那里通常被拒绝。
• 匹配受众的惯例。 科技受众通常期望在近乎白色或近乎黑色背景上使用中性无衬线字体搭配一个清晰的强调色；其他受众有自己的惯例。当提出多个方向时，让它们在布局和表面（列表页、固定分割、卡片网格、单一色块）上有所不同，而不仅仅是字体和纸张颜色，以便用户在真正的替代方案之间选择。
• 当品味未知时，尝试实际效果。 在实际页面中更换字体、强调色或间距，让用户做出反应。预期会有几轮调整。
• 用户的品味高于本指南。 一旦他们接受或拒绝某个方向，将其写入项目说明，并优先于本指南的任何默认值。

3. 共享样式和组件

第二个页面看起来应该与第一个页面相同，因为它基于相同的部分构建，而不是因为样式被复制过来。

• 令牌的单一来源。 颜色、字体比例、间距、圆角、阴影和动效时序存储在一个文件中的自定义属性中。页面和组件使用令牌，从不使用原始值：页面样式中出现的十六进制代码或一次性像素值是需要修复的 bug。
• 样式化组件，而非页面。 .btn、.card、.field、.prose、.post-list、.site-header，而不是 .about .blue-box。变体是修饰符（.btn--outline），而非编辑过的副本。页面样式仅用于排列组件，且保持简短。
• 对 CSS 进行分层：令牌 → 基础 → 布局原语 → 组件 → 页面排列，使用 @layer 声明，这样页面规则不会悄无声息地覆盖组件（参见代码片段）。
• 一次性编写共享页面框架。 头部、导航、页脚、<head> 和网站脚本来自一个来源：项目的包含文件、局部文件或模板，或一个小型构建脚本。手工复制的头部会漂移；如果在一个两页的网站上无法避免复制，请说明并在每次更改后重新检查每个副本。使用 aria-current="page" 在导航中标记当前页面。
• 通过标记实现行为。 一个网站脚本通过 data 属性和类处理展开和显示，因此新页面无需每页的 JS 即可获得这些功能。
• 维护一个清单。 在项目说明中列出组件（名称、用途、变体）。在新页面上，首先复用；任何新内容都应放入共享文件和清单中，而不是放入页面。一个显示每个组件在各状态和主题下的 styleguide.html 是在更改后快速检查的好方法。
• 今天只有一个页面？ 无论如何将令牌和组件与页面样式分开；下一个页面就会变成组装工作。

4. 页面配方

着陆页

• 英雄区域：一个标题、一句话的介绍、主要行动（或注册表单本身）位于第一个视口内。
• 然后根据访客提问的顺序回答：它是什么、如何工作（编号步骤加一张小图）、证明（简短引用、标志、真实的数字）、常见问题、页脚。
• 不要重复推销：如果英雄区域包含表单，那么一个重申它的关闭块毫无意义。

个人网站 / 作品集

• 姓名和个人简介（一行），然后是简短部分：工作或项目、写作、关于、联系方式。
• 项目和文章，使用带有细线的列表而非卡片网格；一张带框的照片就足以构成图像。
• 联系方式是一个简单的链接（电子邮件、个人资料），而非表单，除非用户要求。

博客索引

• 一个列表，而非卡片：标题、日期（<time datetime>），可选一行摘要。文章多时按年份分组。整行都是链接，没有死区。
• 无默认缩略图。分页或一个长页面均可；在说明中说明选择。

博客文章

• 阅读栏宽度约 60–72 个字符，正文 17–19px，行高 1.6–1.75（§5）。
• 顶部放置标题、日期和可选阅读时间；带锚点和 scroll-margin-top 的标题；仅长文章使用目录。
• 带标题的图片可宽于文本；代码块在自身内部滚动，绝不滚动页面。
• 以下一步结束：上一篇/下一篇或更多文章的简短列表，以及 RSS 链接。

跨类型共享

• 头部：一个导航或什么都没有。 一个孤独的按钮与品牌相对会显得未完成。
• 页脚位于底部，即使是短页面（全高 flex 列），底部无多余边距。
• 设计每个状态：空状态（还没有文章）、非常长的标题、缺失图片、站点样式的 404 页面。

5. 排版

• 一个或两个字体家族：一个中性正文字体（系统字体栈即可）加上最多一个显示字体。用于日期、代码和元数据的等宽字体是第三个字体，只有在其值得时使用。
• 标题 看起来现代、大号、轻盈且字距紧凑：英雄区域标题约 40–72px，字重 300–500，字母间距 −0.02 到 −0.05em（适用于新无衬线字体），行高 1.1–1.25，使用 clamp() 调整大小。
• 短页面上的章节标题（个人网站、博客索引）：约为正文的 1.25 倍（约 20px），半粗体，使用文本颜色。淡色大写标签太弱；显示尺寸会与英雄区域竞争。
• 阅读文本。 17–19px，行高 1.6–1.75，60–72ch 宽度，段落间距约 1em。次要文本使用调暗的颜色，而非更小的尺寸。
• 整洁的线条：标题使用 text-wrap: balance，段落使用 text-wrap: pretty 以避免孤立的单词。
• 排版细节：弯引号（“ ”）、省略号字符（…）、数字和单位之间的不间断空格（10 MB）、列表中的日期和数字使用 tabular-nums。将品牌和产品名称标记为 translate="no"，以便浏览器翻译忽略它们。
• 文字标志：足够大以在与章节标题相邻时保持自身位置（通常为 1.2–1.6 倍）；一个单词内部的字重对比（细体 + 超粗体）可廉价增加特色。
• 两端对齐文本 仅在设置 lang 和 hyphens: auto 时使用，且绝不在狭窄列中使用。

6. 颜色和表面

• 在 :root 上的令牌：背景、表面、文本、调暗色、细线颜色、一个强调色（可选第二个渐变停止点）和强调色上的文本颜色。
• 对比度（坚定）。 正文文本与实际表面的对比度至少为 4.5:1（WCAG 2），并在透明或渐变表面的最亮处进行检查。轻型显示字体需要更多对比度。APCA 是针对细字体的有用辅助意见，但并非替代品。始终设置链接颜色；浏览器默认的蓝色在几乎所有设计上看起来都不对。
• 强调色用于少量小标记：标题中的一个词、链接、悬停和焦点状态、当前导航项。不是大块颜色，也非列表编号。
• 表面：默认平坦且带细线。使用阴影时，有两层（柔和的环境光加上一个更紧密的直接光）；边框可以是半透明的，以便在任何背景上边缘保持清晰。内部圆角决不大于其容器。在彩色背景上，将边框和阴影向其色调调整。
• 悬停和焦点提高对比度 相对于静止状态。
• 浅色、深色或两者兼有。 尽早决定。一个固定的配色方案很好：设置 color-scheme 和 theme-color 以匹配。如果需要两者，在 prefers-color-scheme: dark 下重新定义相同的令牌（如果有切换开关，则加上 [data-theme] 覆盖），并在每种模式下检查对比度、阴影、图像和代码块。
• 背景：纯色，或一个温和的渐变或辉光；图案仅在 ≤10% 对比度下。绝不要同时使用两个显眼的东西。

7. 动效

动效应帮助人们看到什么发生了变化或看向何处。在这些网站上，少通常更好。

• 默认：加载时主要内容短暂淡入（上移几个像素）和悬停/焦点反馈。仅有这些的页面就是一个完整、平静的结果。
• 滚动显示是可选的 且保持微妙：透明度加上 6–20px 的移动，ease，0.3–1s，在约 25% 可见时播放一次。按距离级联（标题移动最少，按钮最多）；间隔 100–150ms，上限 6–8 项。绝不在长文阅读内容上使用。
• 首先使用 CSS，然后使用 Web 动画 API，最后，仅当真正需要时才使用 JS 库。
• 仅动画化 opacity 和 transform，明确列出过渡属性（绝不要 transition: all），并设置动效物理起始位置的 transform-origin。对于 SVG，使用 transform-box: fill-box 动画化 <g>。
• 可中断：使用过渡，而非固定时间线，这样悬停离开或第二次点击会平滑反向。
• 悬停/焦点：按钮缩放约 1.02–1.06 或抬升；导航和文本链接获得一个从左滑入的 2px 下划线，同样适用于 :focus-visible。
• 环境动效：最多一个缓慢循环，或没有。循环媒体是静音的 <video>，而非 GIF，并且动作超过 5 秒的需要一个暂停控件。
• 玻璃闪烁（Chrome）：不要淡入/淡出 backdrop-filter 元素的子元素或动画化其模糊（参见经验教训）。

8. 交互模式

• 链接就是链接。 导航使用 <a>，以便新标签页、复制链接和中间单击正常工作。没有死区：如果一行看起来是可点击的，那么整行都是。
• 表单（注册、联系）：每个字段都有标签；正确的 type、name、autocomplete 和 inputmode；电子邮件关闭拼写检查；首选原生验证。不要阻止粘贴或按键，也不要在用户尝试之前禁用提交按钮。错误显示在字段旁边，说明如何修复问题，并且提交时焦点移动到第一个错误。更多内容请参见界面清单。
• 提交：按钮保留其标签并显示旋转指示器，仅在约 200ms 后显示，然后至少持续约 400ms，以便快速响应不会闪烁（参见代码片段）。成功时，用清晰的下一步替换表单。
• 展开项（常见问题、“显示更多”）：一个 <button aria-expanded aria-controls>，使用网格行技巧进行动画化，仅在 JS 运行时显示关闭状态。
• 内联帮助优于工具提示。 首先在文本中解释。如果需要工具提示，绝不要依赖 title；在悬停和焦点上使用自定义工具提示，在显示第一个工具提示前有一个短暂延迟，而在相邻元素之间移动时没有延迟。
• 文案：用访客的语言说明页面提供什么；按钮准确说明其功能（“获取新闻通讯”，而非“提交”）；错误消息说明如何恢复。

9. 质量基线（坚定）

• 减少动效：使用 prefers-reduced-motion: reduce，显示立即完成，循环和流畅滚动关闭。
• 无 JS 安全：隐藏直到显示的转态位于 .js 类之后，因此如果 JS 失败，不会有内容保持不可见。
• 键盘和焦点：一个“跳过导航”链接、逻辑的标题级别……