AgentSkillsCN

palette-generate

根据单一品牌色生成完整的 UI 色彩方案。当用户输入品牌色（十六进制格式）并希望生成一套涵盖品牌色阶（1–9）、语义色（如“ok/绿色”、“warn/橙色”、“error/红色”、“info/蓝色”）以及中性灰的完整设计系统色板时，可使用此技能。输出形式包括 JSON、CSS 变量或 Tailwind 配置文件。该技能可通过类似“基于以下颜色生成色板”的请求触发。

SKILL.md
--- frontmatter
name: palette-generate
description: Generate complete UI color palettes from a single brand color. Use when the user provides a brand color (hex format) and needs to generate a full design system palette including brand shades (1-9), semantic colors (okay/green, warn/orange, error/red, info/blue), and neutral grays. Outputs JSON, CSS variables, or Tailwind config. Triggers on requests like "generate palette from #3B82F6", "create color system", "expand brand color to full palette".

UI 調色盤生成器

使用基於 HSB 的色階插值，從單一品牌色輸入生成可用於生產環境的 UI 調色盤。

工作流程

  1. •接收十六進位格式的品牌色（例如 #3B82F6 或 3B82F6）
  2. •使用所需的輸出格式執行生成器腳本
  3. •向使用者交付調色盤

使用方法

bash
# JSON 輸出（預設）
python3 scripts/generate_palette.py "#HEXCOLOR"

# CSS 自訂屬性
python3 scripts/generate_palette.py "#HEXCOLOR" --format css

# Tailwind 設定
python3 scripts/generate_palette.py "#HEXCOLOR" --format tailwind

# 儲存至檔案
python3 scripts/generate_palette.py "#HEXCOLOR" --output palette.json

輸出結構

生成的調色盤包含 7 個色階，每個色階有 1-9 個色度：

色階描述基礎色相邏輯
brand主品牌色來自輸入
okay成功狀態（綠色）H=140, S/B 匹配
warn警告狀態（橙色）H=35, S/B 匹配
error錯誤/危險狀態（紅色）H=0, S/B 匹配
info資訊狀態（藍色）H=210, S/B 匹配
neutral背景、邊框（灰色）固定灰階
text排版顏色淺至深（1=最淺）

色階參考

顏色色階（brand、okay、warn、error、info、neutral）

級別用途特徵
1著色背景S ~5-10%, B ~95-100%
2懸停背景淺色，低飽和度
3邊框、分隔線淺中
4次要元素中淺
5基礎/主要（按鈕）原始 S/B 值
6懸停狀態中深
7啟用/按下狀態較深
8次要文字高 S，低 B
9主要文字S ~90-100%, B ~20-30%

文字色階（1=最淺，9=最深）

級別用途
1背景著色
2微妙背景
3邊框、分隔線
4停用文字
5佔位符、靜音
6次要文字
7內文文字
8強調
9主要文字（標題）

演算法

使用基於弧形插值的 HSB 色彩模型：

  • •語義色繼承品牌色的 S/B（±10），僅改變色相
  • •色階沿著從淺色（1）通過基礎色（5）到深色（9）的視覺弧線進行插值
  • •確保整個調色盤的視覺和諧