1040 字
3 分钟
克制的艺术：从一张 Claude 风格页面看设计取舍
页面概览
这是一张以 The Art of Restraint 为题的 Claude 风格页面。我喜欢它的地方，不是它多么“像 AI”，恰恰是它刻意避开了那套已经有些泛滥的视觉套路：黑底、蓝紫渐变、玻璃面板和无处不在的动效。
页面把重点放回了阅读本身。暖白背景、偏书刊感的标题字体，以及不抢戏的交互，组合起来有一种安静但不寡淡的气质。下面不是要给它贴一套宏大的“设计哲学”，只是把几个真正影响观感的取舍拆开聊聊。
文中分析的是这份
claude.html示例的实现与风格，不代表 Anthropic 或 Claude 的官方设计规范。
值得借鉴的 6 个取舍
1) 不用纯白，先把底色定下来
#FAF9F6、#1C1C16 和 #D97757 是这张页面最重要的三种颜色：偏纸张的背景、近似油墨的正文，以及一点陶土橘作为强调色。
这组配色并不新奇，但很适合长内容。背景比纯白收一点，文字也不是死黑；两者的对比仍然足够，页面却少了些屏幕直冲眼睛的感觉。暗色模式同样没有直接翻成黑白，而是用了 #191918、#242423 这样的暖灰，和浅色主题是一套气质。
2) 衬线体只放在该出现的地方
标题使用 Tiempos、Source Serif 一类衬线字体，正文仍交给无衬线字体。这样的搭配没有把页面做成“复古杂志”，但让标题比常见 SaaS 页面多了一点停顿感。
更关键的是分寸：衬线体负责层级和情绪，正文负责效率。再配上略紧的字距和较宽的行高，阅读节奏更接近一篇文章，而不是一组控制台面板。
3) 容器不是装饰，而是在帮内容分组
- 固定导航用半透明背景和
backdrop-filter: blur(12px)，滚动时仍能保持边界； - 作者信息、标签和日期集中在文章开头，读者能很快判断内容属性；
- Artifact 代码块有独立标题栏，代码不再混在正文里；
- 表格、色卡和标签沿用相近的边框、圆角与阴影。
这些组件都很轻，但边界清楚。读者扫页面时，不需要逐段分辨“这是什么内容”。
4) 动效只回应操作，不争夺注意力
页面里的动效并不多：主题切换、颜色和边框的短过渡，以及一个闪烁的光标。它们给页面一点反馈，却没有拿动画当主角。
这一点尤其值得抄作业。内容型页面最怕每个模块都在动；0.2～0.3 秒的过渡已经足够让状态变化显得自然，剩下的空间留给文字。
5) 小细节服务于阅读
17px 基础字号和 1.75 的行高是很朴素、也很有效的长文配置。链接只用细下划线和一点偏移来提示，选中文字时再出现品牌色，既不会让页面一直显得很“用力”，又保留了必要的识别度。
这里没有哪一个细节会让人惊呼，但它们叠在一起，决定了读者愿不愿意继续往下看。
6) 实现也保持克制
HTML 只使用了 nav、header、article 等常规语义标签；颜色、间距和字体集中为 CSS 变量；JavaScript 只处理主题切换。对于这样一张展示页，这已经够了。
它的价值不在于技术多复杂，而在于每一层都没有超出需求。想把它改成自己的页面时，换一套 token、补充内容组件，就能继续用下去。
网页完整源代码（claude.html）
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Art of Restraint - Claude Design Philosophy</title> <style> /* ========================================= 1. Claude Design System (Design Tokens) ========================================= */ :root { /* [Light Mode Palette] 核心色板：模拟高级纸张与印刷油墨 */ --bg-paper: #FAF9F6; /* 羊皮纸白 */ --bg-surface: #FFFFFF; /* 纯白 */ --bg-subtle: #F2F0E8; /* 极淡暖灰 */ --bg-code: #FBFBF9; /* 代码块背景 */
--text-primary: #1C1C16; /* 深炭黑 */ --text-secondary: #5F5E5A; /* 暖灰 */ --text-tertiary: #8E8C85; /* 浅灰 */
--accent-primary: #D97757; /* 陶土橘 */ --accent-hover: #C15F3C; --accent-faint: rgba(217, 119, 87, 0.08);
--border-light: rgba(0, 0, 0, 0.06); --border-medium: #E6E4DC;
/* 阴影 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.04); --nav-bg: rgba(250, 249, 246, 0.95);
/* 字体栈 */ --font-serif: "Tiempos Headline", "Source Serif Pro", "Georgia", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
/* 布局 */ --content-width: 740px; --radius-md: 8px; --radius-lg: 12px;
/* 选中色 (Selection) - Light Mode */ /* 修改为品牌陶土橘，实现视觉上的绝对统一 */ --selection-bg: #D97757; --selection-text: #FFFFFF; }
/* [Dark Mode Palette] 暖暗色模式：不是纯黑，而是深褐/深灰，保持温润感 */ body.dark-mode { --bg-paper: #191918; /* 深暖灰背景 */ --bg-surface: #242423; /* 稍微亮一点的表面 */ --bg-subtle: #2C2C2B; /* 交互元素背景 */ --bg-code: #222221; /* 代码背景 */
--text-primary: #ECEBE6; /* 暖白文字 */ --text-secondary: #A1A09A; /* 浅灰文字 */ --text-tertiary: #6E6D69;
--border-light: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12);
--accent-faint: rgba(217, 119, 87, 0.15); --nav-bg: rgba(25, 25, 24, 0.95); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
/* 选中色 (Selection) - Dark Mode */ /* 暗色模式下保持陶土色，但使用半透明以柔和融入深色背景 */ --selection-bg: rgba(217, 119, 87, 0.5); --selection-text: #FFFFFF; }
/* ========================================= 2. Typography & Reset & Selection ========================================= */ * { box-sizing: border-box; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
/* 全局选中样式重写 */ ::selection { background-color: var(--selection-bg); color: var(--selection-text); /* 兼容性处理 */ -webkit-text-fill-color: var(--selection-text); }
/* 针对 WebKit 浏览器的特定前缀 (Chrome, Safari) */ ::-moz-selection { background-color: var(--selection-bg); color: var(--selection-text); }
body { background-color: var(--bg-paper); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.75; font-size: 17px; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--text-primary); font-weight: 600; line-height: 1.3; margin-top: 2em; margin-bottom: 0.8em; letter-spacing: -0.015em; }
h1 { font-size: 2.8rem; margin-top: 0; margin-bottom: 0.5em; } h2 { font-size: 1.8rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.3em; } h3 { font-size: 1.4rem; margin-top: 1.5em; }
p { margin-bottom: 1.5em; color: var(--text-primary); opacity: 0.95; }
strong { color: var(--text-primary); font-weight: 600; }
a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-medium); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: all 0.2s; }
a:hover { color: var(--accent-primary); text-decoration-color: var(--accent-primary); }
/* ========================================= 3. Layout Structure ========================================= */ .page-wrapper { max-width: var(--content-width); margin: 0 auto; padding: 100px 24px 120px; }
/* 顶部导航 */ nav { position: fixed; top: 0; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); padding: 16px 0; z-index: 100; } .nav-content { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-family: var(--font-serif); font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); } .logo-icon { width: 24px; height: 24px; background: var(--accent-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-family: var(--font-serif); }
/* 主题切换按钮 */ .theme-toggle { background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .theme-toggle:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--text-tertiary); }
/* ========================================= 4. Article Components ========================================= */
/* 元数据 */ .article-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; font-size: 0.95rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); padding-bottom: 32px; } .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); color: var(--text-secondary); font-size: 1.2rem; border: 1px solid var(--border-light); } .meta-info { display: flex; flex-direction: column; gap: 2px; } .author-name { font-weight: 600; color: var(--text-primary); }
/* 引用块 */ blockquote { border-left: 3px solid var(--accent-primary); margin: 2.5em 0; padding: 12px 0 12px 24px; font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--text-secondary); background: linear-gradient(to right, var(--accent-faint), transparent); border-radius: 0 8px 8px 0; }
/* 图片与图注 */ figure { margin: 2.5em 0; } figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-light); display: block; box-shadow: var(--shadow-md); } figcaption { margin-top: 12px; text-align: center; font-size: 0.9rem; color: var(--text-secondary); font-family: var(--font-sans); }
/* Artifact 代码块 */ .artifact { border: 1px solid var(--border-medium); border-radius: var(--radius-lg); background: var(--bg-surface); margin: 2em 0; overflow: hidden; box-shadow: var(--shadow-sm); } .artifact-header { background: var(--bg-subtle); padding: 10px 16px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; } .artifact-body { padding: 24px; overflow-x: auto; background: var(--bg-code); } pre { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-primary); }
/* 极简表格 */ .table-wrapper { width: 100%; overflow-x: auto; margin: 2em 0; border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--bg-surface); } th { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--border-medium); background-color: var(--bg-subtle); font-weight: 600; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } td { padding: 16px 20px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); } tr:last-child td { border-bottom: none; }
/* 特性列表 */ .feature-list { list-style: none; padding: 0; margin: 2em 0; } .feature-item { display: flex; gap: 16px; margin-bottom: 24px; } .feature-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--accent-primary); margin-top: 4px; }
/* 标签 */ .tag { display: inline-block; padding: 6px 12px; background-color: var(--bg-subtle); color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; border-radius: 99px; margin-right: 8px; border: 1px solid var(--border-medium); transition: all 0.2s; } .tag:hover { border-color: var(--accent-primary); color: var(--text-primary); }
/* 颜色样本卡片 */ .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 2em 0; } .color-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px; text-align: center; } .swatch { height: 80px; border-radius: 4px; margin-bottom: 8px; border: 1px solid rgba(0,0,0,0.05); } .color-meta { font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-mono); }
/* 模拟光标动画 */ .cursor-blink::after { content: " "; display: inline-block; width: 0.5em; height: 1.1em; background-color: var(--text-primary); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
</style></head><body>
<!-- 导航栏 --> <nav> <div class="nav-content"> <a href="#" class="nav-logo"> <div class="logo-icon">C</div> Anthropic Research </a>
<div style="display: flex; align-items: center; gap: 16px;"> <span style="font-size: 0.9rem; color: var(--text-secondary); display: none; @media(min-width: 600px){display:block;}">Blog</span>
<!-- 主题切换按钮 --> <button class="theme-toggle" id="themeBtn" aria-label="Toggle Dark Mode"> <!-- Sun Icon --> <svg class="sun-icon" style="display: block;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> <!-- Moon Icon (Hidden by default logic handled in script) --> </button> </div> </div> </nav>
<div class="page-wrapper">
<!-- 文章头部 --> <header> <div class="tags" style="margin-bottom: 24px;"> <span class="tag">Design System</span> <span class="tag">UI/UX</span> <span class="tag">Typography</span> </div>
<h1>克制的艺术：解构 Claude 的设计语言</h1> <p style="font-size: 1.4rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 32px;"> 为什么在追求“赛博朋克”与“极简黑白”的 AI 浪潮中，我们选择回归纸张、油墨与衬线体？ </p>
<div class="article-meta"> <div class="avatar">D</div> <div class="meta-info"> <span class="author-name">Design Team</span> <span>Feb 14, 2026 · 12 min read</span> </div> </div> </header>
<!-- 正文内容 --> <article> <p> 当用户打开一个 AI 工具时，他们通常期待看到的是未来的样子：深邃的黑色背景、霓虹蓝的渐变、无处不在的磨砂玻璃效果。然而，Claude 走了一条截然不同的路。我们称之为<strong>“数字人文主义”</strong>。 </p> <p> 我们的设计哲学建立在三个核心支柱之上：<strong>Warmth (温润)</strong>, <strong>Academia (学术)</strong>, 以及 <strong>Reliability (可靠)</strong>。请点击右上角的按钮，体验我们在不同光照条件下的设计一致性。 </p>
<!-- 章节 1：色彩 --> <h2>1. 纸张的隐喻 (The Paper Metaphor)</h2> <p> 屏幕并非白纸，但在 Claude 中，我们试图弥合这种感官差异。在色彩选择上，我们拒绝了纯白（#FFFFFF）。由于显示器背光的原因，纯白在长时间阅读时会刺痛双眼。 </p> <p> 我们选择了 <code>#FAF9F6</code>。这是一种极其微妙的“羊皮纸白”。配合深炭灰（Charcoal, <code>#1C1C16</code>）文字，营造了“实体书”的错觉。而在暗色模式下，我们并非简单反转颜色，而是使用了<strong>“Warm Dark”</strong>——一种深褐灰色，避免了纯黑像素带来的OLED涂抹感。 </p>
<div class="color-grid"> <div class="color-card"> <div class="swatch" style="background:#FAF9F6"></div> <div class="color-meta">Paper<br>#FAF9F6</div> </div> <div class="color-card"> <div class="swatch" style="background:#D97757"></div> <div class="color-meta">Terracotta<br>#D97757</div> </div> <div class="color-card"> <div class="swatch" style="background:#1C1C16"></div> <div class="color-meta">Ink<br>#1C1C16</div> </div> <div class="color-card"> <div class="swatch" style="background:#F2F0E8"></div> <div class="color-meta">Subtle<br>#F2F0E8</div> </div> </div>
<!-- 章节 2：排版 --> <h2>2. 衬线体的回归 (Serif for Authority)</h2> <p> 在 SaaS 产品全面拥抱无衬线体（Sans-serif）的今天，Claude 大胆地在标题和品牌标识中使用了衬线体（Serif）。 </p> <blockquote> "Typography is the voice of the text. Serifs whisper history, authority, and elegance." </blockquote> <p> 这种字体选择（如 <em>Tiempos</em> 或 <em>Source Serif</em>）潜意识地向用户传递一种信号：<strong>这里的信息是经过深思熟虑的、严谨的。</strong> </p>
<!-- 章节 3：工件与代码 --> <h2>3. 信息容器 (The Artifact)</h2> <p> Claude 的另一个标志性设计是“Artifact”（工件）。代码、文档或 SVG 图像不会仅仅作为文本流的一部分出现，而是被封装在一个具有窗体感的容器中。这赋予了生成内容一种<strong>“交付物”</strong>的实体感。 </p>
<!-- 复用 Claude 风格的代码块 --> <div class="artifact"> <div class="artifact-header"> <span>theme_config.js</span> <span>JavaScript</span> </div> <div class="artifact-body"><pre><span style="color:var(--accent-primary)">const</span> claudeTheme = { colors: { paper: <span style="color:#4a6ee0">'#FAF9F6'</span>, <span style="color:var(--text-tertiary)">// Warm White</span> ink: <span style="color:#4a6ee0">'#1C1C16'</span>, <span style="color:var(--text-tertiary)">// Soft Black</span> terracotta: <span style="color:#4a6ee0">'#D97757'</span> }, darkMode: { background: <span style="color:#4a6ee0">'#191918'</span>, <span style="color:var(--text-tertiary)">// Warm Dark Grey</span> text: <span style="color:#4a6ee0">'#ECEBE6'</span> }};</pre> </div> </div>
<!-- 新增章节 4：图标 --> <h2>4. 符号学与图标 (Semiotics & Iconography)</h2> <p> Claude 的图标设计极其克制。我们不使用填充图标（Solid Icons），而是使用细线条的描边图标（Stroke Icons）。这种线条通常是 1.5px 或 2px 宽，末端圆润。 </p> <p> 这种“线框”风格减少了视觉噪音，让图标成为文字的辅助，而不是主角。即使是 Logo 中的“C”，也是一个极简的几何图形，包裹在标志性的陶土色方块中。 </p>
<!-- 新增章节 5：动态交互 --> <h2>5. 思考的动态 (Kinetics of Thought)</h2> <p> 与其使用旋转的加载圈（Spinner），Claude 在生成内容时使用了一个闪烁的黑色方块光标。这模仿了打字机或早期终端的光标，暗示着 AI 正在<strong>“实时撰写”</strong>，而不是简单地检索数据。 </p> <div style="background:var(--bg-subtle); padding:20px; border-radius:8px; font-family:var(--font-mono); margin-bottom:2em;"> Thinking Process: Analyzing design patterns...<span class="cursor-blink"></span> </div>
<p> 当 Artifact 出现时，它不是弹出来的，而是平滑地展开。这种微交互（Micro-interaction）的速度被调整得比常规 UI 稍慢（约 300ms-400ms），增加了操作的“分量感”。 </p>
<h2>6. 陶土色的隐喻</h2> <p> 我们的品牌色是一种温暖的<strong>陶土橘 (Terracotta)</strong>。它取自泥土与陶瓷，代表着人类文明的起源与工具的诞生。 </p> <p> 陶土色是人性化的，它温暖、踏实，提醒用户：虽然你在与 AI 交互，但这依然是为人类服务的工具。请注意，在暗色模式下，我们会降低这个颜色的饱和度，以防止在深色背景上产生光晕。 </p>
<div style="margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--border-medium); font-size: 0.9rem; color: var(--text-secondary); display:flex; justify-content:space-between;"> <span>Designed with restraint by Anthropic.</span> <span>© 2026 Claude Design System</span> </div> </article>
</div>
<!-- JavaScript 逻辑：处理主题切换 --> <script> const themeBtn = document.getElementById('themeBtn'); const body = document.body;
// 简单的 SVG 图标字符串 const sunIcon = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`;
const moonIcon = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`;
let isDark = false;
themeBtn.innerHTML = moonIcon; // 初始为月亮，点击变暗
themeBtn.addEventListener('click', () => { isDark = !isDark; if (isDark) { body.classList.add('dark-mode'); themeBtn.innerHTML = sunIcon; themeBtn.style.color = '#fff'; } else { body.classList.remove('dark-mode'); themeBtn.innerHTML = moonIcon; themeBtn.style.color = 'var(--text-secondary)'; } }); </script>
</body></html> 分享
如果这篇文章对你有帮助，欢迎分享给更多人！
克制的艺术：从一张 Claude 风格页面看设计取舍
https://dawn114514.site/posts/claude-design/ 部分信息可能已经过时
相关文章 智能推荐
1
数据信息的表示
计算机组成原理 系统介绍定点数与浮点数表示方法，深入解析IEEE 754标准、数据类型转换与海明校验设计及计算。
2
随机变量的数字特征
概率论 系统梳理随机变量的数学期望、方差、协方差、相关系数以及矩的定义与性质，提供常见分布特征速查、常考题型解析与易错陷阱总结。
3
数据结构：栈和队列的互相转化
Algorithm 用两个栈实现队列，用一个队列实现栈：重点不是背代码，而是理解顺序如何被翻转、保存和维护。
4
指令系统
计算机组成原理 整理计算机指令系统，详解指令格式、操作码与地址码设计、寻址方式与指令类型，对比CISC与RISC架构，并分析程序的机器级表示。
5
蒙特卡罗算法：用随机撒点估算圆周率
Algorithm 通过估算圆周率 π 的经典例子，理解蒙特卡罗算法的随机采样思想，以及它和拉斯维加斯算法的区别。