使い方ガイドへスキップ
color-expert作者 David Aerne

Color Expert スキル。

Claude Code と Codex 向けのブランド・デザインシステム作業用スキル:色の命名、色彩理論、色空間、パレット、ランプ、グラデーション、色変換、コントラストに対応します。

  • ブランドとデザインシステム
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
アップストリームファイルから 2026-09-14 に読み込まれた Front matter とセクション見出し · 全文 31,055 文字

01 できること

Claude CodeとCodexにおいてcolor-expertスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

color-expertは、命名、理論、色空間、パレット、ランプ、グラデーション、変換、アクセシビリティ、顔料の混色を扱うデザイナーや開発者向けの色に関するナレッジベースです。リクエストを5つのモード(具体的なデザイン/アートプロジェクト、デザインシステムのランプとテーマトークン、ジェネラティブアート、一般的な色に関する質問、パレットジェネレーターの構築)のいずれかに振り分け、その register に応じて回答します。

タスクと色空間の対応表(知覚的な作業にはOKLCH、印刷にはCIELAB D50、メディア間のマッチングにはCAM16、顔料にはKubelka-Munk)、281兆通りの16進数ペアに基づくAPCAとWCACの合格率、ガマットマッピングのガイダンス、CSS Color 4/5のチートシート、精選されたツールリストを備えており、140以上のリファレンスファイルがreferences/INDEX.mdの下にインデックス化されています。

生成されるもの

  • 一般的な理論ではなく、明示された制約条件に合わせた具体的なツールとパレットの推奨。
  • リファレンストークンからsurface、on-surface、accent、success、warning、dangerといったセマンティックロールへ供給されるトークングラフ。
  • sRGBおよびDisplay-P3向けに、構造上ガマット内に収まるように生成された、連続的・発散的なデータビジュアライゼーション用ランプ。
プロンプト例を見る ↗

仕組み

  1. 01
    リクエストを5つのモードのいずれかに振り分ける

    このファイルは5つの一般的なモードを列挙し、すべての色に関する質問に同じように答えるのではなく、ユーザーの明示的なリクエストとコンテキストから暗示される制約条件に応じて回答を合わせるようエージェントに指示します。

  2. 02
    一般的な質問にはファイルから直接回答する

    OKLCHとは何か、なぜグラデーションが灰色っぽくなるのかといった質問には、スキルファイルまたはリファレンスインデックスから直接回答し、関連するリファレンスを引用します。ユーザーが具体的な方法を尋ねない限り、ツールの使用は省きます。

  3. 03
    まずOKLCHでスケールを構築する

    デザインシステム、ランプ、テーマトークンについては、優先順位はOKLCHから始まります。これにより、色相を通じて明度が一貫し、中間トーンが濁ることを防ぎます。

  4. 04
    UIで使用する前にセマンティックレイヤーを挿入する

    プログラムやスタイルシートで使用する色は、セマンティックレイヤーの背後に配置する必要があります。リファレンストークンが具体的な値を保持し、セマンティックトークンがその値に意味をマッピングします。

  5. 05
    絞り込む前に複数のパレットアプローチを提示する

    パレットを生成または比較する際、スキルはまず複数のアプローチをそのトレードオフとともに示す必要があります。なぜなら、アンカーベース、色相サイクル、コサイン、ハーモニーベース、シーン照明、抽出といったアプローチはそれぞれ異なる問題に適しているからです。

02 適合性を確認

color-expert スキルを使用する場合

この種のブランドおよびデザインシステムの作業では、Claude Code または Codex で color-expert スキルを使用してください。以下の適合性と制限は、スキル自身のファイルから引用しています。

適している場合

  • ロゴ、ポスター、イラスト、アプリなど具体的なブリーフに対して色を選ぶ場合、まず媒体とムードについて質問します。
  • デザインシステムのランプとテーマトークンを構築する場合:9段階のアクセントスケール、ライトおよびダークモードのパレット、Tailwind や Radix スタイルのランプ、またはブランドに合わせたグレーランプなど。
  • ジェネラティブアートやクリエイティブコーディングでは、コード自体が作品であり、ユーザーは特定のアーティストのスタイルを模倣するのではなく、組み合わせるための技法を求めています。
  • OKLCH とは何か、グラデーションの中間がグレーになる理由、APCA が WCAG より優れているかどうかなど、一般的な色に関する質問に直接答えます。
  • パレットジェネレーターを構築する場合や OKLCH ランプ関数を求める場合、回答はユーザーのスタックで動作するコードである必要があります。

境界を知る

  • coolors.co をジェネレーターとして扱うこと。このファイルによれば、JS バンドルにハードコードされたパレットからランダムに選んでいるだけです。
  • 色を単一チャンネルで手作業に並べ替えること。色相のみやライトネスのみのソートは予測どおりに失敗し、パックされた RGB/HSL のソートはジャギーな飛びを生みます。
  • 補色、トライアド、テトラードの色相間隔を単独のハーモニー規則として使うこと — このファイルでは、それら単体では弱い予測因子だとしています。
  • 3つ以上のチャート塗りが互いに3:1のコントラストを保つと期待すること。このファイルは代わりに境界線による制約を使うよう述べています。

