 设计规范的 Token 落地与实战指南)
复刻 Claude 温暖编辑风设计系统OpenDesign 中 Claude (Anthropic) 设计规范的 Token 落地与实战指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-designClaude (Anthropic) 是 OpenDesign 内置的 151 套设计系统包之一以「文学沙龙」为视觉母题——暖羊皮纸底色、赤陶色点缀、全暖调中性色与衬线标题共同构成一种「有品位的人工智能」气质。本文以 design-systems/claude/DESIGN.md 为骨架结合 tokens.css、components.html、components.manifest.json 等仓库源码完整还原该设计语言的色彩、排版、组件、布局、层级与响应式规范并给出可直接复制的 CSS Token 与 Agent Prompt 配方帮助你在原型、落地页、仪表盘等产物中稳定复刻这种「暖调、克制、编辑感」的视觉风格。1. 视觉主题与氛围把产品页当成一本文学杂志Claude 的界面是「重新想象成产品页的文学沙龙」——温暖、从容、带着安静的知识分子气质。整个体验建立在一层羊皮纸色调的画布#f5f4ed之上刻意唤起「优质纸张」而非「数字屏幕」的质感。当大多数 AI 产品页向冰冷、未来主义的美学倾斜时Claude 的设计散发着人的温度仿佛 AI 本身对室内设计有着良好品味。标志性的动作是定制的 Anthropic Serif 字体——一款中等字重、比例舒展的衬线体让每个标题都有书封标题般的分量。配合赤陶色#c96442、黑色与柔和绿色的有机手绘感插画整个视觉语言说的是「体贴的伙伴」而不是「强大的工具」。衬线标题以紧凑但舒适的 1.10–1.30 行高呼吸形成的节奏更像是在读一篇散文而不是浏览产品页。让 Claude 设计真正独树一帜的是其全暖调中性色每一个灰色都带有黄棕底色#5e5d59、#87867f、#4d4c48整个系统里没有任何冷蓝灰边框是奶油色调#f0eee6、#e8e6dc阴影使用暖调透明黑连最深的表面#141413、#30302e也带着几乎不可察觉的橄榄暖意。这种色相一致创造出一个「有人住过、值得信赖」的空间。核心特征速览暖羊皮纸画布#f5f4ed唤起高级纸张而非屏幕的质感定制 Anthropic 字体家族Serif 负责标题、Sans 负责界面、Mono 负责代码赤陶色品牌强调色#c96442——温暖、质朴、刻意「不科技」全暖调中性色——每个灰色都有黄棕底色零冷灰有机编辑式插画取代典型科技图标基于 ring 的阴影体系0px 0px 0px 1px在无可见边框的情况下制造边框般的深度杂志式节奏慷慨的区块间距 衬线驱动的层级2. 色彩体系与角色分工主色色名色值用途Anthropic Near Black#141413主要文字色与深色主题表面——并非纯黑而是带橄榄暖意的深色更护眼是各大科技品牌中最「暖」的黑Terracotta Brand#c96442核心品牌色——烧制橙棕用于主 CTA 按钮、品牌时刻与标志性强调刻意质朴、不科技Coral Accent#d97757品牌色的更浅更暖变体用于文字强调、深色表面的链接与次级强调次级与强调色色名色值用途Error Crimson#b53333深暖红用于错误状态——严肃但不吓人Focus Blue#3898ec标准输入焦点环蓝——全系统唯一的冷色纯粹为无障碍而存在表面与背景色色名色值用途Parchment#f5f4ed主页面背景——带黄绿调的暖奶油色像陈年纸张是整个设计的情感地基Ivory#faf9f5最浅表面——Parchment 背景上的卡片与抬升容器几乎不可辨但形成微妙分层Pure White#ffffff仅用于特定按钮表面与最大对比度元素Warm Sand#e8e6dc按钮背景与突出的交互表面——明显偏暖的浅灰Dark Surface#30302e深色主题容器、导航边框与抬升的深色元素——暖炭色Deep Dark#141413深色主题页面背景与主深色表面中性色与文字色色名色值用途Charcoal Warm#4d4c48浅暖表面上的按钮文字——深色配浅色的首选Olive Gray#5e5d59次级正文——明显温暖的深中灰Stone Gray#87867f三级文字、脚注与弱化元数据Dark Warm#3d3d3a深色文字链接与强调的次级文字Warm Silver#b0aea5深色表面上的文字——暖调羊皮纸色浅灰语义与强调色色名色值用途Border Cream#f0eee6标准浅色主题边框——几乎不可见的暖奶油色提供最轻柔的收纳感Border Warm#e8e6dc突出边框、区块分隔线与浅色表面的强调收纳Border Dark#30302e深色表面标准边框——保持暖调Ring Warm#d1cfc5按钮 hover/focus 状态的阴影环Ring Subtle#dedc01更浅交互表面的次级环Ring Deep#c2c0b6active/pressed 状态的更深环渐变系统Claude 的设计在传统意义上是无渐变的。深度与视觉丰富度来自暖调表面色、有机插画与浅/深区块交替的相互作用。暖调色板本身会在视线从奶油 → 沙色 → 石色 → 炭色 → 黑色区块移动时形成一种天然的「渐变」效果。3. 排版规则字体家族标题Anthropic Serif回退Georgia正文 / UIAnthropic Sans回退Arial代码Anthropic Mono回退Arial注以上均为定制字体。外部实现中可用 Georgia 替代衬线体用 system-ui/Inter 替代无衬线体。层级表角色字体字号字重行高字距说明Display / HeroAnthropic Serif64px (4rem)5001.10紧normal最大冲击力书封标题般的存在感Section HeadingAnthropic Serif52px (3.25rem)5001.20紧normal特性区块锚点Sub-heading LargeAnthropic Serif36–36.8px (~2.3rem)5001.30normal次级区块标记Sub-headingAnthropic Serif32px (2rem)5001.10紧normal卡片标题、特性名Sub-heading SmallAnthropic Serif25–25.6px (~1.6rem)5001.20normal更小区块标题Feature TitleAnthropic Serif20.8px (1.3rem)5001.20normal小特性标题Body SerifAnthropic Serif17px (1.06rem)4001.60松弛normal衬线正文编辑性段落Body LargeAnthropic Sans20px (1.25rem)4001.60松弛normal引言段落Body / NavAnthropic Sans17px (1.06rem)400–5001.00–1.60normal导航链接、UI 文本Body StandardAnthropic Sans16px (1rem)400–5001.25–1.60normal标准正文、按钮文字Body SmallAnthropic Sans15px (0.94rem)400–5001.00–1.60normal紧凑正文CaptionAnthropic Sans14px (0.88rem)4001.43normal元数据、描述LabelAnthropic Sans12px (0.75rem)400–5001.25–1.600.12px徽章、小标签OverlineAnthropic Sans10px (0.63rem)4001.600.5px大写 overline 标签MicroAnthropic Sans9.6px (0.6rem)4001.600.096px最小文字CodeAnthropic Mono15px (0.94rem)4001.60-0.32px行内代码、终端排版原则衬线给权威无衬线给功能Anthropic Serif 以 500 中字重承载全部标题让每个标题都有出版物标题的分量Anthropic Sans 以安静高效的方式处理全部功能性 UI 文本按钮、标签、导航。衬线只用一个字重所有 Anthropic Serif 标题统一使用 500——不加粗、不变细。这种单字重一致性在全部标题字号间创造了统一的「声音」仿佛同一个作者写了每个标题。正文行高放松大多数正文使用 1.60 行高显著比典型科技站点1.4–1.5更慷慨阅读体验更接近书而非仪表盘。标题紧而不压缩标题行高 1.10–1.30紧凑但从不压抑——衬线字形比无衬线更需要呼吸空间。小标签微字距12px 及以下的小号无衬线文字使用刻意字距0.12px–0.5px以保证极小字号下的可读性。4. 组件样式按钮Warm Sand次级背景Warm Sand#e8e6dc文字Charcoal Warm#4d4c48内边距0px 12px 0px 8px不对称——图标优先布局圆角舒适圆角8px阴影ring 式#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px主力按钮——温暖、低调、交互感明确White Surface背景Pure White#ffffff文字Anthropic Near Black#141413内边距8px 16px 8px 12px圆角慷慨圆角12pxHover切换为次级背景色浅色表面上的干净、抬升按钮Dark Charcoal背景Dark Surface#30302e文字Ivory#faf9f5内边距0px 12px 0px 8px圆角舒适圆角8px阴影ring 式#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px深色配浅色的反向强调变体Brand Terracotta背景Terracotta Brand#c96442文字Ivory#faf9f5圆角8–12px阴影ring 式#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px主 CTA——唯一带彩色色相的按钮Dark Primary背景Anthropic Near Black#141413文字Warm Silver#b0aea5内边距9.6px 16.8px圆角慷慨圆角12px边框细实线 Dark Surface1px solid #30302e用于深色主题表面卡片与容器背景浅色表面用 Ivory#faf9f5或 Pure White#ffffff深色表面用 Dark Surface#30302e边框浅色用细实线 Border Cream1px solid #f0eee6深色用1px solid #30302e圆角标准卡片舒适圆角8px精选卡片慷慨圆角16px英雄容器与嵌入媒体极圆角32px阴影耳语级rgba(0,0,0,0.05) 0px 4px 24px用于抬升内容Ring 阴影0px 0px 0px 1px模式用于交互卡片状态区块边框1px 0px 0px仅顶部用于列表项分隔输入与表单文字Anthropic Near Black#141413内边距1.6px 12px垂直方向极紧凑边框标准暖边框焦点带 Focus Blue#3898ec边框色的 ring——全系统唯一的冷色时刻圆角慷慨圆角12px导航暖背景吸顶导航LogoAnthropic Near Black 的 Claude 字标链接Near Black#141413、Olive Gray#5e5d59、Dark Warm#3d3d3a混用导航边框1px solid #30302e深色或1px solid #f0eee6浅色CTATerracotta Brand 按钮或 White Surface 按钮Hover文字切换到前景主色无下划线装饰图片处理展示 Claude 聊天界面的产品截图媒体慷慨圆角16–32px嵌入视频播放器带圆角深色 UI 截图与暖色浅画布形成对比概念区块使用有机手绘插画标志性组件模型对比卡片Opus 4.5、Sonnet 4.5、Haiku 4.5 以干净卡片网格呈现每个模型一张带边框卡片含名称、描述与能力徽章条目之间用 Border Warm#e8e6dc分隔有机插画赤陶色、黑色与柔和绿色的手绘感矢量插画抽象、概念化而非字面的产品示意图是主要的视觉个性——没有其他 AI 公司使用这种风格深/浅区块交替页面在 Parchment 浅色与 Near Black 深色区块间交替创造像书中章节一样的阅读节奏每个区块都像独立的环境5. 布局原则间距系统基础单位8px标尺3px、4px、6px、8px、10px、12px、16px、20px、24px、30px按钮内边距不对称0px 12px 0px 8px或均衡8px 16px卡片内边距约 24–32px区块垂直间距慷慨主要区块之间估计 80–120px网格与容器最大容器宽度约 1200px居中Hero居中编辑式布局特性区块单列或 2–3 列卡片网格模型对比干净的三列网格全宽深色区块突破容器以制造强调留白哲学编辑式节奏每个区块像杂志跨页一样呼吸——慷慨的上下边距制造自然的阅读停顿衬线驱动节奏衬线标题建立的文学韵律比无衬线设计需要更多留白内容岛屿法区块在浅色与深色环境间交替为每条信息创造独立的「房间」圆角标尺Sharp4px最小行内元素Subtly rounded6–7.5px小按钮、次级交互元素Comfortably rounded8–8.5px标准按钮、卡片、容器Generously rounded12px主按钮、输入框、导航元素Very rounded16px精选容器、视频播放器、标签列表Highly rounded24px标签状元素、高亮容器Maximum rounded32px英雄容器、嵌入媒体、大卡片6. 深度与层级层级处理方式用途FlatLevel 0无阴影、无边框Parchment 背景、行内文字ContainedLevel 11px solid #f0eee6浅或1px solid #30302e深标准卡片、区块RingLevel 2暖灰0px 0px 0px 1pxring 阴影交互卡片、按钮、hover 状态WhisperLevel 3rgba(0,0,0,0.05) 0px 4px 24px抬升特性卡片、产品截图InsetLevel 415% 透明度的inset 0px 0px 0px 1pxactive/pressed 按钮状态阴影哲学Claude 通过暖调 ring 阴影而非传统投影传达深度。标志性的0px 0px 0px 1px模式创造了一种比真实边框更柔和的边框式光晕——它是「假装成边框的阴影」或者说「技术上是阴影的边框」。即便出现投影也极柔和0.05 透明度、24px 模糊——几乎不可见的浮起暗示漂浮而非投射。装饰性深度深浅交替最具戏剧性的深度效果来自 Parchment#f5f4ed与 Near Black#141413区块的交替——整个区块通过改变环境光水平来切换层级。暖调 ring 光晕按钮与卡片交互使用匹配暖色板的 ring 阴影——绝不使用冷调或通用灰。7. 响应式行为断点名称宽度关键变化Small Mobile479px最小布局全部堆叠紧凑排版Mobile479–640px单列、汉堡导航、缩小标题字号Large Mobile640–767px稍宽内容区Tablet768–991px开始出现 2 列网格、压缩导航Desktop992px完整多列布局、展开导航、最大 Hero 字号64px触摸目标按钮使用慷慨内边距垂直最小 8–16px导航链接为拇指导航留足间距卡片表面本身就是大触摸目标最低建议44×44px折叠策略导航完整横向导航在移动端折叠为汉堡特性区块多列 → 堆叠单列Hero 文字64px → 36px → 约 25px 渐进缩放模型卡片3 列 → 堆叠垂直区块内边距按比例缩减但保持编辑节奏插画按比例缩放、保持宽高比图片行为产品截图在圆角容器内按比例缩放插画在所有尺寸下保持质量视频嵌入保持 16:9 宽高比并带圆角断点之间不改变 art direction8. Agent Prompt 指南快速色彩参考品牌 CTA「Terracotta Brand (#c96442)」页面背景「Parchment (#f5f4ed)」卡片表面「Ivory (#faf9f5)」主文字「Anthropic Near Black (#141413)」次级文字「Olive Gray (#5e5d59)」三级文字「Stone Gray (#87867f)」边框浅色「Border Cream (#f0eee6)」深色表面「Dark Surface (#30302e)」组件 Prompt 示例Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius.Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px).Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e).Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px.Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans.迭代指南一次只聚焦一个组件引用具体色彩名——说「use Olive Gray (#5e5d59)」而不是「make it gray」始终指定暖调变体——不要冷灰明确描述衬线 vs 无衬线用法——「Anthropic Serif for the heading, Anthropic Sans for the label」阴影使用「ring shadow (0px 0px 0px 1px)」或「whisper shadow」——绝不用笼统的「drop shadow」指定暖背景——「on Parchment (#f5f4ed)」或「on Near Black (#141413)」保持插画有机与概念化——描述「hand-drawn-feeling」风格9. Dos 与 DontsDo以 Parchment#f5f4ed作为主浅色背景——暖奶油色就是 Claude 的性格本身所有标题统一使用 500 字重的 Anthropic Serif——单字重一致性是有意为之Terracotta Brand#c96442只用于主 CTA 与最高信号品牌时刻保持所有中性色暖调——每个灰色都应有黄棕底色交互元素状态用 ring 阴影0px 0px 0px 1px而非投影维持编辑式衬线/无衬线层级——内容标题用衬线UI 用无衬线用慷慨正文行高1.60营造文学阅读体验交替浅色与深色区块创造章节式页面节奏使用慷慨圆角12–32px营造柔和亲切感Dont任何地方都不要用冷蓝灰——色板是纯粹暖调的不要在 Anthropic Serif 上使用粗体700——500 是衬线的上限不要引入超出 Terracotta 的饱和色——色板刻意克制不要在按钮或卡片上用尖锐直角 6px 圆角——柔和是身份核心不要用重投影——深度来自 ring 阴影与背景色变化不要用纯白#ffffff做页面背景——Parchment#f5f4ed或 Ivory#faf9f5总是更暖不要用几何/科技风格插画——Claude 的插画是有机手绘感的不要把正文行高降到 1.40 以下——慷慨间距支撑编辑式人格不要为非代码内容使用等宽字体——Anthropic Mono 严格用于代码不要用无衬线做标题——衬线/无衬线的分野就是排版的身份10. Token 落地tokens.css 的实现映射设计规范要在 OpenDesign 中真正生效需要落到结构化 Token 上。仓库中 tokens.css 把 DESIGN.md 的全部决策编码进:root变量块是「规范 → 可运行代码」的关键桥梁。其注释直接呼应了设计文档的每个关键决策Parchment 画布、Ivory 卡片表面、Terracotta 单一品牌强调色、全暖调灰阶、衬线/无衬线分野、ring 式深度、1.60 正文行高、以及「Focus Blue 是全系统唯一冷色仅限无障碍」的约束。核心 Token 分组如下:root { /* 表面3 层Parchment → Ivory → Warm Sand */ --bg: #f5f4ed; /* 页面背景——绝不用纯白 */ --surface: #faf9f5; /* 抬升卡片表面 */ --surface-warm: #e8e6dc; /* Warm Sand——按钮背景、突出交互表面 */ /* 前景色阶4 级每个灰都带黄棕底零冷蓝灰 */ --fg: #141413; /* Anthropic Near Black */ --fg-2: #3d3d3a; /* Dark Warm */ --muted: #5e5d59; /* Olive Gray */ --meta: #87867f; /* Stone Gray */ /* 边框2 级奶油色调最轻柔的收纳 */ --border: #f0eee6; /* Border Cream */ --border-soft: #e8e6dc; /* Border Warm */ /* 强调色Terracotta——多数屏幕唯一的彩色元素 */ --accent: #c96442; --accent-on: #faf9f5; /* Terracotta 作背景时的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 语义色 */ --success: #17a34a; --warn: #eab308; --danger: #b53333; /* Error Crimson——暖红非标准危险红 */ /* 字体栈 */ --font-display: Anthropic Serif, Georgia, Times New Roman, serif; --font-body: Anthropic Sans, Arial, system-ui, -apple-system, sans-serif; --font-mono: Anthropic Mono, ui-monospace, JetBrains Mono, Menlo, monospace; /* 字号阶梯64px hero → 52px section → 36px sub → 32px card → 25px small */ --text-xs: 10px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 25px; --text-2xl: 32px; --text-3xl: 52px; --text-4xl: 64px; --leading-body: 1.6; /* 松弛——更像书而非仪表盘 */ --leading-tight: 1.1; /* 紧标题——衬线字形自然呼吸 */ --tracking-display: 0em; /* 间距8px 基础单位卡片内边距约 24–32px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 48px; /* 圆角无锐角——柔和是身份核心 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; /* 层级ring 阴影取代投影投影仅在必要时且 0.05 透明度 */ --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px; /* 焦点环全系统唯一冷色仅用于无障碍 */ --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3); /* 动效短促、有目的交互保持平静 */ --motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 布局1200px 容器 */ --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px; }几个值得注意的实现细节color-mix(in oklab, ...)hover/active 状态不再手工算色而是基于主色在 OKLab 色彩空间混合黑8%/14%保证暖调色相不漂移这是规范中「暖调一致性」的现代 CSS 实现。ring 式阴影 Token--elev-ring即0 0 0 1px的边框式光晕把 DESIGN.md 第 6 章的阴影哲学直接变成可复用变量。动效克制150ms/200ms的短促过渡配合标准缓动曲线呼应「编辑式温暖不需要动画能量」的设计意图。Tailwind v4 映射如果项目使用 Tailwind v4可直接引入 tailwind-v4.css。该文件在文件头声明「Derived from tokens.css. Keep tokens.css as the source of truth」通过import ./tokens.css与theme块把全部 CSS 变量映射为 Tailwind 设计令牌例如--color-bg、--color-accent、--text-4xl、--shadow-ring、--spacing-section-desktop等。它只是派生缓存修改任何 Token 都应改tokens.css而非此文件。11. 组件清单与可复用类components.html 是独立运行的组件参照夹具reference fixture其文件头说明「Every visible value comes from tokens.css via var(--*)」——所有可见值都经由var(--*)来自 tokens.css可直接在第一个 artifact 的style块中粘贴:rootToken 块后复用。由 components.manifest.json 可以看出这套组件夹具包含 50 个选择器、25 个类覆盖 9 个组件组组件组核心类引用的关键 Tokenbuttons按钮与 CTA.btn、.btn-primary、.btn-secondary--accent-hover、--surface-warm、--radius-sm、--focus-ring、--motion-fastinputs表单控件.field、.field input、.field-help、.form--border-soft、--radius-md、--meta、--surfacecards卡片与面板.card--border、--elev-raised、--radius-sm、--space-6badges徽章与状态标签.badge、.badge-dot、.badge-success、.badge-muted--success、--muted、--radius-pilllinks链接a、a:hover--accentkeyboard键盘提示kbd--font-mono、--surface-warm、--border-softicons图标槽位.icon16×16 SVG 容器—typography字号标尺与文本工具类.lead、.eyebrow、.body-muted、.body-sm、h1/h2/h3--font-display、--leading-tight、--text-4xl/2xl/xl、--tracking-displaylayout布局原语.container、.stack-3/4/6、.hero-grid、.features-grid、.form-row、.row-between--container-max、--container-gutter-*、--space-4其中.btn-primary的完整实现是「Terracotta 纪律」的代码级证据——背景var(--accent)、文字var(--accent-on)、阴影var(--accent) 0 0 0 0, var(--accent) 0 0 0 1pxhover 切到--accent-hoveractive 切到--accent-active聚焦时使用--focus-ringFocus Blue。.field input:focus-visible则直接内联border-color: #3898ec并注释「Focus Blue — the only cool color in Claude」与 DESIGN.md 的「全系统唯一冷色」约束完全对应。布局原语也很讲究.container用max-width: var(--container-max)margin-inline: auto居中section section用border-top: 1px solid var(--border)做章节分隔断点 1023px/639px 下逐级切换 gutter 与区块纵向间距与 DESIGN.md 第 8 章的折叠策略一一对应。12. 包结构、元数据与使用顺序Claude 包遵循 OpenDesign 设计系统 2.0 的统一包结构详见 design-systems/README.md 与 docs/design-systems.md。除三个必需文件manifest.json、DESIGN.md、tokens.css外本包还声明了丰富的派生文件design-systems/claude/ ├── manifest.json # 包元数据与文件声明od-design-system-project/v1 ├── DESIGN.md # 面向 Agent 的规范正文本文骨架 ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 权威语义 Token 样式表 ├── tailwind-v4.css # 派生 Tailwind v4 映射缓存勿手改 ├── design-tokens.json # 派生 Design Tokens JSON56 个 Token评分 100 ├── components.html # 独立组件参照夹具 ├── components.manifest.json # 派生组件/Token 索引 ├── preview/ # colors.html / typography.html / spacing.html 视觉预览 └── source/ # evidence.md token-contract.report.json tokens.source.json 审计证据manifest.json 声明了包的身份id: claude、category: AI LLM、来源type: bundled、origin: OpenDesign curated bundled fixture、craft 建议建议应用color与accessibility-baseline两条 craft 检查并索引了preview/下三个预览页。USAGE.md 给出了 Agent 的标准阅读顺序先读 USAGE.md 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 → 将 tokens.css 粘贴进第一个 artifact 的style块 → 用 components.manifest.json 做组件盘点、需要精确选择器时打开 components.html → 需要视觉检查时查看 preview/ 页面。同时强调两条纪律保留 schema Token 名不变以保证跨品牌切换可靠避免在复制的:rootToken 块之外使用裸十六进制值。关于数据可信度source/evidence.md明确说明本包基于 OpenDesign 策展的内置夹具curated bundled fixture不声称对上游品牌站点做过全新抓取design-tokens.json 汇总了 56 个 Token、评分 100、评级 excellent每个 Token 都映射回tokens.css的具体声明行如--bg对应tokens.css:24。这些派生文件design-tokens.json、tailwind-v4.css都是缓存而非竞争性事实源修改时应回到 tokens.css。13. 实战速查三个步骤复刻 Claude 风格贴 Token把 tokens.css 的:root块整体粘贴进页面style首部作为全部组件的取值来源禁止绕过 Token 写裸色值。选组件从 components.manifest.json 的 9 个组件组中复用.btn-primary、.btn-secondary、.card、.field、.badge等既有类需要精确实现时对照 components.html。验风格对照本文第 9 章的 Do/Donts 清单自查——背景是否 Parchment、标题是否 Serif 500、灰色是否全暖调、阴影是否 ring 式、是否出现冷灰或纯白背景等越界项必要时用 preview/colors.html、preview/typography.html、preview/spacing.html 做视觉抽查。遵循这套流程你可以让编码 Agent 稳定地产出「暖羊皮纸 赤陶 CTA 衬线标题 ring 阴影」的 Claude 风格界面——一个把文学编辑气质移植进产品页的设计系统从规范到 Token 再到组件每一层都有仓库源码可查、可验证、可复用。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 复刻 Claude 温暖编辑风设计系统：OpenDesign 中 Claude (Anthropic) 设计规范的 Token 落地与实战指南
复刻 Claude 温暖编辑风设计系统OpenDesign 中 Claude (Anthropic) 设计规范的 Token 落地与实战指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-designClaude (Anthropic) 是 OpenDesign 内置的 151 套设计系统包之一以「文学沙龙」为视觉母题——暖羊皮纸底色、赤陶色点缀、全暖调中性色与衬线标题共同构成一种「有品位的人工智能」气质。本文以 design-systems/claude/DESIGN.md 为骨架结合 tokens.css、components.html、components.manifest.json 等仓库源码完整还原该设计语言的色彩、排版、组件、布局、层级与响应式规范并给出可直接复制的 CSS Token 与 Agent Prompt 配方帮助你在原型、落地页、仪表盘等产物中稳定复刻这种「暖调、克制、编辑感」的视觉风格。1. 视觉主题与氛围把产品页当成一本文学杂志Claude 的界面是「重新想象成产品页的文学沙龙」——温暖、从容、带着安静的知识分子气质。整个体验建立在一层羊皮纸色调的画布#f5f4ed之上刻意唤起「优质纸张」而非「数字屏幕」的质感。当大多数 AI 产品页向冰冷、未来主义的美学倾斜时Claude 的设计散发着人的温度仿佛 AI 本身对室内设计有着良好品味。标志性的动作是定制的 Anthropic Serif 字体——一款中等字重、比例舒展的衬线体让每个标题都有书封标题般的分量。配合赤陶色#c96442、黑色与柔和绿色的有机手绘感插画整个视觉语言说的是「体贴的伙伴」而不是「强大的工具」。衬线标题以紧凑但舒适的 1.10–1.30 行高呼吸形成的节奏更像是在读一篇散文而不是浏览产品页。让 Claude 设计真正独树一帜的是其全暖调中性色每一个灰色都带有黄棕底色#5e5d59、#87867f、#4d4c48整个系统里没有任何冷蓝灰边框是奶油色调#f0eee6、#e8e6dc阴影使用暖调透明黑连最深的表面#141413、#30302e也带着几乎不可察觉的橄榄暖意。这种色相一致创造出一个「有人住过、值得信赖」的空间。核心特征速览暖羊皮纸画布#f5f4ed唤起高级纸张而非屏幕的质感定制 Anthropic 字体家族Serif 负责标题、Sans 负责界面、Mono 负责代码赤陶色品牌强调色#c96442——温暖、质朴、刻意「不科技」全暖调中性色——每个灰色都有黄棕底色零冷灰有机编辑式插画取代典型科技图标基于 ring 的阴影体系0px 0px 0px 1px在无可见边框的情况下制造边框般的深度杂志式节奏慷慨的区块间距 衬线驱动的层级2. 色彩体系与角色分工主色色名色值用途Anthropic Near Black#141413主要文字色与深色主题表面——并非纯黑而是带橄榄暖意的深色更护眼是各大科技品牌中最「暖」的黑Terracotta Brand#c96442核心品牌色——烧制橙棕用于主 CTA 按钮、品牌时刻与标志性强调刻意质朴、不科技Coral Accent#d97757品牌色的更浅更暖变体用于文字强调、深色表面的链接与次级强调次级与强调色色名色值用途Error Crimson#b53333深暖红用于错误状态——严肃但不吓人Focus Blue#3898ec标准输入焦点环蓝——全系统唯一的冷色纯粹为无障碍而存在表面与背景色色名色值用途Parchment#f5f4ed主页面背景——带黄绿调的暖奶油色像陈年纸张是整个设计的情感地基Ivory#faf9f5最浅表面——Parchment 背景上的卡片与抬升容器几乎不可辨但形成微妙分层Pure White#ffffff仅用于特定按钮表面与最大对比度元素Warm Sand#e8e6dc按钮背景与突出的交互表面——明显偏暖的浅灰Dark Surface#30302e深色主题容器、导航边框与抬升的深色元素——暖炭色Deep Dark#141413深色主题页面背景与主深色表面中性色与文字色色名色值用途Charcoal Warm#4d4c48浅暖表面上的按钮文字——深色配浅色的首选Olive Gray#5e5d59次级正文——明显温暖的深中灰Stone Gray#87867f三级文字、脚注与弱化元数据Dark Warm#3d3d3a深色文字链接与强调的次级文字Warm Silver#b0aea5深色表面上的文字——暖调羊皮纸色浅灰语义与强调色色名色值用途Border Cream#f0eee6标准浅色主题边框——几乎不可见的暖奶油色提供最轻柔的收纳感Border Warm#e8e6dc突出边框、区块分隔线与浅色表面的强调收纳Border Dark#30302e深色表面标准边框——保持暖调Ring Warm#d1cfc5按钮 hover/focus 状态的阴影环Ring Subtle#dedc01更浅交互表面的次级环Ring Deep#c2c0b6active/pressed 状态的更深环渐变系统Claude 的设计在传统意义上是无渐变的。深度与视觉丰富度来自暖调表面色、有机插画与浅/深区块交替的相互作用。暖调色板本身会在视线从奶油 → 沙色 → 石色 → 炭色 → 黑色区块移动时形成一种天然的「渐变」效果。3. 排版规则字体家族标题Anthropic Serif回退Georgia正文 / UIAnthropic Sans回退Arial代码Anthropic Mono回退Arial注以上均为定制字体。外部实现中可用 Georgia 替代衬线体用 system-ui/Inter 替代无衬线体。层级表角色字体字号字重行高字距说明Display / HeroAnthropic Serif64px (4rem)5001.10紧normal最大冲击力书封标题般的存在感Section HeadingAnthropic Serif52px (3.25rem)5001.20紧normal特性区块锚点Sub-heading LargeAnthropic Serif36–36.8px (~2.3rem)5001.30normal次级区块标记Sub-headingAnthropic Serif32px (2rem)5001.10紧normal卡片标题、特性名Sub-heading SmallAnthropic Serif25–25.6px (~1.6rem)5001.20normal更小区块标题Feature TitleAnthropic Serif20.8px (1.3rem)5001.20normal小特性标题Body SerifAnthropic Serif17px (1.06rem)4001.60松弛normal衬线正文编辑性段落Body LargeAnthropic Sans20px (1.25rem)4001.60松弛normal引言段落Body / NavAnthropic Sans17px (1.06rem)400–5001.00–1.60normal导航链接、UI 文本Body StandardAnthropic Sans16px (1rem)400–5001.25–1.60normal标准正文、按钮文字Body SmallAnthropic Sans15px (0.94rem)400–5001.00–1.60normal紧凑正文CaptionAnthropic Sans14px (0.88rem)4001.43normal元数据、描述LabelAnthropic Sans12px (0.75rem)400–5001.25–1.600.12px徽章、小标签OverlineAnthropic Sans10px (0.63rem)4001.600.5px大写 overline 标签MicroAnthropic Sans9.6px (0.6rem)4001.600.096px最小文字CodeAnthropic Mono15px (0.94rem)4001.60-0.32px行内代码、终端排版原则衬线给权威无衬线给功能Anthropic Serif 以 500 中字重承载全部标题让每个标题都有出版物标题的分量Anthropic Sans 以安静高效的方式处理全部功能性 UI 文本按钮、标签、导航。衬线只用一个字重所有 Anthropic Serif 标题统一使用 500——不加粗、不变细。这种单字重一致性在全部标题字号间创造了统一的「声音」仿佛同一个作者写了每个标题。正文行高放松大多数正文使用 1.60 行高显著比典型科技站点1.4–1.5更慷慨阅读体验更接近书而非仪表盘。标题紧而不压缩标题行高 1.10–1.30紧凑但从不压抑——衬线字形比无衬线更需要呼吸空间。小标签微字距12px 及以下的小号无衬线文字使用刻意字距0.12px–0.5px以保证极小字号下的可读性。4. 组件样式按钮Warm Sand次级背景Warm Sand#e8e6dc文字Charcoal Warm#4d4c48内边距0px 12px 0px 8px不对称——图标优先布局圆角舒适圆角8px阴影ring 式#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px主力按钮——温暖、低调、交互感明确White Surface背景Pure White#ffffff文字Anthropic Near Black#141413内边距8px 16px 8px 12px圆角慷慨圆角12pxHover切换为次级背景色浅色表面上的干净、抬升按钮Dark Charcoal背景Dark Surface#30302e文字Ivory#faf9f5内边距0px 12px 0px 8px圆角舒适圆角8px阴影ring 式#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px深色配浅色的反向强调变体Brand Terracotta背景Terracotta Brand#c96442文字Ivory#faf9f5圆角8–12px阴影ring 式#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px主 CTA——唯一带彩色色相的按钮Dark Primary背景Anthropic Near Black#141413文字Warm Silver#b0aea5内边距9.6px 16.8px圆角慷慨圆角12px边框细实线 Dark Surface1px solid #30302e用于深色主题表面卡片与容器背景浅色表面用 Ivory#faf9f5或 Pure White#ffffff深色表面用 Dark Surface#30302e边框浅色用细实线 Border Cream1px solid #f0eee6深色用1px solid #30302e圆角标准卡片舒适圆角8px精选卡片慷慨圆角16px英雄容器与嵌入媒体极圆角32px阴影耳语级rgba(0,0,0,0.05) 0px 4px 24px用于抬升内容Ring 阴影0px 0px 0px 1px模式用于交互卡片状态区块边框1px 0px 0px仅顶部用于列表项分隔输入与表单文字Anthropic Near Black#141413内边距1.6px 12px垂直方向极紧凑边框标准暖边框焦点带 Focus Blue#3898ec边框色的 ring——全系统唯一的冷色时刻圆角慷慨圆角12px导航暖背景吸顶导航LogoAnthropic Near Black 的 Claude 字标链接Near Black#141413、Olive Gray#5e5d59、Dark Warm#3d3d3a混用导航边框1px solid #30302e深色或1px solid #f0eee6浅色CTATerracotta Brand 按钮或 White Surface 按钮Hover文字切换到前景主色无下划线装饰图片处理展示 Claude 聊天界面的产品截图媒体慷慨圆角16–32px嵌入视频播放器带圆角深色 UI 截图与暖色浅画布形成对比概念区块使用有机手绘插画标志性组件模型对比卡片Opus 4.5、Sonnet 4.5、Haiku 4.5 以干净卡片网格呈现每个模型一张带边框卡片含名称、描述与能力徽章条目之间用 Border Warm#e8e6dc分隔有机插画赤陶色、黑色与柔和绿色的手绘感矢量插画抽象、概念化而非字面的产品示意图是主要的视觉个性——没有其他 AI 公司使用这种风格深/浅区块交替页面在 Parchment 浅色与 Near Black 深色区块间交替创造像书中章节一样的阅读节奏每个区块都像独立的环境5. 布局原则间距系统基础单位8px标尺3px、4px、6px、8px、10px、12px、16px、20px、24px、30px按钮内边距不对称0px 12px 0px 8px或均衡8px 16px卡片内边距约 24–32px区块垂直间距慷慨主要区块之间估计 80–120px网格与容器最大容器宽度约 1200px居中Hero居中编辑式布局特性区块单列或 2–3 列卡片网格模型对比干净的三列网格全宽深色区块突破容器以制造强调留白哲学编辑式节奏每个区块像杂志跨页一样呼吸——慷慨的上下边距制造自然的阅读停顿衬线驱动节奏衬线标题建立的文学韵律比无衬线设计需要更多留白内容岛屿法区块在浅色与深色环境间交替为每条信息创造独立的「房间」圆角标尺Sharp4px最小行内元素Subtly rounded6–7.5px小按钮、次级交互元素Comfortably rounded8–8.5px标准按钮、卡片、容器Generously rounded12px主按钮、输入框、导航元素Very rounded16px精选容器、视频播放器、标签列表Highly rounded24px标签状元素、高亮容器Maximum rounded32px英雄容器、嵌入媒体、大卡片6. 深度与层级层级处理方式用途FlatLevel 0无阴影、无边框Parchment 背景、行内文字ContainedLevel 11px solid #f0eee6浅或1px solid #30302e深标准卡片、区块RingLevel 2暖灰0px 0px 0px 1pxring 阴影交互卡片、按钮、hover 状态WhisperLevel 3rgba(0,0,0,0.05) 0px 4px 24px抬升特性卡片、产品截图InsetLevel 415% 透明度的inset 0px 0px 0px 1pxactive/pressed 按钮状态阴影哲学Claude 通过暖调 ring 阴影而非传统投影传达深度。标志性的0px 0px 0px 1px模式创造了一种比真实边框更柔和的边框式光晕——它是「假装成边框的阴影」或者说「技术上是阴影的边框」。即便出现投影也极柔和0.05 透明度、24px 模糊——几乎不可见的浮起暗示漂浮而非投射。装饰性深度深浅交替最具戏剧性的深度效果来自 Parchment#f5f4ed与 Near Black#141413区块的交替——整个区块通过改变环境光水平来切换层级。暖调 ring 光晕按钮与卡片交互使用匹配暖色板的 ring 阴影——绝不使用冷调或通用灰。7. 响应式行为断点名称宽度关键变化Small Mobile479px最小布局全部堆叠紧凑排版Mobile479–640px单列、汉堡导航、缩小标题字号Large Mobile640–767px稍宽内容区Tablet768–991px开始出现 2 列网格、压缩导航Desktop992px完整多列布局、展开导航、最大 Hero 字号64px触摸目标按钮使用慷慨内边距垂直最小 8–16px导航链接为拇指导航留足间距卡片表面本身就是大触摸目标最低建议44×44px折叠策略导航完整横向导航在移动端折叠为汉堡特性区块多列 → 堆叠单列Hero 文字64px → 36px → 约 25px 渐进缩放模型卡片3 列 → 堆叠垂直区块内边距按比例缩减但保持编辑节奏插画按比例缩放、保持宽高比图片行为产品截图在圆角容器内按比例缩放插画在所有尺寸下保持质量视频嵌入保持 16:9 宽高比并带圆角断点之间不改变 art direction8. Agent Prompt 指南快速色彩参考品牌 CTA「Terracotta Brand (#c96442)」页面背景「Parchment (#f5f4ed)」卡片表面「Ivory (#faf9f5)」主文字「Anthropic Near Black (#141413)」次级文字「Olive Gray (#5e5d59)」三级文字「Stone Gray (#87867f)」边框浅色「Border Cream (#f0eee6)」深色表面「Dark Surface (#30302e)」组件 Prompt 示例Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius.Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px).Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e).Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px.Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans.迭代指南一次只聚焦一个组件引用具体色彩名——说「use Olive Gray (#5e5d59)」而不是「make it gray」始终指定暖调变体——不要冷灰明确描述衬线 vs 无衬线用法——「Anthropic Serif for the heading, Anthropic Sans for the label」阴影使用「ring shadow (0px 0px 0px 1px)」或「whisper shadow」——绝不用笼统的「drop shadow」指定暖背景——「on Parchment (#f5f4ed)」或「on Near Black (#141413)」保持插画有机与概念化——描述「hand-drawn-feeling」风格9. Dos 与 DontsDo以 Parchment#f5f4ed作为主浅色背景——暖奶油色就是 Claude 的性格本身所有标题统一使用 500 字重的 Anthropic Serif——单字重一致性是有意为之Terracotta Brand#c96442只用于主 CTA 与最高信号品牌时刻保持所有中性色暖调——每个灰色都应有黄棕底色交互元素状态用 ring 阴影0px 0px 0px 1px而非投影维持编辑式衬线/无衬线层级——内容标题用衬线UI 用无衬线用慷慨正文行高1.60营造文学阅读体验交替浅色与深色区块创造章节式页面节奏使用慷慨圆角12–32px营造柔和亲切感Dont任何地方都不要用冷蓝灰——色板是纯粹暖调的不要在 Anthropic Serif 上使用粗体700——500 是衬线的上限不要引入超出 Terracotta 的饱和色——色板刻意克制不要在按钮或卡片上用尖锐直角 6px 圆角——柔和是身份核心不要用重投影——深度来自 ring 阴影与背景色变化不要用纯白#ffffff做页面背景——Parchment#f5f4ed或 Ivory#faf9f5总是更暖不要用几何/科技风格插画——Claude 的插画是有机手绘感的不要把正文行高降到 1.40 以下——慷慨间距支撑编辑式人格不要为非代码内容使用等宽字体——Anthropic Mono 严格用于代码不要用无衬线做标题——衬线/无衬线的分野就是排版的身份10. Token 落地tokens.css 的实现映射设计规范要在 OpenDesign 中真正生效需要落到结构化 Token 上。仓库中 tokens.css 把 DESIGN.md 的全部决策编码进:root变量块是「规范 → 可运行代码」的关键桥梁。其注释直接呼应了设计文档的每个关键决策Parchment 画布、Ivory 卡片表面、Terracotta 单一品牌强调色、全暖调灰阶、衬线/无衬线分野、ring 式深度、1.60 正文行高、以及「Focus Blue 是全系统唯一冷色仅限无障碍」的约束。核心 Token 分组如下:root { /* 表面3 层Parchment → Ivory → Warm Sand */ --bg: #f5f4ed; /* 页面背景——绝不用纯白 */ --surface: #faf9f5; /* 抬升卡片表面 */ --surface-warm: #e8e6dc; /* Warm Sand——按钮背景、突出交互表面 */ /* 前景色阶4 级每个灰都带黄棕底零冷蓝灰 */ --fg: #141413; /* Anthropic Near Black */ --fg-2: #3d3d3a; /* Dark Warm */ --muted: #5e5d59; /* Olive Gray */ --meta: #87867f; /* Stone Gray */ /* 边框2 级奶油色调最轻柔的收纳 */ --border: #f0eee6; /* Border Cream */ --border-soft: #e8e6dc; /* Border Warm */ /* 强调色Terracotta——多数屏幕唯一的彩色元素 */ --accent: #c96442; --accent-on: #faf9f5; /* Terracotta 作背景时的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 语义色 */ --success: #17a34a; --warn: #eab308; --danger: #b53333; /* Error Crimson——暖红非标准危险红 */ /* 字体栈 */ --font-display: Anthropic Serif, Georgia, Times New Roman, serif; --font-body: Anthropic Sans, Arial, system-ui, -apple-system, sans-serif; --font-mono: Anthropic Mono, ui-monospace, JetBrains Mono, Menlo, monospace; /* 字号阶梯64px hero → 52px section → 36px sub → 32px card → 25px small */ --text-xs: 10px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 25px; --text-2xl: 32px; --text-3xl: 52px; --text-4xl: 64px; --leading-body: 1.6; /* 松弛——更像书而非仪表盘 */ --leading-tight: 1.1; /* 紧标题——衬线字形自然呼吸 */ --tracking-display: 0em; /* 间距8px 基础单位卡片内边距约 24–32px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 48px; /* 圆角无锐角——柔和是身份核心 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; /* 层级ring 阴影取代投影投影仅在必要时且 0.05 透明度 */ --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px; /* 焦点环全系统唯一冷色仅用于无障碍 */ --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3); /* 动效短促、有目的交互保持平静 */ --motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 布局1200px 容器 */ --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px; }几个值得注意的实现细节color-mix(in oklab, ...)hover/active 状态不再手工算色而是基于主色在 OKLab 色彩空间混合黑8%/14%保证暖调色相不漂移这是规范中「暖调一致性」的现代 CSS 实现。ring 式阴影 Token--elev-ring即0 0 0 1px的边框式光晕把 DESIGN.md 第 6 章的阴影哲学直接变成可复用变量。动效克制150ms/200ms的短促过渡配合标准缓动曲线呼应「编辑式温暖不需要动画能量」的设计意图。Tailwind v4 映射如果项目使用 Tailwind v4可直接引入 tailwind-v4.css。该文件在文件头声明「Derived from tokens.css. Keep tokens.css as the source of truth」通过import ./tokens.css与theme块把全部 CSS 变量映射为 Tailwind 设计令牌例如--color-bg、--color-accent、--text-4xl、--shadow-ring、--spacing-section-desktop等。它只是派生缓存修改任何 Token 都应改tokens.css而非此文件。11. 组件清单与可复用类components.html 是独立运行的组件参照夹具reference fixture其文件头说明「Every visible value comes from tokens.css via var(--*)」——所有可见值都经由var(--*)来自 tokens.css可直接在第一个 artifact 的style块中粘贴:rootToken 块后复用。由 components.manifest.json 可以看出这套组件夹具包含 50 个选择器、25 个类覆盖 9 个组件组组件组核心类引用的关键 Tokenbuttons按钮与 CTA.btn、.btn-primary、.btn-secondary--accent-hover、--surface-warm、--radius-sm、--focus-ring、--motion-fastinputs表单控件.field、.field input、.field-help、.form--border-soft、--radius-md、--meta、--surfacecards卡片与面板.card--border、--elev-raised、--radius-sm、--space-6badges徽章与状态标签.badge、.badge-dot、.badge-success、.badge-muted--success、--muted、--radius-pilllinks链接a、a:hover--accentkeyboard键盘提示kbd--font-mono、--surface-warm、--border-softicons图标槽位.icon16×16 SVG 容器—typography字号标尺与文本工具类.lead、.eyebrow、.body-muted、.body-sm、h1/h2/h3--font-display、--leading-tight、--text-4xl/2xl/xl、--tracking-displaylayout布局原语.container、.stack-3/4/6、.hero-grid、.features-grid、.form-row、.row-between--container-max、--container-gutter-*、--space-4其中.btn-primary的完整实现是「Terracotta 纪律」的代码级证据——背景var(--accent)、文字var(--accent-on)、阴影var(--accent) 0 0 0 0, var(--accent) 0 0 0 1pxhover 切到--accent-hoveractive 切到--accent-active聚焦时使用--focus-ringFocus Blue。.field input:focus-visible则直接内联border-color: #3898ec并注释「Focus Blue — the only cool color in Claude」与 DESIGN.md 的「全系统唯一冷色」约束完全对应。布局原语也很讲究.container用max-width: var(--container-max)margin-inline: auto居中section section用border-top: 1px solid var(--border)做章节分隔断点 1023px/639px 下逐级切换 gutter 与区块纵向间距与 DESIGN.md 第 8 章的折叠策略一一对应。12. 包结构、元数据与使用顺序Claude 包遵循 OpenDesign 设计系统 2.0 的统一包结构详见 design-systems/README.md 与 docs/design-systems.md。除三个必需文件manifest.json、DESIGN.md、tokens.css外本包还声明了丰富的派生文件design-systems/claude/ ├── manifest.json # 包元数据与文件声明od-design-system-project/v1 ├── DESIGN.md # 面向 Agent 的规范正文本文骨架 ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 权威语义 Token 样式表 ├── tailwind-v4.css # 派生 Tailwind v4 映射缓存勿手改 ├── design-tokens.json # 派生 Design Tokens JSON56 个 Token评分 100 ├── components.html # 独立组件参照夹具 ├── components.manifest.json # 派生组件/Token 索引 ├── preview/ # colors.html / typography.html / spacing.html 视觉预览 └── source/ # evidence.md token-contract.report.json tokens.source.json 审计证据manifest.json 声明了包的身份id: claude、category: AI LLM、来源type: bundled、origin: OpenDesign curated bundled fixture、craft 建议建议应用color与accessibility-baseline两条 craft 检查并索引了preview/下三个预览页。USAGE.md 给出了 Agent 的标准阅读顺序先读 USAGE.md 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 → 将 tokens.css 粘贴进第一个 artifact 的style块 → 用 components.manifest.json 做组件盘点、需要精确选择器时打开 components.html → 需要视觉检查时查看 preview/ 页面。同时强调两条纪律保留 schema Token 名不变以保证跨品牌切换可靠避免在复制的:rootToken 块之外使用裸十六进制值。关于数据可信度source/evidence.md明确说明本包基于 OpenDesign 策展的内置夹具curated bundled fixture不声称对上游品牌站点做过全新抓取design-tokens.json 汇总了 56 个 Token、评分 100、评级 excellent每个 Token 都映射回tokens.css的具体声明行如--bg对应tokens.css:24。这些派生文件design-tokens.json、tailwind-v4.css都是缓存而非竞争性事实源修改时应回到 tokens.css。13. 实战速查三个步骤复刻 Claude 风格贴 Token把 tokens.css 的:root块整体粘贴进页面style首部作为全部组件的取值来源禁止绕过 Token 写裸色值。选组件从 components.manifest.json 的 9 个组件组中复用.btn-primary、.btn-secondary、.card、.field、.badge等既有类需要精确实现时对照 components.html。验风格对照本文第 9 章的 Do/Donts 清单自查——背景是否 Parchment、标题是否 Serif 500、灰色是否全暖调、阴影是否 ring 式、是否出现冷灰或纯白背景等越界项必要时用 preview/colors.html、preview/typography.html、preview/spacing.html 做视觉抽查。遵循这套流程你可以让编码 Agent 稳定地产出「暖羊皮纸 赤陶 CTA 衬线标题 ring 阴影」的 Claude 风格界面——一个把文学编辑气质移植进产品页的设计系统从规范到 Token 再到组件每一层都有仓库源码可查、可验证、可复用。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考