Communitygithub.com

borghei/ui-design-system

デザイントークンの生成、カラーパレットの作成、タイポグラフィスケールの計算、コンポーネントシステムの構築、および開発者向けハンドオフドキュメントの準備を行います。

ui-design-system とは？

このスキルは、ブランドカラーから完全なデザインシステムを生成するための包括的なツールです。主な機能として、デザイントークンの生成（色、タイポグラフィ、スペーシング、ボーダー、シャドウ、アニメーション、ブレークポイントなど）、カラーパレットの作成、モジュラースケールに基づくタイポグラフィシステムの計算、8ptグリッドベースのスペーシングシステムの構築、アトミックデザインに基づくコンポーネントアーキテクチャの定義、そしてCSSカスタムプロパティ、SCSS変数、JSON（Tailwind/styled-components/Figma用）への出力をサポートします。また、WCAGコントラスト（AA/AAA）の検証、レスポンシブデザインのための流体タイポグラフィとブレークポイントの計算、React、Tailwind CSS、styled-componentsなどのフレームワークとの統合例も提供します。このスキルは、設計と開発のギャップを埋め、デザインシステムの一貫性を確保し、開発者のハンドオフプロセスを効率化したいUI/UXデザイナーやフロントエンド開発者に特に役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/borghei/Claude-Skills/tree/HEAD/product-team/ui-design-system
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

UIデザインシステム

デザイントークンの生成、カラーパレットの作成、タイポグラフィスケールの計算、コンポーネントシステムの構築、および開発者向けハンドオフドキュメントの準備を行います。

目次

トリガー用語

このスキルは、以下のような状況で使用します：

  • 「デザイントークンを生成」
  • 「カラーパレットを作成」
  • 「タイポグラフィスケールを構築」
  • 「スペーシングシステムを計算」
  • 「デザインシステムを作成」
  • 「CSS変数を生成」
  • 「SCSSトークンをエクスポート」
  • 「コンポーネントアーキテクチャを設定」
  • 「コンポーネントライブラリを文書化」
  • 「レスポンシブブレークポイントを計算」
  • 「開発者向けハンドオフを準備」
  • 「ブランドカラーをパレットに変換」
  • 「WCAGコントラストを確認」
  • 「8ptグリッドシステムを構築」

まず明確にする

トークンやシステムを生成する前に、以下の入力を確定します。入力が不足している、または曖昧で結果が変わる場合は質問し、そうでない場合は適切なデフォルト値を使用して、使用したデフォルト値を明示します。

  • ブランドプライマリカラー（16進数）： 完全なパレットのシード（カラースケールとWCAGコントラストチェックを駆動）
  • スタイルプリセット： modern、classic、playful（フォント、ボーダー半径、シャドウスタイルを設定）
  • 出力形式とフレームワーク： CSS、SCSS、JSON（Tailwind/styled-components/Figma用）（エクスポートと開発者向けハンドオフを駆動）

リスト全体ではなく、このリクエストに最も重要な2〜3の入力について質問します。ユーザーがすぐに結果を希望する場合は、結果を生成し、冒頭で使用した前提条件を明示します。

ワークフロー

ワークフロー1：デザイントークンの生成

状況： ブランドカラーがあり、完全なデザイントークンシステムが必要です。

手順：

  1. ブランドカラーとスタイルを特定

    • ブランドプライマリカラー（16進数形式）
    • スタイルの好み：modern | classic | playful

  2. スクリプトを使用してトークンを生成

    python scripts/design_token_generator.py "#0066CC" modern json

  3. 生成されたカテゴリを確認

    • 色：プライマリ、セカンダリ、ニュートラル、セマンティック、サーフェス
    • タイポグラフィ：fontFamily、fontSize、fontWeight、lineHeight
    • スペーシング：8ptグリッドベースのスケール（0-64）
    • ボーダー：radius、width
    • シャドウ：noneから2xl
    • アニメーション：duration、easing
    • ブレークポイント：xsから2xl

  4. ターゲット形式でエクスポート

    # CSSカスタムプロパティ
