carbon-design-system

Name: carbon-design-system
Author: fefogarcia

github.com/fefogarcia设计与 UI262 次安装37 周前更新

代码仓库

关于 carbon-design-system

面向构建 IBM Carbon Design System v11 界面的设计技能，供实现网页界面的开发者参考。它汇集组件用法与设计规范，覆盖网格、主题、字体、颜色和间距。

主要功能

01Carbon v11 组件与类名用法
02IBM Plex 字体规范
03主题与颜色令牌
04网格和间距规范
05动效与无障碍要求

适用场景

01按 Carbon 规范构建 HTML 界面
02为 React 项目应用 Carbon 样式
03设计数据仪表板布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system

安装后在 Claude Code 中输入/carbon-design-system确认已加载。

附带文件references/html-classes.mdreferences/tokens.md

详细介绍

Carbon Design System

构建符合 IBM Carbon Design System v11 的 UI。Carbon 提供基于设计令牌、易于访问、达到企业级标准的组件库。

渲染上下文

编写代码前，先确定输出目标。

HTML 成品（无构建流程）

使用 CDN 提供的预构建 CSS。在 <head> 中添加：

<link rel="stylesheet" href="https://unpkg.com/@carbon/styles/css/styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;600&display=swap" />

将 Carbon 类应用于 HTML 元素。请参阅 references/html-classes.md。

React 成品

@carbon/react 不在 Claude 的默认成品环境中。对于 React 成品，请加载上述 CDN CSS，并将 Carbon 类名应用于标准 HTML/JSX 元素。视觉效果相同。

完整项目（创建文件）

npm install @carbon/react sass

import { Button } from '@carbon/react';
// Styles: @use '@carbon/react'; in root SCSS

需要 Dart Sass。所有样式、组件和图标都包含在单个 @carbon/react 包中。

设计基础

排版

始终使用 IBM Plex。不得替换。

角色	字体系列	字重
正文、UI	IBM Plex Sans	300, 400, 600
代码	IBM Plex Mono	400, 600
编辑内容	IBM Plex Serif	300, 400, 600

颜色主题

主题	背景	上下文
White	`#ffffff`	默认浅色
g10	`#f4f4f4`	柔和浅色
g90	`#262626`	深色
g100	`#161616`	高对比度深色

主要操作：Blue 60 #0f62fe。完整调色板请参阅 references/tokens.md。

间距

基础网格为 8px，最小单位为 2px。组件间距：2、4、8、12、16、24、32、40、48 px。布局间距：16、24、32、48、64、96、160 px。

2x 网格

断点	宽度	列数	外边距
sm	320px	4	0
md	672px	8	16px
lg	1056px	16	16px
xlg	1312px	16	16px
max	1584px	16	24px

网格类：cds--grid、cds--row、cds--col、cds--col-sm-N、cds--col-md-N、cds--col-lg-N。

动效

令牌	时长	用途
fast-01	70ms	微交互
fast-02	110ms	切换、展开
moderate-01	150ms	按钮、字段
moderate-02	240ms	模态框、下拉菜单
slow-01	400ms	页面过渡
slow-02	700ms	复杂编排

标准缓动：cubic-bezier(0.2, 0, 0.38, 0.9)。进入：cubic-bezier(0, 0, 0.38, 0.9)。退出：cubic-bezier(0.2, 0, 1, 0.9)。

参考资料

组件 HTML 类和用法：references/html-classes.md
完整设计令牌值：references/tokens.md

构建特定组件或需要精确令牌值时，请阅读相应参考资料。

实现检查清单

已加载 IBM Plex（至少加载 Sans；代码使用 Mono）
已应用主题类：cds--white、cds--g10、cds--g90 或 cds--g100
使用正确的前缀：cds--（v11）。切勿使用 bx--（v10 旧版）
网格布局：cds--grid > cds--row > cds--col-*
间距仅使用指定比例中的值，不使用任意像素值
保留焦点状态：2px 蓝色轮廓
按角色使用颜色令牌，而非原始十六进制值
图标使用 Carbon 尺寸：16、20、24、32px

常见模式

页面框架

<div class="cds--white" style="min-height:100vh">
  <header class="cds--header" role="banner">
    <a class="cds--header__name" href="#">[App Name]</a>
  </header>
  <div class="cds--grid" style="padding-top:3rem">
    <div class="cds--row">
      <div class="cds--col-lg-3"></div>
      <div class="cds--col-lg-13"></div>
    </div>
  </div>
</div>

主题嵌套

<div class="cds--g100"></div>
<div class="cds--white"></div>

数据仪表板

将 cds--tile 容器用于指标卡片，并使用 cds--data-table 展示表格数据；所有内容均置于 2x 网格中。

反模式

使用非 IBM Plex 字体
使用 bx-- 前缀（v10；v11 请使用 cds--）
使用任意边框半径（Carbon 默认值为 0px，仅标签/药丸形元素使用 4px）
对规范中未定义阴影的组件添加投影
覆盖焦点环样式
使用 Carbon 调色板之外的颜色
使用比例之外的间距值

支持 Markdown

登录后评论