AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载本文以 design-systems/ibm/DESIGN-pl.mdIBM 风格设计系统规范为核心骨架结合仓库中 tokens.css、components.html、components.manifest.json 等落地文件展开。读者读完将掌握IBM Carbon 设计语言的完整视觉规范色彩、排版、组件、布局、层级、响应式这套规范在 Open Design 设计系统包中的工程化形态语义令牌、组件清单、Tailwind 映射以及如何将这些规范直接改写成可供代码生成 Agent 执行的高精度提示词。导读在 Open Design 仓库中每个design-systems/slug/子目录都是一个可移植的设计系统包design-systems/ibm/即是以 IBM Carbon 设计系统为蓝本的规范化封装白色 Carbon 表面、方正几何、IBM Plex 字体族以及单一工程化蓝色信号IBM Blue 60#0f62fe。本指南基于该包的设计规范文档逐层拆解其视觉语言、令牌系统与组件规则并结合仓库中的tokens.css与组件 fixture 展示这些规范如何被编译为机器可读的语义令牌、如何映射到 Tailwind v4 主题以及如何沉淀为可直接投喂给 Agent 的组件级提示词。读完本文你可以直接照抄参数在任意前端项目中复现 IBM 风格界面也可以理解 Open Design 设计系统包的内部结构与消费方式。1. 视觉主题与氛围工程规范化的企业权威IBM 官网是建立在 Carbon 设计系统之上的企业权威的数字化身——一套结构化程度极高、读起来像渲染成网页的工程规范的设计语言。页面运行在鲜明的二元结构之上亮白#ffffff画布搭配近黑#161616文本由唯一不变的强调色——IBM Blue 60#0f62fe——进行点缀。这不是嬉皮的科技创业极简主义而是浓缩到像素级的企业级精确每个元素都存在于 Carbon 严格的 2x 网格内每个颜色都映射到一个语义令牌每个间距值都吸附在 8px 基础单元上。IBM Plex 字体族是这套系统的骨架。IBM Plex Sans 以 300Light字重用于展示级标题在大字号下营造出意料之外的轻盈质感——这是对 IBM 企业重量感的有意反衬。正文级别使用 400Regular字重14px 标题文字上施加 0.16px 字间距引入那种让 Carbon 文本像被工程化而非被设计出来的精密微追踪。IBM Plex Mono 服务于代码、数据与技术标签与极少露面的 IBM Plex Serif 共同构成字体三件套。定义 IBM 视觉身份超越单色蓝色的核心是对 Carbon 组件令牌系统的依赖每一个交互状态都映射到以--cds-前缀Carbon Design System命名的 CSS 自定义属性。按钮没有硬编码颜色而是引用--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active。这种令牌化架构意味着整个视觉层只是覆盖在深度系统化地基之上的一层薄壳——设计层面等价于一个类型良好的 API。关键特征速览IBM Plex Sans 300Light字重用于展示——通过排版克制传达企业分量IBM Plex Mono 用于代码与技术内容小字号下保持 0.16px 字间距单一强调色IBM Blue 60#0f62fe——每个交互元素、每个 CTA、每个链接Carbon 令牌系统--cds-*驱动所有语义颜色支持在变量层面完成主题切换8px 间距网格严格执行——无任意值一切对齐基于#f4f4f4Gray 10表面的无边框扁平卡片——深度来自背景色分层而非阴影下边框式输入框非盒状——Carbon 表单的标志性模式主按钮 0px 圆角——毫不妥协的矩形不做柔化1.1 仓库中的令牌化落地规范中的--cds-*语义在仓库包中具体化为 tokens.css 的:root令牌块。该文件顶部注释精确概括了包的视觉目标white Carbon surfaces, square geometry, IBM Plex typography, and a single engineered blue signal白色 Carbon 表面、方正几何、IBM Plex 排版、单一工程化蓝色信号。令牌采用语义命名而非品牌命名例如--bg: #ffffff; /* 页面背景 */ --surface: #f4f4f4; /* 卡片/次级表面对应 Carbon Gray 10*/ --fg: #161616; /* 主文本对应 Gray 100*/ --accent: #0f62fe; /* 交互强调Blue 60*/ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --radius-sm/md/lg: 0px; /* 圆角全部归零仅 radius-pill 为 9999px */ --elev-flat: none; /* 扁平无阴影 */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe; /* 双层焦点环 */值得注意的两点实现细节其一hover/active 状态没有硬编码色值而是用 CSS 原生color-mix(in oklab, ...)从--accent推导而来保证主题切换时状态色自动联动其二圆角令牌--radius-sm/md/lg统一为0px只有--radius-pill: 9999px保留胶囊形状——与规范矩形是系统的立场完全一致。令牌清单及其被引用情况可核对 components.manifest.json 的tokens.declared58 个声明令牌与tokens.referenced字段。2. 调色板与角色2.1 基础色PrimaryIBM Blue 60#0f62fe唯一的交互色。主按钮、链接、焦点状态、活动指示器。这是核心 UI 调色板中唯一的彩色。白色#ffffff页面背景、卡片表面、蓝底按钮上的文字对应--cds-background。Gray 100#161616主文本、标题、深色表面背景、导航栏、页脚对应--cds-text-primary。2.2 中性色阶灰色家族令牌色值用途Carbon 语义Gray 100#161616主文本、标题、深色 UI 框架、页脚背景--cds-text-primaryGray 90#262626次级深色表面、深色背景上的 hover 态—Gray 80#393939三级深色、激活态—Gray 70#525252次级文本、辅助文本、描述--cds-text-secondaryGray 60#6f6f6f占位符文本、禁用文本—Gray 50#8d8d8d禁用图标、弱化标签—Gray 30#c6c6c6边框、分隔线、输入框下边框--cds-border-subtleGray 20#e0e0e0微妙边框、卡片轮廓—Gray 10#f4f4f4次级表面背景、卡片填充、交替行--cds-layer-01Gray 10 Hover#e8e8e8Gray 10 表面的 hover 态—2.3 交互色InteractiveBlue 60#0f62fe主要交互——按钮、链接、焦点对应--cds-link-primary、--cds-button-primary。Blue 70#0043ce链接 hover 态对应--cds-link-primary-hover。Blue 80#002d9c蓝色元素的激活/按下态。Blue 10#edf5ff蓝色调表面、选中行背景。Focus Blue#0f62fe--cds-focus——聚焦元素上 2px 内边框。Focus Inset#ffffff--cds-focus-inset——深色背景上焦点用白色内环。2.4 支持与状态色Support StatusRed 60#da1e28错误、危险对应--cds-support-error。Green 50#24a148成功对应--cds-support-success。Yellow 30#f1c21b警告对应--cds-support-warning。Blue 60#0f62fe信息对应--cds-support-info。这组状态色在 tokens.css 中以--danger: #da1e28、--success: #24a148、--warn: #f1c21b呈现并在 components.html 的.status::before指示点background: var(--success)中得到实际使用。2.5 深色主题Gray 100 主题角色值说明背景Gray 100#161616--cds-backgroundLayer 01Gray 90#262626卡片与容器表面Layer 02Gray 80#393939抬升表面主文本Gray 10#f4f4f4--cds-text-primary次级文本Gray 30#c6c6c6--cds-text-secondary微妙边框Gray 80#393939--cds-border-subtle交互色Blue 40#78a9ff深色背景下链接与交互元素转向更亮色阶以保对比度3. 排版规则3.1 字体族主字体IBM Plex Sans回退字体Helvetica Neue, Arial, sans-serif等宽IBM Plex Mono回退字体Menlo, Courier, monospace衬线限量使用IBM Plex Serif用于编辑/表达性场景图标字体ibm_icons——20px 的专有图标字形仓库对应定义在 tokens.css 的--font-display、--font-body均为 IBM Plex Sans 栈与--font-monoIBM Plex Mono SF Mono回退。3.2 层级字阶表完整参数角色字体字号字重行高字间距说明Display 01IBM Plex Sans60px (3.75rem)300 (Light)1.17 (70px)0最大冲击力轻字重求优雅Display 02IBM Plex Sans48px (3.00rem)300 (Light)1.17 (56px)0次级 hero响应式回退Heading 01IBM Plex Sans42px (2.63rem)300 (Light)1.19 (50px)0表达性标题Heading 02IBM Plex Sans32px (2.00rem)400 (Regular)1.25 (40px)0章节标题Heading 03IBM Plex Sans24px (1.50rem)400 (Regular)1.33 (32px)0小节标题Heading 04IBM Plex Sans20px (1.25rem)600 (Semibold)1.40 (28px)0卡片标题、功能头Heading 05IBM Plex Sans20px (1.25rem)400 (Regular)1.40 (28px)0更轻的卡片标题Body Long 01IBM Plex Sans16px (1.00rem)400 (Regular)1.50 (24px)0标准阅读文本Body Long 02IBM Plex Sans16px (1.00rem)600 (Semibold)1.50 (24px)0强调正文、标签Body Short 01IBM Plex Sans14px (0.88rem)400 (Regular)1.29 (18px)0.16px紧凑正文、说明Body Short 02IBM Plex Sans14px (0.88rem)600 (Semibold)1.29 (18px)0.16px加粗说明、导航项Caption 01IBM Plex Sans12px (0.75rem)400 (Regular)1.33 (16px)0.32px元数据、时间戳Code 01IBM Plex Mono14px (0.88rem)400 (Regular)1.43 (20px)0.16px行内代码、终端Code 02IBM Plex Mono16px (1.00rem)400 (Regular)1.50 (24px)0代码块Mono DisplayIBM Plex Mono42px (2.63rem)400 (Regular)1.19 (50px)0hero 装饰性等宽字阶在仓库中通过--text-xs12px到--text-4xl60px的字号令牌、--leading-tight: 1.17与--leading-body: 1.5的行高令牌、--tracking-display: 0的展示字间距令牌实现在 components.html 中h1使用var(--text-4xl)var(--leading-tight).eyebrow使用 12px 等宽 0.12em 大写间距。3.3 三条核心原则展示尺寸用轻字重Carbon 表达性字阶在 42px 使用 300Light字重形成独特张力——内容以企业权威发声字形却以排版轻盈低语。小尺寸微追踪14px 处 0.16px、12px 处 0.32px 字间距。这些看似无关紧要的值是 Carbon 在紧凑尺寸下保持可读性的秘密武器——恰好打开 IBM Plex 紧密字形的间距。三个功能字重300展示/表达、400正文/阅读、600强调/UI 标签。700Bold在生产字阶中有意缺席。生产型 vs. 表达型生产型字阶用更紧的行高1.29承载高密度 UI表达型字阶更舒展1.40–1.50服务营销与编辑内容。4. 组件样式4.1 按钮五态完整参数主按钮蓝色背景#0f62feBlue 60→--cds-button-primary文字#ffffffWhite内边距14px 63px 14px 15px不对称——为尾部图标预留空间边框1px solid transparent圆角0px锐利矩形——Carbon 签名高度48px默认、40px紧凑、64px表达型Hover#0353e9Blue 60 Hover→--cds-button-primary-hoverActive#002d9cBlue 80→--cds-button-primary-activeFocus2px solid #0f62fe内边框 1px solid #ffffff内环次按钮灰色背景#393939Gray 80、文字#ffffff、Hover#4c4c4cGray 70、Active#6f6f6fGray 60内边距与圆角同主按钮。三级按钮Ghost 蓝透明背景、文字#0f62fe、边框1px solid #0f62fe、Hover 时文字变#0353e9并叠加 Blue 10 背景调、圆角0px。Ghost 按钮透明背景、文字#0f62fe、内边距14px 16px、无边框、Hover 叠加#e8e8e8背景调。危险按钮背景#da1e28Red 60、文字#ffffff、Hover#b81921Red 70。仓库参考实现见 components.html.btn-primary使用background: var(--accent)/color: var(--accent-on)hover 时background: var(--accent-hover)并轻微上移translateY(-1px)焦点使用--focus-ring双层环外圈蓝、内圈白.btn-secondary通过--elev-ring描边 hover 时边框与文字切换到--accent。4.2 卡片与容器背景浅色主题#ffffff抬升卡片#f4f4f4Gray 10边框无扁平设计——多数卡片无边框无阴影圆角0px与按钮矩形美学一致Hover可点击卡片背景切换为#e8e8e8Gray 10 Hover内容内边距16px分隔背景色分层白 → Gray 10 → 白而非阴影4.3 表单输入框背景#f4f4f4Gray 10→--cds-field文字#161616Gray 100内边距0px 16px仅水平高度40px默认、48px大号边框两侧与顶部无边框——底部2px solid transparent激活下边框2px solid #161616Gray 100Focus底部2px solid #0f62feBlue 60→--cds-focus错误底部2px solid #da1e28Red 60标签12px IBM Plex Sans、0.32px 字间距、Gray 70辅助文本12px、Gray 60占位符Gray 60#6f6f6f圆角顶部 0px——输入框锐角注意仓库 fixture components.html 中的输入框在保持令牌语义的同时做了可访问性适配——min-height: 46px、box-shadow: var(--focus-ring)border-color: var(--accent)的焦点态。这是规范参数与可运行实现之间的合理弹性规范值40/48px、下边框式仍是 Agent 生成时的基准。4.4 导航背景#161616Gray 100——通栏深色 masthead高度48pxLogoIBM 八条杠 logo深底白字左对齐链接14px IBM Plex Sans、字重 400、默认#c6c6c6Gray 30链接 Hover文字#ffffff激活链接#ffffff配下边框指示器平台切换器左对齐水平标签页搜索图标触发的滑出式搜索框移动端汉堡菜单 左侧滑出面板4.5 链接默认#0f62feBlue 60无下划线Hover#0043ceBlue 70加下划线已访问保持 Blue 60无访问态变化行内链接正文段落中默认带下划线4.6 特色组件内容块Hero/特性区通栏白/Gray 10 交替背景带左对齐标题60px 或 48px 展示字体CTA 为带箭头图标的蓝色主按钮插图/图片右对齐移动端置于下方Tile可点击卡片背景#f4f4f4或#ffffff通栏下边框或 hover 背景切换hover 时右下角出现箭头图标无阴影——扁平即是身份Tag / 标签背景上下文色 10% 透明度如 Blue 10、Red 10文字对应 60 色阶内边距4px 8px圆角24px胶囊——0px 规则的唯一例外字体12px 字重 400通知横幅通栏条通常 Blue 60 或 Gray 100 背景白色 14px 文字右侧关闭/忽略图标5. 布局原则5.1 间距系统基础单元8pxCarbon 2x 网格组件间距刻度2px、4px、8px、12px、16px、24px、32px、40px、48px布局间距刻度16px、24px、32px、48px、64px、80px、96px、160px迷你单元8px最小可用间距组件内边距通常 16px卡片/磁贴间距1px发丝线或 16px标准仓库在 tokens.css 中实现为--space-14px至--space-1248px的间距令牌以及--section-y-desktop: 96px/--section-y-tablet: 72px/--section-y-phone: 48px的分段纵向间距令牌在 components.html 中随断点切换。5.2 网格与容器16 列网格Carbon 2x 网格系统最大内容宽度1584px最大断点列槽宽32px移动端 16px边距16px移动端、32px平板内容通常占 8–12 列以保证可读行长通栏区块与受限内容交替仓库容器令牌为--container-max: 1312px内容宽度、--container-gutter-desktop/tablet/phone: 32/24/16px通过.container { max-width: var(--container-max); margin-inline: auto; }在 components.html 中落地。5.3 留白哲学功能性密度Carbon 偏好生产型密度而非铺张留白区块相比消费级设计系统更紧凑——这反映 IBM 的企业 DNA。背景色分区不用巨大间距IBM 用交替背景色白 → Gray 10 → 白以最小纵向空间制造视觉分隔。固定 48px 节奏主要区块过渡用 48px 纵向间距Hero 区块可用 80px–96px。5.4 圆角刻度0px主按钮、输入框、磁贴、卡片——主导处理。Carbon 从根本上是矩形的。2px偶尔用于小型交互元素标签24px标签/胶囊唯一圆角例外50%头像圆形、图标容器6. 深度与层级层级处理方式用途扁平Level 0无阴影#ffffff背景默认页面表面Layer 01无阴影#f4f4f4背景卡片、磁贴、交替区块Layer 02无阴影#e0e0e0背景Layer 01 内的抬升面板抬升Raised0 2px 6px rgba(0,0,0,0.3)下拉、提示框、溢出菜单覆盖Overlay0 2px 6px rgba(0,0,0,0.3) 深色幕布模态框、侧边面板焦点Focus2px solid #0f62fe内边框 1px solid #ffffff键盘焦点环下边框底部2px solid #161616激活输入框、激活标签页指示器阴影哲学Carbon 有意规避阴影。IBM 主要通过背景色分层实现深度——堆叠逐级变深的灰色表面而非添加 box-shadow。这造就了扁平、印刷灵感的审美层级靠颜色明度传达而非模拟光照。阴影仅保留给真正悬浮叠于内容之上的元素下拉、提示框、模态。这种克制让罕见的阴影产生有意义的冲击——在 Carbon 中当某物浮起它一定重要。对应实现--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)描边式层级、--elev-raised: 0 2px 6px rgba(0,0,0,0.12)、--focus-ring双层焦点环。--elev-raised在 components.html 中仅用于.panel浮动面板与阴影只给浮动元素的规范严格对应。7. 该做与不该做Dos and Donts该做展示尺寸42px使用 IBM Plex Sans 300 字重——轻盈是有意为之14px 正文用 0.16px 字间距、12px 说明用 0.32px 字间距按钮、输入框、卡片、磁贴使用 0px 圆角——矩形就是系统实现时引用--cds-*令牌名如--cds-button-primary、--cds-text-primary用背景色分层白 → Gray 10 → Gray 20制造深度而非阴影表单指示用下边框而非盒状边框保持 48px 默认按钮高度与为图标预留的不对称内边距以 Blue 60#0f62fe作为唯一强调色——一个蓝统治一切不该做不要圆化按钮圆角——0px 圆角是 Carbon 的身份不要在卡片或磁贴上用阴影——扁平是核心不要引入额外强调色——IBM 系统是单色蓝不要用 700Bold字重——字阶止于 600Semibold不要给展示级文字加字间距——追踪只用于 14px 及以下不要给输入框加全边框——Carbon 输入框只用下边框不要用渐变背景——IBM 表面是扁平纯色不要偏离 8px 间距网格——每个值应能被 8 整除2px 与 4px 仅用于微调8. 响应式行为8.1 断点表名称宽度关键变化Small (sm)320px单列、汉堡导航、16px 边距Medium (md)672px开始双列网格、内容扩展Large (lg)1056px完整导航可见、3–4 列网格X-Large (xlg)1312px最大内容密度、宽布局Max1584px最大内容宽度、居中带边距仓库中 components.html 采用三档媒体查询呼应此表max-width: 1023px切换平板槽宽24px与段落纵向间距72pxmax-width: 639px切换手机槽宽16px与 48px 段落间距max-width: 860px时将 hero、lower、metric-grid、card-row 折叠为单列。8.2 触控目标按钮高度48px 默认最低 40px紧凑型导航链接48px 行高利于触控输入框高度40px 默认48px 大号图标按钮48px 方形触控区域移动端菜单项通栏 48px 行8.3 折叠策略Hero随视口变窄 60px 展示 → 42px → 32px 标题导航完整水平 masthead → 汉堡菜单 滑出面板网格4 列 → 2 列 → 单列磁贴/卡片水平网格 → 垂直堆叠图片保持宽高比max-width: 100%页脚多列链接组 → 单列堆叠区块内边距48px → 32px → 16px8.4 图片行为响应式图片max-width: 100%产品插图按比例缩放Hero 图片可从并排切换为下方堆叠数据可视化保持宽高比移动端允许水平滚动9. Agent 提示词指南可直接复用9.1 快速颜色参考角色值主 CTAIBM Blue 60#0f62fe背景白色#ffffff标题文字Gray 100#161616正文文字Gray 100#161616次级文字Gray 70#525252表面/卡片Gray 10#f4f4f4边框Gray 30#c6c6c6链接Blue 60#0f62fe链接 HoverBlue 70#0043ce焦点环Blue 60#0f62fe错误Red 60#da1e28成功Green 50#24a1489.2 示例组件提示词以下五条提示词均来自规范原文可直接投喂给代码生成 Agent在白色背景上创建一个 hero 区块。标题 60px IBM Plex Sans 字重 300、line-height 1.17、颜色 #161616。副标题 16px 字重 400、line-height 1.50、颜色 #525252、max-width 640px。蓝色 CTA 按钮#0f62fe 背景、#ffffff 文字、0px 圆角、48px 高度、14px 63px 14px 15px 内边距。设计一个卡片磁贴#f4f4f4 背景、0px 圆角、16px 内边距。标题 20px IBM Plex Sans 字重 600、line-height 1.40、颜色 #161616。正文 14px 字重 400、字间距 0.16px、line-height 1.29、颜色 #525252。Hover背景切换为 #e8e8e8。构建一个表单字段#f4f4f4 背景、0px 圆角、40px 高度、16px 水平内边距。上方标签 12px 字重 400、字间距 0.32px、颜色 #525252。下边框默认 2px solid transparent、focus 时 2px solid #0f62fe。占位符#6f6f6f。创建一个深色导航栏#161616 背景、48px 高度。IBM logo 白色左对齐。链接 14px IBM Plex Sans 字重 400、颜色 #c6c6c6。Hover#ffffff 文字。激活#ffffff 配 2px 下边框。构建一个标签组件Blue 10#edf5ff背景、Blue 60#0f62fe文字、4px 8px 内边距、24px 圆角、12px IBM Plex Sans 字重 400。9.3 迭代指南Carbon 八条铁律按钮、输入框、卡片一律 0px 圆角——这在 Carbon 中不可妥协字间距只用于小字号14px 处 0.16px、12px 处 0.32px——绝不用在展示文字上三个字重300展示、400正文、600强调——无粗体Blue 60 是唯一强调色——不要引入次级强调色相深度来自背景色分层白 → #f4f4f4 → #e0e0e0而非阴影输入框只有下边框绝不整体盒装令牌命名使用--cds-前缀以保持 Carbon 兼容48px 是交互元素的通用高度10. 仓库中的包结构与消费方式该设计系统在 Open Design 中以便携式设计系统包的形式存在。依据 design-systems/README.md每个包的最小机器可读形态为manifest.jsonDESIGN.mdtokens.css而design-systems/ibm/属于包含全部富文件的完整包design-systems/ibm/ ├── manifest.json # 包元数据id、category、文件路径声明 ├── DESIGN.md # Agent 规范正文本文的英文母版 ├── DESIGN-*.md # 各语言翻译含本文主题 DESIGN-pl.md ├── USAGE.md # Agent 阅读顺序与使用约定 ├── tokens.css # 语义令牌规范样式表唯一真源 ├── design-tokens.json # 派生的 Design Tokens JSON ├── tailwind-v4.css # 派生的 Tailwind v4 主题映射 ├── components.html # 独立组件参考 fixture ├── components.manifest.json # 派生的组件/令牌索引 ├── preview/ # 颜色/排版/间距预览页 ├── source/ # 导入证据与令牌契约报告 └── system/ # 系统级渲染页面几点关键的消费约定见 USAGE.md 与 manifest.json阅读顺序先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘贴进首个 artifact 的style块再写组件 CSS → 需要精确选择器或状态时查components.html→ 需要视觉检查时看preview/页。真源原则tokens.css是唯一真源design-tokens.json与tailwind-v4.css是派生产物应基于 source/token-contract.report.json 与令牌样式表重新生成而非手工编辑见 source/evidence.md。令牌命名必须保留--accent用于主操作、链接、焦点状态与唯一视觉焦点避免在复制的:root令牌块之外使用裸十六进制色值避免脱离tokens.css独立重定义 Tailwind 或设计令牌值。证据边界该包基于 OpenDesign 精选捆绑 fixturecurated bundled fixture派生不声称对上游品牌仓库或网站做过全新爬取——这是包自身声明的事实边界manifest.json的source.type: bundled。从 components.manifest.json 的统计可见包内实现的规模48 个选择器、26 个类、19 个元素、58 个声明令牌组件分组覆盖按钮与 CTA、表单字段、卡片与面板、徽章/状态标签、链接、排版工具类与布局原语其中键盘提示keyboard与图标槽icons两组标记为present: false说明该 fixture 未包含这两类组件。令牌健康度检查显示unusedDeclared仅 7 项如--danger、--warn、--elev-flat且undeclaredReferenced为空——意味着样式表中不存在未声明即引用的幽灵令牌令牌契约完整自洽。若要在自己的项目中使用这套规范推荐路径是把 tokens.css 的:root块作为基础令牌按需叠加 tailwind-v4.css 的theme映射它将每个--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*令牌桥接到 Tailwind 工具类再以 components.html 为组件基准、以本文第 9 节的提示词为生成指令驱动 Agent 产出页面。规范中的灰色阶、蓝色阶与状态色均可对照第 2 节表格逐值核对确保生成结果与 Carbon 语义完全对齐。结语IBM Carbon 设计系统在 design-systems/ibm/DESIGN-pl.md 中呈现为一套可逐项执行的工程化规范单色蓝的严格色彩约束、300/400/600 三字重的排版纪律、0px 圆角的矩形身份、背景色分层而非阴影的深度哲学以及 48px 的统一交互高度。而 tokens.css 与 components.html 则证明这套规范可以被编译为自洽、可审计、可跨品牌切换的语义令牌系统——这正是 Open Design 设计系统包的核心价值把品牌审美转化为可验证的工程契约。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载相关推荐OpenDesign 中的 IBM Carbon 设计系统从 --cds-* 令牌到 Agent 可执行的视觉规范实战指南OpenDesign 中的 IBM Carbon 设计系统从 cds 令牌到 Agent 可执行的视觉规范实战指南 导读 本文以 OpenDesign 仓库内AI 应用人工智能AI 技能设计系统媒体生成在 open-design 中复刻 IBM Carbon 设计系统从 --cds-* 语义令牌到 Agent 生成式设计实战在 open design 中复刻 IBM Carbon 设计系统从 cds 语义令牌到 Agent 生成式设计实战 本文以仓库中 design systemAI 应用人工智能AI 技能设计系统媒体生成Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南 本文以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Open Design 仓库 IBM Carbon 设计系统全解：从视觉令牌到 Agent 提示词的可复现规范
AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载本文以 design-systems/ibm/DESIGN-pl.mdIBM 风格设计系统规范为核心骨架结合仓库中 tokens.css、components.html、components.manifest.json 等落地文件展开。读者读完将掌握IBM Carbon 设计语言的完整视觉规范色彩、排版、组件、布局、层级、响应式这套规范在 Open Design 设计系统包中的工程化形态语义令牌、组件清单、Tailwind 映射以及如何将这些规范直接改写成可供代码生成 Agent 执行的高精度提示词。导读在 Open Design 仓库中每个design-systems/slug/子目录都是一个可移植的设计系统包design-systems/ibm/即是以 IBM Carbon 设计系统为蓝本的规范化封装白色 Carbon 表面、方正几何、IBM Plex 字体族以及单一工程化蓝色信号IBM Blue 60#0f62fe。本指南基于该包的设计规范文档逐层拆解其视觉语言、令牌系统与组件规则并结合仓库中的tokens.css与组件 fixture 展示这些规范如何被编译为机器可读的语义令牌、如何映射到 Tailwind v4 主题以及如何沉淀为可直接投喂给 Agent 的组件级提示词。读完本文你可以直接照抄参数在任意前端项目中复现 IBM 风格界面也可以理解 Open Design 设计系统包的内部结构与消费方式。1. 视觉主题与氛围工程规范化的企业权威IBM 官网是建立在 Carbon 设计系统之上的企业权威的数字化身——一套结构化程度极高、读起来像渲染成网页的工程规范的设计语言。页面运行在鲜明的二元结构之上亮白#ffffff画布搭配近黑#161616文本由唯一不变的强调色——IBM Blue 60#0f62fe——进行点缀。这不是嬉皮的科技创业极简主义而是浓缩到像素级的企业级精确每个元素都存在于 Carbon 严格的 2x 网格内每个颜色都映射到一个语义令牌每个间距值都吸附在 8px 基础单元上。IBM Plex 字体族是这套系统的骨架。IBM Plex Sans 以 300Light字重用于展示级标题在大字号下营造出意料之外的轻盈质感——这是对 IBM 企业重量感的有意反衬。正文级别使用 400Regular字重14px 标题文字上施加 0.16px 字间距引入那种让 Carbon 文本像被工程化而非被设计出来的精密微追踪。IBM Plex Mono 服务于代码、数据与技术标签与极少露面的 IBM Plex Serif 共同构成字体三件套。定义 IBM 视觉身份超越单色蓝色的核心是对 Carbon 组件令牌系统的依赖每一个交互状态都映射到以--cds-前缀Carbon Design System命名的 CSS 自定义属性。按钮没有硬编码颜色而是引用--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active。这种令牌化架构意味着整个视觉层只是覆盖在深度系统化地基之上的一层薄壳——设计层面等价于一个类型良好的 API。关键特征速览IBM Plex Sans 300Light字重用于展示——通过排版克制传达企业分量IBM Plex Mono 用于代码与技术内容小字号下保持 0.16px 字间距单一强调色IBM Blue 60#0f62fe——每个交互元素、每个 CTA、每个链接Carbon 令牌系统--cds-*驱动所有语义颜色支持在变量层面完成主题切换8px 间距网格严格执行——无任意值一切对齐基于#f4f4f4Gray 10表面的无边框扁平卡片——深度来自背景色分层而非阴影下边框式输入框非盒状——Carbon 表单的标志性模式主按钮 0px 圆角——毫不妥协的矩形不做柔化1.1 仓库中的令牌化落地规范中的--cds-*语义在仓库包中具体化为 tokens.css 的:root令牌块。该文件顶部注释精确概括了包的视觉目标white Carbon surfaces, square geometry, IBM Plex typography, and a single engineered blue signal白色 Carbon 表面、方正几何、IBM Plex 排版、单一工程化蓝色信号。令牌采用语义命名而非品牌命名例如--bg: #ffffff; /* 页面背景 */ --surface: #f4f4f4; /* 卡片/次级表面对应 Carbon Gray 10*/ --fg: #161616; /* 主文本对应 Gray 100*/ --accent: #0f62fe; /* 交互强调Blue 60*/ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --radius-sm/md/lg: 0px; /* 圆角全部归零仅 radius-pill 为 9999px */ --elev-flat: none; /* 扁平无阴影 */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe; /* 双层焦点环 */值得注意的两点实现细节其一hover/active 状态没有硬编码色值而是用 CSS 原生color-mix(in oklab, ...)从--accent推导而来保证主题切换时状态色自动联动其二圆角令牌--radius-sm/md/lg统一为0px只有--radius-pill: 9999px保留胶囊形状——与规范矩形是系统的立场完全一致。令牌清单及其被引用情况可核对 components.manifest.json 的tokens.declared58 个声明令牌与tokens.referenced字段。2. 调色板与角色2.1 基础色PrimaryIBM Blue 60#0f62fe唯一的交互色。主按钮、链接、焦点状态、活动指示器。这是核心 UI 调色板中唯一的彩色。白色#ffffff页面背景、卡片表面、蓝底按钮上的文字对应--cds-background。Gray 100#161616主文本、标题、深色表面背景、导航栏、页脚对应--cds-text-primary。2.2 中性色阶灰色家族令牌色值用途Carbon 语义Gray 100#161616主文本、标题、深色 UI 框架、页脚背景--cds-text-primaryGray 90#262626次级深色表面、深色背景上的 hover 态—Gray 80#393939三级深色、激活态—Gray 70#525252次级文本、辅助文本、描述--cds-text-secondaryGray 60#6f6f6f占位符文本、禁用文本—Gray 50#8d8d8d禁用图标、弱化标签—Gray 30#c6c6c6边框、分隔线、输入框下边框--cds-border-subtleGray 20#e0e0e0微妙边框、卡片轮廓—Gray 10#f4f4f4次级表面背景、卡片填充、交替行--cds-layer-01Gray 10 Hover#e8e8e8Gray 10 表面的 hover 态—2.3 交互色InteractiveBlue 60#0f62fe主要交互——按钮、链接、焦点对应--cds-link-primary、--cds-button-primary。Blue 70#0043ce链接 hover 态对应--cds-link-primary-hover。Blue 80#002d9c蓝色元素的激活/按下态。Blue 10#edf5ff蓝色调表面、选中行背景。Focus Blue#0f62fe--cds-focus——聚焦元素上 2px 内边框。Focus Inset#ffffff--cds-focus-inset——深色背景上焦点用白色内环。2.4 支持与状态色Support StatusRed 60#da1e28错误、危险对应--cds-support-error。Green 50#24a148成功对应--cds-support-success。Yellow 30#f1c21b警告对应--cds-support-warning。Blue 60#0f62fe信息对应--cds-support-info。这组状态色在 tokens.css 中以--danger: #da1e28、--success: #24a148、--warn: #f1c21b呈现并在 components.html 的.status::before指示点background: var(--success)中得到实际使用。2.5 深色主题Gray 100 主题角色值说明背景Gray 100#161616--cds-backgroundLayer 01Gray 90#262626卡片与容器表面Layer 02Gray 80#393939抬升表面主文本Gray 10#f4f4f4--cds-text-primary次级文本Gray 30#c6c6c6--cds-text-secondary微妙边框Gray 80#393939--cds-border-subtle交互色Blue 40#78a9ff深色背景下链接与交互元素转向更亮色阶以保对比度3. 排版规则3.1 字体族主字体IBM Plex Sans回退字体Helvetica Neue, Arial, sans-serif等宽IBM Plex Mono回退字体Menlo, Courier, monospace衬线限量使用IBM Plex Serif用于编辑/表达性场景图标字体ibm_icons——20px 的专有图标字形仓库对应定义在 tokens.css 的--font-display、--font-body均为 IBM Plex Sans 栈与--font-monoIBM Plex Mono SF Mono回退。3.2 层级字阶表完整参数角色字体字号字重行高字间距说明Display 01IBM Plex Sans60px (3.75rem)300 (Light)1.17 (70px)0最大冲击力轻字重求优雅Display 02IBM Plex Sans48px (3.00rem)300 (Light)1.17 (56px)0次级 hero响应式回退Heading 01IBM Plex Sans42px (2.63rem)300 (Light)1.19 (50px)0表达性标题Heading 02IBM Plex Sans32px (2.00rem)400 (Regular)1.25 (40px)0章节标题Heading 03IBM Plex Sans24px (1.50rem)400 (Regular)1.33 (32px)0小节标题Heading 04IBM Plex Sans20px (1.25rem)600 (Semibold)1.40 (28px)0卡片标题、功能头Heading 05IBM Plex Sans20px (1.25rem)400 (Regular)1.40 (28px)0更轻的卡片标题Body Long 01IBM Plex Sans16px (1.00rem)400 (Regular)1.50 (24px)0标准阅读文本Body Long 02IBM Plex Sans16px (1.00rem)600 (Semibold)1.50 (24px)0强调正文、标签Body Short 01IBM Plex Sans14px (0.88rem)400 (Regular)1.29 (18px)0.16px紧凑正文、说明Body Short 02IBM Plex Sans14px (0.88rem)600 (Semibold)1.29 (18px)0.16px加粗说明、导航项Caption 01IBM Plex Sans12px (0.75rem)400 (Regular)1.33 (16px)0.32px元数据、时间戳Code 01IBM Plex Mono14px (0.88rem)400 (Regular)1.43 (20px)0.16px行内代码、终端Code 02IBM Plex Mono16px (1.00rem)400 (Regular)1.50 (24px)0代码块Mono DisplayIBM Plex Mono42px (2.63rem)400 (Regular)1.19 (50px)0hero 装饰性等宽字阶在仓库中通过--text-xs12px到--text-4xl60px的字号令牌、--leading-tight: 1.17与--leading-body: 1.5的行高令牌、--tracking-display: 0的展示字间距令牌实现在 components.html 中h1使用var(--text-4xl)var(--leading-tight).eyebrow使用 12px 等宽 0.12em 大写间距。3.3 三条核心原则展示尺寸用轻字重Carbon 表达性字阶在 42px 使用 300Light字重形成独特张力——内容以企业权威发声字形却以排版轻盈低语。小尺寸微追踪14px 处 0.16px、12px 处 0.32px 字间距。这些看似无关紧要的值是 Carbon 在紧凑尺寸下保持可读性的秘密武器——恰好打开 IBM Plex 紧密字形的间距。三个功能字重300展示/表达、400正文/阅读、600强调/UI 标签。700Bold在生产字阶中有意缺席。生产型 vs. 表达型生产型字阶用更紧的行高1.29承载高密度 UI表达型字阶更舒展1.40–1.50服务营销与编辑内容。4. 组件样式4.1 按钮五态完整参数主按钮蓝色背景#0f62feBlue 60→--cds-button-primary文字#ffffffWhite内边距14px 63px 14px 15px不对称——为尾部图标预留空间边框1px solid transparent圆角0px锐利矩形——Carbon 签名高度48px默认、40px紧凑、64px表达型Hover#0353e9Blue 60 Hover→--cds-button-primary-hoverActive#002d9cBlue 80→--cds-button-primary-activeFocus2px solid #0f62fe内边框 1px solid #ffffff内环次按钮灰色背景#393939Gray 80、文字#ffffff、Hover#4c4c4cGray 70、Active#6f6f6fGray 60内边距与圆角同主按钮。三级按钮Ghost 蓝透明背景、文字#0f62fe、边框1px solid #0f62fe、Hover 时文字变#0353e9并叠加 Blue 10 背景调、圆角0px。Ghost 按钮透明背景、文字#0f62fe、内边距14px 16px、无边框、Hover 叠加#e8e8e8背景调。危险按钮背景#da1e28Red 60、文字#ffffff、Hover#b81921Red 70。仓库参考实现见 components.html.btn-primary使用background: var(--accent)/color: var(--accent-on)hover 时background: var(--accent-hover)并轻微上移translateY(-1px)焦点使用--focus-ring双层环外圈蓝、内圈白.btn-secondary通过--elev-ring描边 hover 时边框与文字切换到--accent。4.2 卡片与容器背景浅色主题#ffffff抬升卡片#f4f4f4Gray 10边框无扁平设计——多数卡片无边框无阴影圆角0px与按钮矩形美学一致Hover可点击卡片背景切换为#e8e8e8Gray 10 Hover内容内边距16px分隔背景色分层白 → Gray 10 → 白而非阴影4.3 表单输入框背景#f4f4f4Gray 10→--cds-field文字#161616Gray 100内边距0px 16px仅水平高度40px默认、48px大号边框两侧与顶部无边框——底部2px solid transparent激活下边框2px solid #161616Gray 100Focus底部2px solid #0f62feBlue 60→--cds-focus错误底部2px solid #da1e28Red 60标签12px IBM Plex Sans、0.32px 字间距、Gray 70辅助文本12px、Gray 60占位符Gray 60#6f6f6f圆角顶部 0px——输入框锐角注意仓库 fixture components.html 中的输入框在保持令牌语义的同时做了可访问性适配——min-height: 46px、box-shadow: var(--focus-ring)border-color: var(--accent)的焦点态。这是规范参数与可运行实现之间的合理弹性规范值40/48px、下边框式仍是 Agent 生成时的基准。4.4 导航背景#161616Gray 100——通栏深色 masthead高度48pxLogoIBM 八条杠 logo深底白字左对齐链接14px IBM Plex Sans、字重 400、默认#c6c6c6Gray 30链接 Hover文字#ffffff激活链接#ffffff配下边框指示器平台切换器左对齐水平标签页搜索图标触发的滑出式搜索框移动端汉堡菜单 左侧滑出面板4.5 链接默认#0f62feBlue 60无下划线Hover#0043ceBlue 70加下划线已访问保持 Blue 60无访问态变化行内链接正文段落中默认带下划线4.6 特色组件内容块Hero/特性区通栏白/Gray 10 交替背景带左对齐标题60px 或 48px 展示字体CTA 为带箭头图标的蓝色主按钮插图/图片右对齐移动端置于下方Tile可点击卡片背景#f4f4f4或#ffffff通栏下边框或 hover 背景切换hover 时右下角出现箭头图标无阴影——扁平即是身份Tag / 标签背景上下文色 10% 透明度如 Blue 10、Red 10文字对应 60 色阶内边距4px 8px圆角24px胶囊——0px 规则的唯一例外字体12px 字重 400通知横幅通栏条通常 Blue 60 或 Gray 100 背景白色 14px 文字右侧关闭/忽略图标5. 布局原则5.1 间距系统基础单元8pxCarbon 2x 网格组件间距刻度2px、4px、8px、12px、16px、24px、32px、40px、48px布局间距刻度16px、24px、32px、48px、64px、80px、96px、160px迷你单元8px最小可用间距组件内边距通常 16px卡片/磁贴间距1px发丝线或 16px标准仓库在 tokens.css 中实现为--space-14px至--space-1248px的间距令牌以及--section-y-desktop: 96px/--section-y-tablet: 72px/--section-y-phone: 48px的分段纵向间距令牌在 components.html 中随断点切换。5.2 网格与容器16 列网格Carbon 2x 网格系统最大内容宽度1584px最大断点列槽宽32px移动端 16px边距16px移动端、32px平板内容通常占 8–12 列以保证可读行长通栏区块与受限内容交替仓库容器令牌为--container-max: 1312px内容宽度、--container-gutter-desktop/tablet/phone: 32/24/16px通过.container { max-width: var(--container-max); margin-inline: auto; }在 components.html 中落地。5.3 留白哲学功能性密度Carbon 偏好生产型密度而非铺张留白区块相比消费级设计系统更紧凑——这反映 IBM 的企业 DNA。背景色分区不用巨大间距IBM 用交替背景色白 → Gray 10 → 白以最小纵向空间制造视觉分隔。固定 48px 节奏主要区块过渡用 48px 纵向间距Hero 区块可用 80px–96px。5.4 圆角刻度0px主按钮、输入框、磁贴、卡片——主导处理。Carbon 从根本上是矩形的。2px偶尔用于小型交互元素标签24px标签/胶囊唯一圆角例外50%头像圆形、图标容器6. 深度与层级层级处理方式用途扁平Level 0无阴影#ffffff背景默认页面表面Layer 01无阴影#f4f4f4背景卡片、磁贴、交替区块Layer 02无阴影#e0e0e0背景Layer 01 内的抬升面板抬升Raised0 2px 6px rgba(0,0,0,0.3)下拉、提示框、溢出菜单覆盖Overlay0 2px 6px rgba(0,0,0,0.3) 深色幕布模态框、侧边面板焦点Focus2px solid #0f62fe内边框 1px solid #ffffff键盘焦点环下边框底部2px solid #161616激活输入框、激活标签页指示器阴影哲学Carbon 有意规避阴影。IBM 主要通过背景色分层实现深度——堆叠逐级变深的灰色表面而非添加 box-shadow。这造就了扁平、印刷灵感的审美层级靠颜色明度传达而非模拟光照。阴影仅保留给真正悬浮叠于内容之上的元素下拉、提示框、模态。这种克制让罕见的阴影产生有意义的冲击——在 Carbon 中当某物浮起它一定重要。对应实现--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)描边式层级、--elev-raised: 0 2px 6px rgba(0,0,0,0.12)、--focus-ring双层焦点环。--elev-raised在 components.html 中仅用于.panel浮动面板与阴影只给浮动元素的规范严格对应。7. 该做与不该做Dos and Donts该做展示尺寸42px使用 IBM Plex Sans 300 字重——轻盈是有意为之14px 正文用 0.16px 字间距、12px 说明用 0.32px 字间距按钮、输入框、卡片、磁贴使用 0px 圆角——矩形就是系统实现时引用--cds-*令牌名如--cds-button-primary、--cds-text-primary用背景色分层白 → Gray 10 → Gray 20制造深度而非阴影表单指示用下边框而非盒状边框保持 48px 默认按钮高度与为图标预留的不对称内边距以 Blue 60#0f62fe作为唯一强调色——一个蓝统治一切不该做不要圆化按钮圆角——0px 圆角是 Carbon 的身份不要在卡片或磁贴上用阴影——扁平是核心不要引入额外强调色——IBM 系统是单色蓝不要用 700Bold字重——字阶止于 600Semibold不要给展示级文字加字间距——追踪只用于 14px 及以下不要给输入框加全边框——Carbon 输入框只用下边框不要用渐变背景——IBM 表面是扁平纯色不要偏离 8px 间距网格——每个值应能被 8 整除2px 与 4px 仅用于微调8. 响应式行为8.1 断点表名称宽度关键变化Small (sm)320px单列、汉堡导航、16px 边距Medium (md)672px开始双列网格、内容扩展Large (lg)1056px完整导航可见、3–4 列网格X-Large (xlg)1312px最大内容密度、宽布局Max1584px最大内容宽度、居中带边距仓库中 components.html 采用三档媒体查询呼应此表max-width: 1023px切换平板槽宽24px与段落纵向间距72pxmax-width: 639px切换手机槽宽16px与 48px 段落间距max-width: 860px时将 hero、lower、metric-grid、card-row 折叠为单列。8.2 触控目标按钮高度48px 默认最低 40px紧凑型导航链接48px 行高利于触控输入框高度40px 默认48px 大号图标按钮48px 方形触控区域移动端菜单项通栏 48px 行8.3 折叠策略Hero随视口变窄 60px 展示 → 42px → 32px 标题导航完整水平 masthead → 汉堡菜单 滑出面板网格4 列 → 2 列 → 单列磁贴/卡片水平网格 → 垂直堆叠图片保持宽高比max-width: 100%页脚多列链接组 → 单列堆叠区块内边距48px → 32px → 16px8.4 图片行为响应式图片max-width: 100%产品插图按比例缩放Hero 图片可从并排切换为下方堆叠数据可视化保持宽高比移动端允许水平滚动9. Agent 提示词指南可直接复用9.1 快速颜色参考角色值主 CTAIBM Blue 60#0f62fe背景白色#ffffff标题文字Gray 100#161616正文文字Gray 100#161616次级文字Gray 70#525252表面/卡片Gray 10#f4f4f4边框Gray 30#c6c6c6链接Blue 60#0f62fe链接 HoverBlue 70#0043ce焦点环Blue 60#0f62fe错误Red 60#da1e28成功Green 50#24a1489.2 示例组件提示词以下五条提示词均来自规范原文可直接投喂给代码生成 Agent在白色背景上创建一个 hero 区块。标题 60px IBM Plex Sans 字重 300、line-height 1.17、颜色 #161616。副标题 16px 字重 400、line-height 1.50、颜色 #525252、max-width 640px。蓝色 CTA 按钮#0f62fe 背景、#ffffff 文字、0px 圆角、48px 高度、14px 63px 14px 15px 内边距。设计一个卡片磁贴#f4f4f4 背景、0px 圆角、16px 内边距。标题 20px IBM Plex Sans 字重 600、line-height 1.40、颜色 #161616。正文 14px 字重 400、字间距 0.16px、line-height 1.29、颜色 #525252。Hover背景切换为 #e8e8e8。构建一个表单字段#f4f4f4 背景、0px 圆角、40px 高度、16px 水平内边距。上方标签 12px 字重 400、字间距 0.32px、颜色 #525252。下边框默认 2px solid transparent、focus 时 2px solid #0f62fe。占位符#6f6f6f。创建一个深色导航栏#161616 背景、48px 高度。IBM logo 白色左对齐。链接 14px IBM Plex Sans 字重 400、颜色 #c6c6c6。Hover#ffffff 文字。激活#ffffff 配 2px 下边框。构建一个标签组件Blue 10#edf5ff背景、Blue 60#0f62fe文字、4px 8px 内边距、24px 圆角、12px IBM Plex Sans 字重 400。9.3 迭代指南Carbon 八条铁律按钮、输入框、卡片一律 0px 圆角——这在 Carbon 中不可妥协字间距只用于小字号14px 处 0.16px、12px 处 0.32px——绝不用在展示文字上三个字重300展示、400正文、600强调——无粗体Blue 60 是唯一强调色——不要引入次级强调色相深度来自背景色分层白 → #f4f4f4 → #e0e0e0而非阴影输入框只有下边框绝不整体盒装令牌命名使用--cds-前缀以保持 Carbon 兼容48px 是交互元素的通用高度10. 仓库中的包结构与消费方式该设计系统在 Open Design 中以便携式设计系统包的形式存在。依据 design-systems/README.md每个包的最小机器可读形态为manifest.jsonDESIGN.mdtokens.css而design-systems/ibm/属于包含全部富文件的完整包design-systems/ibm/ ├── manifest.json # 包元数据id、category、文件路径声明 ├── DESIGN.md # Agent 规范正文本文的英文母版 ├── DESIGN-*.md # 各语言翻译含本文主题 DESIGN-pl.md ├── USAGE.md # Agent 阅读顺序与使用约定 ├── tokens.css # 语义令牌规范样式表唯一真源 ├── design-tokens.json # 派生的 Design Tokens JSON ├── tailwind-v4.css # 派生的 Tailwind v4 主题映射 ├── components.html # 独立组件参考 fixture ├── components.manifest.json # 派生的组件/令牌索引 ├── preview/ # 颜色/排版/间距预览页 ├── source/ # 导入证据与令牌契约报告 └── system/ # 系统级渲染页面几点关键的消费约定见 USAGE.md 与 manifest.json阅读顺序先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘贴进首个 artifact 的style块再写组件 CSS → 需要精确选择器或状态时查components.html→ 需要视觉检查时看preview/页。真源原则tokens.css是唯一真源design-tokens.json与tailwind-v4.css是派生产物应基于 source/token-contract.report.json 与令牌样式表重新生成而非手工编辑见 source/evidence.md。令牌命名必须保留--accent用于主操作、链接、焦点状态与唯一视觉焦点避免在复制的:root令牌块之外使用裸十六进制色值避免脱离tokens.css独立重定义 Tailwind 或设计令牌值。证据边界该包基于 OpenDesign 精选捆绑 fixturecurated bundled fixture派生不声称对上游品牌仓库或网站做过全新爬取——这是包自身声明的事实边界manifest.json的source.type: bundled。从 components.manifest.json 的统计可见包内实现的规模48 个选择器、26 个类、19 个元素、58 个声明令牌组件分组覆盖按钮与 CTA、表单字段、卡片与面板、徽章/状态标签、链接、排版工具类与布局原语其中键盘提示keyboard与图标槽icons两组标记为present: false说明该 fixture 未包含这两类组件。令牌健康度检查显示unusedDeclared仅 7 项如--danger、--warn、--elev-flat且undeclaredReferenced为空——意味着样式表中不存在未声明即引用的幽灵令牌令牌契约完整自洽。若要在自己的项目中使用这套规范推荐路径是把 tokens.css 的:root块作为基础令牌按需叠加 tailwind-v4.css 的theme映射它将每个--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*令牌桥接到 Tailwind 工具类再以 components.html 为组件基准、以本文第 9 节的提示词为生成指令驱动 Agent 产出页面。规范中的灰色阶、蓝色阶与状态色均可对照第 2 节表格逐值核对确保生成结果与 Carbon 语义完全对齐。结语IBM Carbon 设计系统在 design-systems/ibm/DESIGN-pl.md 中呈现为一套可逐项执行的工程化规范单色蓝的严格色彩约束、300/400/600 三字重的排版纪律、0px 圆角的矩形身份、背景色分层而非阴影的深度哲学以及 48px 的统一交互高度。而 tokens.css 与 components.html 则证明这套规范可以被编译为自洽、可审计、可跨品牌切换的语义令牌系统——这正是 Open Design 设计系统包的核心价值把品牌审美转化为可验证的工程契约。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载相关推荐OpenDesign 中的 IBM Carbon 设计系统从 --cds-* 令牌到 Agent 可执行的视觉规范实战指南OpenDesign 中的 IBM Carbon 设计系统从 cds 令牌到 Agent 可执行的视觉规范实战指南 导读 本文以 OpenDesign 仓库内AI 应用人工智能AI 技能设计系统媒体生成在 open-design 中复刻 IBM Carbon 设计系统从 --cds-* 语义令牌到 Agent 生成式设计实战在 open design 中复刻 IBM Carbon 设计系统从 cds 语义令牌到 Agent 生成式设计实战 本文以仓库中 design systemAI 应用人工智能AI 技能设计系统媒体生成Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南 本文以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考