python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css

# SCSS変数
python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss

# Figma/ツール用のJSON
python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json

  5. アクセシビリティを検証

    • カラーコントラストがWCAG AA（通常テキスト4.5:1、大きいテキスト3:1）を満たしていることを確認
    • セマンティックカラーにコントラストカラーが定義されていることを確認

ワークフロー2：コンポーネントシステムの作成

状況： デザイントークンを使用してコンポーネントライブラリを構造化する必要があります。

手順：

  1. コンポーネント階層を定義

    • アトム：Button、Input、Icon、Label、Badge
    • 分子：FormField、SearchBar、Card、ListItem
    • 有機体：Header、Footer、DataTable、Modal
    • テンプレート：DashboardLayout、AuthLayout

  2. トークンをコンポーネントにマッピング

    コンポーネント使用するトークン
    Buttoncolors、sizing、borders、shadows、typography
    Inputcolors、sizing、borders、spacing
    Cardcolors、borders、shadows、spacing
    Modalcolors、shadows、spacing、z-index、animation

  3. バリアントパターンを定義

    サイズバリアント：

    sm: height 32px、paddingX 12px、fontSize 14px
md: height 40px、paddingX 16px、fontSize 16px
lg: height 48px、paddingX 20px、fontSize 18px

    カラーバリアント：

    primary: 背景色 primary-500、テキスト色 white
secondary: 背景色 neutral-100、テキスト色 neutral-900
ghost: 背景色 transparent、テキスト色 neutral-700

  4. コンポーネントAPIを文書化

    • 型を持つPropsインターフェース
    • バリアントオプション
    • 状態処理（hover、active、focus、disabled）
    • アクセシビリティ要件

  5. 参照： references/component-architecture.mdを参照

ワークフロー3：レスポンシブデザイン

状況： ブレークポイント、流体タイポグラフィ、またはレスポンシブスペーシングが必要です。

手順：

  1. ブレークポイントを定義

    名前幅ターゲット
    xs0小型スマートフォン
    sm480px大型スマートフォン
    md640pxタブレット
    lg768px小型ノートPC
    xl1024pxデスクトップ
    2xl1280px大画面

  2. 流体タイポグラフィを計算

    計算式：clamp(min、preferred、max)

    /* ビューポート320pxから1200pxの間で16pxから24px */
font-size: clamp(1rem、0.5rem + 2vw、1.5rem);

    事前計算されたスケール：

    --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  3. レスポンシブスペーシングを設定

    トークンモバイルタブレットデスクトップ
    --space-md12px16px16px
    --space-lg16px24px32px
    --space-xl24px32px48px
    --space-section48px80px120px

  4. 参照： references/responsive-calculations.mdを参照

ワークフロー4：開発者向けハンドオフ

状況： デザイントークンを開発チームに引き渡す必要があります。

手順：

  1. 必要な形式でトークンをエクスポート

    # CSSプロジェクト用
python scripts/design_token_generator.py "#0066CC" modern css

# SCSSプロジェクト用
python scripts/design_token_generator.py "#0066CC" modern scss

# JavaScript/TypeScript用
python scripts/design_token_generator.py "#0066CC" modern json

  2. フレームワーク統合を準備

    React + CSS変数：

    import './design-tokens.css';

<button className="btn btn-primary">クリック</button>

    Tailwind設定：

    const tokens = require('./design-tokens.json');

module.exports = {
  theme: {
    colors: tokens.colors,
    fontFamily: tokens.typography.fontFamily
  }
};

    styled-components：

    import tokens from './design-tokens.json';

const Button = styled.button`
  background: ${tokens.colors.primary['500']};
  padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
`;

  3. Figmaと同期

    • Tokens Studioプラグインをインストール
    • design-tokens.jsonをインポート
    • トークンはFigmaスタイルと自動的に同期

  4. ハンドオフチェックリスト

    • トークンファイルがプロジェクトに追加された
    • ビルドパイプラインが設定された
    • テーマ/CSS変数がインポートされた
    • コンポーネントライブラリが調整された
    • ドキュメントが生成された

  5. 参照： references/developer-handoff.mdを参照

ツールリファレンス

design_token_generator.py

ブランドカラーから完全なデザイントークンシステムを生成します。

引数値デフォルト説明
brand_color16進色#0066CCブランドのプライマリカラー
stylemodern、classic、playfulmodernデザインスタイルプリセット
formatjson、css、scss、summaryjson出力形式

例：

# JSONトークンを生成（デフォルト）
python scripts/design_token_generator.py "#0066CC"

# クラシックスタイルでCSS出力
python scripts/design_token_generator.py "#8B4513" classic css

# プレイフルスタイルでサマリー表示
python scripts/design_token_generator.py "#FF6B6B" playful summary

出力カテゴリ：

カテゴリ説明主な値
colorsカラーパレットprimary、secondary、neutral、semantic、surface
typographyフォントシステムfontFamily、fontSize、fontWeight、lineHeight
spacing8ptグリッド0-64スケール、セマンティック（xs-3xl）
sizingコンポーネントサイズcontainer、button、input、icon
bordersボーダー値radius（スタイル別）、width
shadowsシャドウスタイルnoneから2xl、inner
animationモーショントークンduration、easing、keyframes
breakpointsレスポンシブxs、sm、md、lg、xl、2xl
z-indexレイヤーシステムbaseからnotification

クイックリファレンス表

カラースケール生成

ステップ明度彩度ユースケース
5095% 固定30%微妙な背景
10095% 固定38%明るい背景
20095% 固定46%ホバー状態
30095% 固定54%ボーダー
40095% 固定62%無効状態
500オリジナル70%ベース/デフォルト色
600オリジナル × 0.878%ホバー（ダーク）
700オリジナル × 0.686%アクティブ状態
800オリジナル × 0.494%テキスト
900オリジナル × 0.2100%見出し

タイポグラフィスケール（1.25倍率）

サイズ値計算式
xs10px16 ÷ 1.25²
sm13px16 ÷ 1.25¹
base16pxベース
lg20px16 × 1.25¹
xl25px16 × 1.25²
2xl31px16 × 1.25³
3xl39px16 × 1.25⁴
4xl49px16 × 1.25⁵
5xl61px16 × 1.25⁶

WCAGコントラスト要件

レベル通常テキスト大きいテキスト
AA4.5:13:1
AAA7:14.5:1

大きいテキスト：≥18pt 通常 または ≥14pt 太字

スタイルプリセット

側面ModernClassicPlayful
フォント サンInterHelveticaPoppins
フォント モノFira CodeCourierSource Code Pro
半径 デフォルト8px4px16px
シャドウレイヤー、控えめ単一レイヤーソフト、明確

ナレッジベース

references/ 内の詳細なリファレンスガイド：

ファイル内容
token-generation.mdカラーアルゴリズム、HSV空間、WCAGコントラスト、タイプスケール
component-architecture.mdアトミックデザイン、命名規則、プロップスパターン
responsive-calculations.mdブレークポイント、流体タイポグラフィ、グリッドシステム
developer-handoff.mdエクスポート形式、フレームワークセットアップ、Figma同期

検証チェックリスト

トークン生成

  • ブランドカラーが16進数形式で提供されている
  • スタイルがプロジェクト要件と一致している
  • すべてのトークンカテゴリが生成されている
  • セマンティックカラーにコントラスト値が含まれている

コンポーネントシステム

  • すべてのサイズが実装されている（sm、md、lg）
  • すべてのバリアントが実装されている（primary、secondary、ghost）
  • すべての状態が機能している（hover、active、focus、disabled）
  • デザイントークンのみを使用している（ハードコードされた値なし）

アクセシビリティ

  • カラーコントラストがWCAG AAを満たしている
  • フォーカスインジケーターが表示される
  • タッチターゲットが44×44px以上である
  • セマンティックなHTML要素が使用されている

開発者向けハンドオフ

  • トークンが必要な形式でエクスポートされた
  • フレームワーク統合が文書化された
  • デザインツールと同期した
  • コンポーネントのドキュメントが完了した

トラブルシューティング

問題原因解決策
生成された色がWCAGコントラストに不合格ブランドカラーが明るすぎる、または彩度が高すぎる明るい背景には暗い色合い（600+）を使用する；コントラストツールで確認する
トークンエクスポートに誤った値がある引数の形式またはカラー構文が間違っている16進色を引用符で囲む（例："#0066CC"）；形式がjson、css、またはscssであることを確認する
タイポグラフィスケールが大きすぎる/小さすぎるデフォルトの1.25倍率がデザインに合わないDesignTokenGeneratorクラスのtype_scale_ratioを変更する（1.125でよりタイトに、1.333でよりルーズに）
SCSS変数が既存のものと競合するトークン名の衝突すべてのトークンにプロジェクトの名前空間をプレフィックスとして付ける（エクスポート関数を編集）
デザインツールで異なる色が表示されるカラースケール生成での16進数の丸めJSONエクスポートを信頼できる情報源として使用する；Tokens Studioプラグインと同期する
スペーシング値がグリッドと合わないカスタムスペーシングが8ptグリッドと混在している生成されたスペーシングシステムからの値のみを使用する；任意のピクセル値を避ける
シャドウトークンがダークモードで正しく見えないシャドウが明るい背景用に設計されているより薄い不透明度の値を持つ、別のダークモード用シャドウトークンを作成する

成功基準

基準目標測定方法
トークンの一貫性コードベース内にハードコードされた色/スペーシング値がゼロLintルール違反数
WCAG AA準拠すべてのテキスト色が4.5:1のコントラスト比を満たす自動コントラストチェッカーまたは手動監査
エクスポート形式のカバレッジCSS、SCSS、JSONがすべて正しく生成される各形式でジェネレーターを実行；出力を検証
デザイン-開発同期トークン更新からコードデプロイまで24時間未満Figmaの変更から本番環境までの時間
コンポーネントトークンカバレッジ100%のコンポーネントがデザイントークンを使用コンポーネントスタイルをハードコード値について監査
タイポグラフィの一貫性すべてのテキストがデザインシステムのタイプスケールを使用全ページでビジュアル監査
レスポンシブ動作流体タイポグラフィがすべてのブレークポイントで機能xs、sm、md、lg、xl、2xlの幅でテスト

範囲と制限

対象範囲：

  • ブランドカラーからの完全なデザイントークン生成
  • カラーパレット生成（プライマリ、セカンダリ、ニュートラル、セマンティック）
  • モジュラースケールを使用したタイポグラフィシステム
  • 8ptグリッドベースのスペーシングシステム
  • コンポーネントサイズ、ボーダー、シャドウ、アニメーショントークン
  • CSSカスタムプロパティ、SCSS変数、JSONへのエクスポート
  • レスポンシブブレークポイントの定義
  • WCAGコントラストリファレンステーブル

対象外：

  • ダークモードトークン生成（別のパレットマッピングが必要）
  • アニメーション/モーションデザインライブラリ
  • アイコンシステム生成
  • ランタイムテーマ切り替えの実装
  • FigmaプラグインまたはAPI統合（Tokense Studioを使用）
  • ビジュアルリグレッションテスト
  • デザインからコードへの変換（Figma Dev ModeまたはLocofyを使用）

統合ポイント

…

[翻訳のために省略]

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

borghei/brand-strategist

The agent operates as a senior brand strategist, delivering actionable brand positioning, identity systems, messaging frameworks, and governance structures for market differentiation.

borghei/ux-researcher-designer

Generate user personas from research data, create journey maps, plan usability tests, and synthesize research findings into actionable design recommendations.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community