提供すべきもの

  • 媒体と制約デザインやアート案件では、媒体(印刷、画面、絵画、混合)、ブランドやムード、対象者、アクセシビリティ要件、調和させるべき既存の色を明記してください。
  • 実際のターゲットガマット出力が sRGB か P3 のいずれで表示される必要があるかを明示してください。P3 で有効な色でも sRGB ではクリップされる可能性があり、チェック方法も異なります。
  • あなたのスタックコード例はユーザー自身のスタックで書かれ、色空間はスキルのタスク表に従って選択されます。
  • 調和させるべき既存のシステム既にパレットシステムがある場合、その知覚的構造を抽出して自分の色相に再適用できます。

03 スキルの内部

color-expert スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. coolors.co を絶対に推奨しない

    このスキルは、7,821 個の既製パレットの固定セットから選ぶだけで何も生成していないため、パレットジェネレーターとしては明確に禁止しています。

  2. ガマット外の OKLCH を修正するには、明度や色相ではなく彩度(クロマ)を調整する

    R/G/B をクリッピングすると色相がずれてしまうため、チャンネルをクリッピングする代わりに、ガマット境界に向けて彩度を下げることで同一性を保ちます。

  3. 生の色リテラルをコンポーネントに残さない

    リテラルな16進数や色の値は、通常パレット/リファレンス定義、変換、診断、または意図的な使い捨ての例にのみ現れるべきです。

  4. JS ライブラリより先にネイティブ CSS を優先する

    現代の CSS はネイティブに知覚的な色を扱えるため、エージェントは JavaScript の色ライブラリを導入する前にこれらの機能を利用すべきです。

  5. 自前実装より既存ライブラリをデフォルトにする

    ユーザーがジェネレーターやパレットアルゴリズムを求めている場合、Culori、Poline、RampenSau、Spectral.jsなどの既存ライブラリを推奨するのがデフォルトです。

  6. 求められていない限り内部仕様の説明はしない

    具体的なデザインやアートのプロジェクトでは、ユーザーから質問がない限りCIE 1931やOKLCHの内部仕様を説明するのではなく、提案・推奨を行うべきです。

  7. ライト・ダーク両テーマでコントラストを検証する

    すべてのテキストと背景の組み合わせは、ライトモードとダークモードの両方でAPCAまたはWCAGに対してチェックする必要があります。

  8. リテラルを固定せず、導出をエンコードする

    読みやすい前景色、OKLCHでのベーストークンからのホバー、最も近い名前付き色相など、制約から導出できる決定については、システムは一つの手動の選択ではなくルールを出力するべきです。

04 実際に使う

Claude Code または Codex に color-expert をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに color-expert を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスを文書化している場合があります。

最初のブランドおよびデザインシステムの作業タスクをスキルに与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • WCAGまたはAPCAでコントラストを確認し、テキストサイズ、太さ、極性、CVD(色覚多様性)を考慮してください。グレースケール変換は妥当性の確認にすぎません。
  • 連続的なランプの場合、隣接するサンプル間の知覚的なステップサイズをプロットし、カラーとグレースケールの両方で平坦な線になることを求めてください。
  • グレースケールは明度の分離を素早く確認するためだけに使用し、アクセシビリティの証明としては使わないでください。
  • ガマット外の色は、単純なRGBクランピングではなく、LとHを保持するクロマクランピングでマッピングしてください。
  • Color Buddyを使って、生成したパレットをWCAG、CVD、識別性、公平性、印象に関するルールに対して検査してください。
  • 既存のパレットを、色覚多様性をシミュレートした状態でのJND(弁別可能差)の衝突について検査してください。

OpenDesignではcolor-expertがバンドルされています:Plugins → Skillsから上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/meodai/skill.color-expert ブランチ main
スキルファイル
SKILL.md 検証時に記録されたコンテンツチェックサム。コミット 6514810
License
CC-BY-4.0 LICENSEより
リポジトリスター数
575 meodai/skill.color-expert リポジトリ全体の GitHub スナップショット(2026年9月14日取得)。color-expert の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱(2026-08-28 確認)。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. このスキルの使い方5つの応答モード:デザインプロジェクト、デザインシステム、ジェネレーティブアート、一般的な質問、ジェネレーター構築。
  2. カラースペース — いつ何を使うかタスクとスペースの対応表:知覚のためのOKLCH、印刷用のCIELAB D50、クロスメディア用のCAM16、J
スキル自身による説明
「色の命名、色彩理論、色空間、色の定義、またはカラーナレッジに関わるあらゆるタスク(パレット、ランプ、グラデーション、変換、アクセシビリティ、知覚的マッチング、顔料混合、印刷対画面の色、CSS カラー構文、歴史的な色の用語)で使用します。ユーザーが色を選択、比較、生成、命名、変換、または説明している場合は、たとえ明示的に「色彩理論」を求めていなくても、このスキルを使用してください。」

SKILL.md の前付け説明文。完全なファイルは約31,055文字です。GitHubで完全なファイルを読む。

Color Expert

実際のブランドおよび design-system 作業タスクで color-expert を実行します。

color-expert スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

ターミナル
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert