626 字
2 分钟
克制的艺术：Claude 设计语言网页拆解
页面概览
这份网页以 “The Art of Restraint” 为主题，完整呈现了一个围绕 Claude 设计哲学构建的落地页面。它不是常见的科技霓虹风，而是通过纸张感配色、衬线标题、低噪音交互来塑造稳定、可信、可长时间阅读的体验。
我从这个页面看到的 6 个关键设计点
1) 纸张隐喻的配色系统
页面在 :root 中定义了完整 Design Tokens，核心色值包括：
--bg-paper: #FAF9F6（羊皮纸白）--text-primary: #1C1C16（深炭黑）--accent-primary: #D97757（陶土橘）
暗色模式不是简单反色，而是切换到暖暗色系（#191918 / #242423），保持“温润”而非“发冷”的观感。
2) 排版上用 Serif 建立权威感
标题使用 --font-serif（如 Tiempos / Source Serif），正文使用 Sans，形成清晰层级。h1/h2/h3 的字重、行高、字距都经过约束，整体阅读节奏偏“出版物”而不是“后台面板”。
3) 组件有明确的“容器语义”
- 顶部导航：固定 + 毛玻璃（
backdrop-filter: blur(12px)） - 元信息区：作者头像、阅读时长、日期
- Artifact 代码容器：带头部元信息 + 代码正文
- 表格、标签、颜色样卡：统一边框和阴影策略
这让内容块之间具备明确边界，信息扫描成本更低。
4) 动态交互强调“思考过程”
页面使用了最少但有效的动效：
- 主题切换（浅色/暗色）
- 光标闪烁动画（
@keyframes blink）模拟正在思考/撰写 - 全局颜色与边框过渡（0.2s~0.3s）
交互节制，没有过度动效干扰内容本身。
5) 细节层面的可读性优化
- 全局
::selection定制为品牌色，提高一致性 - 链接下划线采用细线与偏移，兼顾识别与克制
line-height: 1.75+ 17px 基础字号，适配长文阅读
6) 技术实现上结构清晰，便于扩展
HTML 结构语义化（nav/header/article），CSS 以变量驱动，JS 仅负责主题切换逻辑，整体可维护性较好。
与官方文档规范对齐说明
本文采用 文件夹方案（posts/my-first-post/index.md），并在 Frontmatter 中保留了官方文档建议的常用字段（如 title、description、published、image、permalink 等）。
参考：
网页完整源代码（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-theme/ 部分信息可能已经过时
相关文章 智能推荐
1
数据结构：栈和队列的互相转化
Algorithm 用两个栈实现队列，用一个队列实现栈：重点不是背代码，而是理解顺序如何被翻转、保存和维护。
2
数据结构：最小栈
Algorithm 最小栈的核心不是多会一个 API，而是给栈的每一层保存一份最小值快照，让所有操作都在 O(1) 时间内完成。
3
数据结构：队列、栈和循环队列
Algorithm 整理队列和栈的常见实现方式，以及数组循环队列中 l、r、size 的维护细节。
4
链表：合并两个有序链表
Algorithm 整理链表中合并两个有序链表的指针连接过程、边界处理和代码模板。
5
链表：两数相加
Algorithm 整理链表中两数相加的逐位模拟过程、进位处理和代码模板。