Communitygithub.com

getrdone/color-palette-composition

建立、修改、評論或記錄高關注度的色彩主題,適用於室內設計、圖形設計、品牌、網頁、介面、資料呈現與印刷。當需求涉及協調色板、配色方案、比例、配置、混合或視覺層次時使用;不適用於單一顏色選擇。

color-palette-composition 是什麼?

這個技能(Color Palette Composition)是一個專門用於產生或實質修改色彩主題/色板的規範化工作流程,支援 Claude Code、Cursor、Codex 等AI開發工具。其核心哲學是「控制注意力的分佈」而非堆砌漂亮的色票,強調色相次要於視覺重量(面積、彩度、局部對比、色溫、隔離)。 工作流程強制採用雙鏡頭法:Itten七種對比(如明暗、互補、飽和度)與Munsell HVC(色相-明度-彩度)路徑,並透過視覺重量啟發式評估平衡。系統會要求明確的命名合約:所有顏色必須有簡潔、具故事性的規範名稱(如「Flame」而非「Orange 1」),並區分規範故事名稱與語義角色別名。 此外,技能提供嚴格的校驗步驟:70/20/10或80/15/5分配作為起點而非規則,兩秒聚焦測試、對比/非色彩提示檢查、以及實際媒體/輸出測試。最終產出需包含結構化的YAML交接區塊,記錄理論透鏡、視覺重量分析、生產測試結果等,確保設計決策可追溯且有理論依據。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

色彩調色板構成

建立一個受控的注意力分佈,而不是一堆漂亮的色票。色相次於視覺重量:面積、彩度、局部對比、色溫和隔離決定了調色板是否協調一致。

這是用於產生或實質修改調色板/主題的規範化技能。其他系統可能提供來源限制、故事、語義角色、實作標記或解釋證據;它們不應取代此構成工作流程。

只載入任務需要的部分

對於每個實質性的新主題或修改後的主題,請閱讀核心構成。然後僅載入相關模組:

需求閱讀
室內、圖形/編輯、UI、資料呈現或印刷配置媒介應用
起始範例或已命名的和諧模式入門套件
正式交接、對比/生產驗證、出處或設計標記橋接驗證與交接

對於例行評論請勿載入入門套件,也請勿僅因為任務是調色板任務就載入每個模組。核心部分仍是強制的;額外模組使技能更精確,而不會讓例行請求變得過於繁重。

從簡報開始

確定媒介、預期情緒和受眾、來源/故事、固定顏色或材料、照明/輸出條件、無障礙需求以及一個注意力目標。精確保留鎖定的顏色。將重要的數值標記為 official、extracted、harmonized 或 semantic;衍生的色票不得成為虛假的品牌標準。

每當「主要色」可能產生歧義時,使用 field / partner / spark。在房間或編輯構成中,最大的顏色通常是 field。在UI中,primary 通常指一個小型、高強調的動作色;使用 canvas、surface 和 on-* 來表示廣泛的角色。

主題的強制雙鏡頭法

對於每個實質性的提議配色方案或主題,應用並報告兩種鏡頭。僅有命名的和諧或配方是不夠的。

  1. Itten: 命名進行構成工作的一或兩種對比(色相對比、明暗對比、冷暖對比、互補對比、同時對比、飽和度對比或面積對比)。當兩個彩色區域共存時,做出面積決策,而不是假設等面積。
  2. Munsell: 命名建立家族的 HVC 路徑(垂直明度、橫向色相、或向內經由灰色到達對立色),然後進行明度-彩度修正。一個小而強烈的顏色可以平衡一個大得多的柔和區域;百分比本身並非平衡。
  3. 視覺重量: 評估 重量 ~= 面積 x 彩度 x 局部對比。色溫和隔離會放大或削弱它。這是一種方向性的設計啟發法,而非物理計算。
  4. 人類可讀性: 包含一兩句 theory_summary 說明所用的 Itten 和 Munsell 模式、它們改變了什麼,以及為什麼人類可以研究它們。

必需的命名合約

在交接前應用此合約。設計指導方針擁有標記架構的所有權;此技能需要餵養它的調色板行為。

  • 為完成的主題以及規範/故事色票提供簡短、富有聯想力且來源特定的名稱(通常 1-3 個詞)。不要將真實的設計顏色命名為 Orange 1 或 Dark Blue。
  • 精確保留官方製造商或品牌顏色名稱;將其記錄為 official,而不是用一個詩意的別名代替。
  • 保持規範故事名稱與語義角色別名分離:例如,Flame 可以對應 --flame,而 --color-primary 或 action 描述其實作功能。角色可能會在不重新命名顏色故事的情況下改變。
  • 根據它們所創造的圖像/故事來命名標誌性漸層(Fire Core、Wing Sweep),絕不能使用 Gradient 1。通用建構標籤僅是暫定的。
  • 如果提供的來源使用通用名稱,請在出處中保留來源標籤,並且僅在該顏色不是鎖定/官方顏色時才提出一個富有聯想力的規範名稱。

快速工作流程

  1. 首先建立明度結構:可讀的 field 加上 ink/on-color。在灰階中無法使用的設計具有未解決的層次。
  2. 選擇一個注意力目標。在彩度、明度對比、冷暖對比、隔離或規模上給予它最強的優勢——不是所有元素。
  3. 對於以注意力為導向的編輯/活動/房間工作,考慮 70/20/10;對於密集、精緻、資訊主導的工作,考慮 80/15/5。這些是偏好的首次試驗,而非規則。如果有視覺重量的理由,可以使用其他分配;僅在 60/30/10 的平衡室內偏見適合時才使用它。
  4. 分配 field、partner、spark、中性色/on-color 以及語義狀態角色;將它們映射到表面或元件上。
  5. 應用 Itten 對比和 Munsell HVC/明度-彩度決策。在導入不相關的色相之前,先建立相關的家族。
  6. 進行兩秒聚焦測試、對比/非色彩提示檢查以及媒介/輸出測試。

不可協商的安全措施

  • 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: "一兩句話:命名的模式、決策及其原因。"
  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 在兩秒內顯而易見。
  • 最強的彩度/對比度贏得其注意力。
  • Itten 和 Munsell 的決策都被命名、應用和解釋。
  • 文字、控制項、有意義的圖形和狀態在實際上下文中運作,並且不僅僅由顏色區分。
  • 在適用的情況下,結果已在其實際光線、顯示器、紙張或輸出條件下進行測試。

Individual skills in this repo

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

相關技能