mcpField
C
carbon-design-system

carbon-design-system

github.com/fefogarciaデザイン・UI262 回インストール37 週間前に更新
リポジトリ

carbon-design-system について

IBM Carbon Design System v11 に沿った UI を構築する開発者向けのデザインスキルです。コンポーネントの使い方に加え、テーマ、文字、グリッド、余白、動き、アクセシビリティの規則をまとめています。

主な機能

  1. 01Carbon v11 のコンポーネントとクラスの指針
  2. 02IBM Plex のタイポグラフィ規則
  3. 03テーマとカラーのトークン
  4. 04グリッドと余白の仕様
  5. 05モーションとアクセシビリティの要件

活用シーン

  1. 01Carbon の仕様に沿った HTML UI の構築
  2. 02React プロジェクトへの Carbon スタイル適用
  3. 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" />

HTML 要素に Carbon クラスを適用します。references/html-classes.md を参照してください。

React アーティファクト

@carbon/react は Claude のデフォルトのアーティファクト環境には含まれていません。React アーティファクトでは、上記の CDN CSS を読み込み、標準の HTML/JSX 要素に Carbon のクラス名を適用してください。視覚的な出力は同一です。

フルプロジェクト（ファイル作成）
npm install @carbon/react sass

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

Dart Sass が必要です。スタイル、コンポーネント、アイコンはすべて、単一の @carbon/react パッケージに含まれています。

デザインの基礎

タイポグラフィ

常に IBM Plex を使用してください。代替フォントは使用しないでください。

役割ファミリーウェイト
本文、UIIBM Plex Sans300, 400, 600
コードIBM Plex Mono400, 600
エディトリアルIBM Plex Serif300, 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 グリッド
ブレークポイント幅列数マージン
sm320px40
md672px816px
lg1056px1616px
xlg1312px1616px
max1584px1624px

グリッドクラス：cds--grid、cds--row、cds--col、cds--col-sm-N、cds--col-md-N、cds--col-lg-N。

モーション
トークン継続時間用途
fast-0170msマイクロインタラクション
fast-02110ms切り替え、展開
moderate-01150msボタン、フィールド
moderate-02240msモーダル、ドロップダウン
slow-01400msページ遷移
slow-02700ms複雑なアニメーション

標準のイージング：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

特定のコンポーネントを構築する場合や、正確なトークン値が必要な場合は、適切なリファレンスを読んでください。

実装チェックリスト

  1. IBM Plex を読み込み済み（最低限 Sans、コードには Mono）
  2. テーマクラスを適用：cds--white、cds--g10、cds--g90、または cds--g100
  3. 正しいプレフィックス：cds--（v11）。bx--（v10 の旧形式）は使用しない
  4. グリッドレイアウト：cds--grid > cds--row > cds--col-*
  5. 余白はスケール内の値のみを使用し、任意のピクセル値は使用しない
  6. フォーカス状態を維持 — 2px の青いアウトライン
  7. 色は生の hex 値ではなく、トークンを介して役割ごとに指定
  8. アイコンは 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 対応