Communitygithub.com

getrdone/カラーパレット構成

インテリア、グラフィック、ブランド、Webページ、インターフェース、データ表示、印刷物向けに、注目を集めるカラーテーマの作成、改訂、批評、文書化を行います。単一の色選択ではなく、調整されたパレット、配色、比率、配置、混合、視覚的階層が必要な際に使用します。

カラーパレット構成 とは?

このスキルは、単に見た目の良いスウォッチを並べるのではなく、注意の分散を制御したカラーパレットを構築するための体系的なワークフローを提供します。色相よりも視覚的重み(面積、彩度、局所コントラスト、温度、孤立)を優先し、Ittenの7つのコントラストとMunsellのHVC(色相・明度・彩度)体系を必須の二面的手法として適用します。対応プラットフォームはCodex(GPT-5ベース)で、インテリア、グラフィック/エディトリアル、UI、データ可視化、印刷など多様なメディアに対応します。このスキルは、中核となる構成ワークフローに加え、メディア別適用、スターターキット、検証・ハンドオフというモジュール式の参照構造を持ち、タスクに必要な部分だけを選択的に読み込むことで効率を高めます。色の命名規則にも厳格で、公式名の保持、説明的なカノニカル名の付与、セマンティックロールとの分離を要求し、最終的にはYAML形式の構造化ハンドオフによってデザイントークンや検証プロセスへ確実に引き継ぎます。

対応~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/getrdone/agent-skills/tree/main/skills/color-palette-composition

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

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

ドキュメント

カラーパレット構成 は何をしますか?

魅力的なスウォッチを並べるのではなく、注意の分散を制御した構成を構築します。色相は視覚的重み(面積、彩度、局所コントラスト、温度、孤立)に次ぐ要素であり、これらがパレットのまとまりを決定します。

これは、パレット/テーマを生成または実質的に改訂するための標準スキルです。他のシステムがソースの制約、ストーリー、セマンティックロール、実装トークン、解釈エビデンスを提供することはありますが、この構成ワークフローを代替するものではありません。

タスクに必要なものだけを読み込む

実質的な新規テーマまたは改訂テーマには、コア構成 を必ず読んでください。その後、該当するモジュールのみを正確に読み込みます:

必要なもの読むもの
インテリア、グラフィック/エディトリアル、UI、データ表示、印刷物への配置メディア適用
開始例や名前付きハーモニーパターンスターターキット
正式な引き継ぎ、コントラスト/制作検証、来歴、デザイントークンブリッジ検証とハンドオフ

日常的な批評のためにスターターキットを読み込まないでください。また、タスクがパレットタスクだからといってすべてのモジュールを読み込まないでください。コアは常に必須ですが、追加モジュールによって、ルーチンリクエストのコストを増やすことなくスキルを正確にします。

ブリーフから始める

メディア、意図するムードとオーディエンス、ソース/ストーリー、固定色または素材、照明/出力条件、アクセシビリティ要件、および1つの注意対象を特定します。ロックされた色は正確に保持します。重要な値を official、extracted、harmonized、または semantic としてラベル付けします。派生スウォッチは誤ったブランド標準になってはいけません。

「primary」が曖昧になる可能性がある場合は、field / partner / spark を使用します。部屋やエディトリアル構成では、最も大きな色が一般的に field です。UI では primary は多くの場合、小さく強調度の高いアクション色を意味します。広範なロールには canvas、surface、on-* を使用します。

テーマに対する必須の二面的手法

実質的な提案カラースキームまたはテーマごとに、両方のレンズを適用して報告します。名前付きハーモニーやレシピだけでは不十分です。

  1. Itten: 構成作業を行っている7つのコントラスト(色相、明暗、寒暖、補色、同時、彩度、または拡張)のうち1つまたは2つを指定します。2つの彩色領域が共存する場合、等面積を仮定せずに拡張判断を行います。
  2. Munsell: ファミリーを構築するHVCパス(垂直方向の明度、水平方向の色相、またはグレーを通って反対側へ向内)を指定し、次に明度-彩度補正を行います。小さな高彩度色は、はるかに大きな低彩度フィールドとバランスをとることができます。パーセンテージだけではバランスになりません。
  3. 視覚的重み: 重み ≒ 面積 × 彩度 × 局所コントラスト として評価します。温度と孤立はそれを増幅または減衰させます。これは方向性を示すデザインヒューリスティックであり、物理計算ではありません。
  4. 人間による読み取り: 使用したIttenとMunsellのパターン、それらが何を変えたか、そして人間がそれらを調査できる理由を説明する1~2文の theory_summary を含めます。

必須の命名契約

ハンドオフの前にこれを適用します。Design Directives がトークンアーキテクチャを所有します。このスキルはそれに供給するパレット動作を必要とします。

  • 完成したテーマとカノニカル/ストーリースウォッチに、簡潔で示唆に富み、ソース固有の名前(通常1~3語)を付けます。実際のデザイン色を Orange 1 や Dark Blue と呼ばないでください。
  • 公式の製造元またはブランドの色名は正確に保持し、詩的な別名に置き換えずに official として記録します。
  • カノニカルなストーリー名をセマンティックロール別名とは別に保ちます。例:Flame は --flame にマップできますが、--color-primary や action はその実装上の役割を表します。ロールは色のストーリー名を変更せずに変わることがあります。
  • 特徴的なグラデーションには、それが生み出すイメージ/ストーリーから名前を付け(Fire Core、Wing Sweep)、決して Gradient 1 とはしないでください。一般的な構築ラベルは暫定的なものにすぎません。
  • 提供されたソースが汎用的な名前を使用している場合、ソースラベルを来歴に保持し、ロック/公式でない場合にのみ、示唆に富むカノニカル名を提案します。

高速ワークフロー

  1. 最初に値の構造を構築します:読み取り可能なフィールド+インク/オンカラー。グレースケールで機能しないデザインは、未解決の階層を持っています。
  2. 1つの注意対象を選びます。彩度、値のコントラスト、暖色/寒色のコントラスト、孤立、またはスケールにおいて最も強力な利点を与えます。すべての要素に与えるわけではありません。
  3. 注意主導のエディトリアル/キャンペーン/ルーム作業には 70/20/10 を、密度が高く洗練された情報主導の作業には 80/15/5 を検討します。これらは好ましい最初の試行であり、ルールではありません。視覚的重みの理由とともに別の分割を使用します。60/30/10 は、そのバランスの取れたインテリアバイアスが適合する場合にのみ使用します。
  4. field、partner、spark、neutral/on-color、およびセマンティック状態ロールを割り当てます。それらをサーフェスやコンポーネントにマッピングします。
  5. IttenコントラストとMunsell HVC/値-彩度の判断を適用します。無関係な色相をインポートする前に、関連するファミリーを構築します。
  6. 2秒フォーカルテスト、コントラスト/非色覚キューチェック、およびメディア/出力テストを実行します。

譲れないセーフガード

  • 60/30/10 は文書化されたインテリアの慣習であり、グローバルなデフォルトや科学法則ではありません。
  • コントラストに失敗したロックされたブランドカラーは、ロールを変更します。ロックされていない派生色は、値/彩度、ロール、またはその両方を変更できます。
  • 色だけでステータス、カテゴリ、アクション、またはエラーを伝えてはいけません。必要に応じて、言葉、アイコン、形状、パターン、位置、または下線を追加します。
  • スクリーンのHEXを塗料の配合やプロダクションCMYK仕様として扱わないでください。出力プロファイルを使用して校正刷りを確認し、設置された照明下および固定素材の横で塗料サンプルをテストします。
  • スターターレシピは方向性であり、デフォルトのブランドではありません。現在のソースから名前を変更し、再導出します。

必須のハンドオフ

実質的なパレットレスポンスには、該当するものを以下のように含めます:

palette:
  medium: interior | graphic | ui | data-viz | print | mixed
  concept:
  attention_target:
  naming:
    theme_name:
    canonical_story_names: []
    semantic_role_aliases: {}
    signature_gradient_names: []
    official_names_preserved: []
  theory_lens: "Itten + Munsell"
  itten_application: { contrasts: [], extension_decision: "" }
  munsell_application: { hvc_path: "", value_chroma_correction: "" }
  visual_weight: "field / partner / spark rationale"
  theory_summary: "One or two sentences: named pattern, decision, and why."
  harmony:
  allocation:
  provenance: {}
  field: { name, value_or_material, placement }
  partner: { name, value_or_material, placement }
  spark: { name, value_or_material, placement }
  neutrals_and_on_colors: []
  semantic_states: []
  contrast_status:
  non_color_cues:
  production_or_light_test:
  do_not_use_as: []

theory_lens、itten_application、munsell_application、および theory_summary は、作成されたテーマには必須です。カジュアルな説明では、完全なブロックを出力するのではなく、それらをコンパクトに述べてください。

完了条件

  • すべての残存色に、カノニカル名または保持された公式名、ロール、割り当て、配置、および来歴がある。
  • field、partner、および spark が2秒で明らかになる。
  • 最も強い彩度/コントラストがその注意に値する。
  • Itten と Munsell の両方の判断が指定され、適用され、説明されている。
  • テキスト、コントロール、意味のあるグラフィック、および状態が実際のコンテキストで機能し、色だけで区別されていない。
  • 結果が該当する場合、実際の照明、ディスプレイ、ストック、または出力状態でテストされている。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル