色彩搭配顾问

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install color-palette-advisor
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 color-palette-advisor。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

色彩搭配顾问可将品牌色、色相方向或行业简介转化为协调一致的配色方案，适用于小程序、应用、网站、大屏界面和品牌设计。它会定义主色阶、互补的次要颜色、染色色调的中性色、语义状态色，以及可选的强调色。
这项技能不止提供颜色建议：它会根据 WCAG AA 对比度指南检查文本与背景的组合，并说明每种颜色的使用位置和方式。对于 Openclaw Skills 用户，它提供了一套可重复的流程，帮助用户将简短的设计简介转化为有文档记录、可直接实施的色彩系统。

应用场景

为小程序、应用、网站或大屏界面创建新的配色方案。
将现有品牌色扩展为包含浅色和深色的完整调色板。
项目没有既定品牌色相时，选择适合行业的颜色。
为 UI 状态定义语义化的成功、警告、错误和信息颜色。
针对深色模式或特定平台的交互状态调整颜色用法。
请求生成 Markdown 配色文档，用于交接或项目文档。

工作原理

收集现有简介信息：品牌色或色相、行业、目标平台、风格方向，以及是否需要深色模式。
如果缺少关键信息，询问行业和平台；如果简介过于简单，则根据行业选择合理的色相，并说明所做假设。
根据提供的品牌色选取基色，或推导出合适的色相。
构建系统：主色 050–900 色阶、互补色或类似色作为次要颜色、带有色相倾向的中性灰、语义颜色，以及可选的强调色。
根据指定的 WCAG AA 阈值检查文本与背景的对比度；如果组合未达标，则调整建议。
提供 HEX 值、使用场景、色彩比例指南、搭配规则和平台专属说明。
如有需要，将配色方案保存为 .md 文档。

配置指南

SKILL.md 未指定包管理器、CLI 安装命令或其他配置。请遵循相应平台的安装惯例，通过 AI 编程代理所支持的技能加载机制添加此技能。如果希望代理参考行业色相、色彩和谐及无障碍指南，请确保其可以访问列出的参考资料。
为获得实用的配色方案，请尽可能提供以下信息：
品牌色、颜色名称或偏好的色相（可选）
行业或项目领域
目标平台：小程序、应用、网页、大屏或品牌
风格方向，例如极简、活力、高端或清新（可选）
是否需要支持深色模式（可选）
文档中没有说明单独的运行时、API 密钥或命令行依赖。Openclaw Skills 用户可以用自然语言描述项目，并在需要时请求生成 Markdown 配色文件。

数据架构

该技能将配色方案生成为结构化的设计指南，而非定义机器可读的配置格式。输出按以下颜色组组织：
分组 内容 典型用途
主色 十个色阶，范围为 050–900，基色位于 500 品牌识别、操作、选中状态和强调
次要色 互补色或类似色 次要操作和链接
中性色 从 900 到 0、带有色相倾向的灰色 文本、占位符、边框、分隔线、背景和表面
语义色 成功、警告、错误和信息颜色 状态与反馈
强调色 可选的高亮颜色 促销、徽章和重点高亮
每种颜色均附有 HEX 值和使用说明。配套指南可能包含色彩比例、搭配规则、对比度建议、深色模式注意事项，以及平台专属的状态用色。如有需要，该技能会将配色文档保存为 .md 文件；SKILL.md 未指定文件名、目录或 Markdown 以外的导出格式。
参考指南文件：
references/industry-palettes.md — 适合不同行业的基准色相。
references/color-harmony.md — 互补、类似和三角色彩和谐规则。
references/accessibility-quick-check.md — 快速对比度检查数值。

高级特性

生成从 050 到 900 的一致主色阶，在改变明度的同时保持色相稳定。
构建互补色或类似色作为次要颜色，并生成带有主色相倾向的中性色。
包含标准语义颜色，并为浅色和深色模式分别提供建议值。
应用无障碍指南：正文文本对比度至少为 4.5:1，大号文本为 3:1；如果白色文本搭配 primary-500 未达标，建议按钮文本使用 primary-600 或 primary-700。
考虑平台专属需求，包括网页交互状态、与原生应用 UI 的协调，以及大屏上的远距离对比度。
提供实用的使用比例和搭配指南，包括克制使用强调色的建议。
可按需创建 Markdown 配色文档；未指定钩子、自动化或多代理工作流。

name: color-palette-advisor description: "Generate complete, professional color palettes for UI/UX and brand design. Use when user needs a color scheme, palette, brand colors, or color system for mini-program, App, Web, or large-screen interfaces."

Color Palette Advisor

Generates complete, cohesive color palettes for UI/UX design (mini-program, App, Web, large-screen) and brand design. Produces harmonious color systems with exact HEX values, usage guidelines, and accessibility-checked contrast ratios.

When to Use

User needs a color scheme / palette (配色方案 / 配色 / 色板)
User needs brand colors (品牌色)
User needs a color system for a UI project (色彩系统 / 色系设计)
User mentions a specific hue or has a brand color and needs a full palette
User asks for color suggestions for a certain industry or style

Inputs Needed

Gather (or ask if missing):

品牌色 / 主色调 — A hex value, a color name, or a hue direction (optional, can derive from industry)
行业 / 领域 — e.g. 电商、教育、金融、医疗、科技、政务、旅游、美妆、餐饮 (helps pick appropriate hue)
目标平台 — 小程序 / App / Web / 大屏 / 品牌 (affects contrast and usage guidance)
风格方向 (optional) — 简约、时尚、沉稳、科技感、活泼、高端、国风、清新
深色模式 (optional) — Whether dark mode support is needed

If user gives minimal info, pick a reasonable hue from the industry and state the assumption.

Workflow

确认输入 — If industry and platform are missing, ask. Otherwise proceed.
选择基色 — Use the provided brand color, or derive an industry-appropriate base hue.
构建色板 — Generate a full system:
主色 (Primary): Base hue + 10-shade scale (050-900)
辅助色 (Secondary): Complementary / analogous hue for secondary actions and links
中性色 (Neutral): Grays — text, background, border, divider
语义色 (Semantic): success / warning / error / info
强调色 (Accent, optional): For highlights, promotions, badges
对比度校验 — Check WCAG AA contrast for text on backgrounds. Adjust if needed.
生成使用指南 — For each color group: usage scenarios, percentage guidance, pairing rules.
输出 — Present full palette with HEX values and usage notes. If user wants a file, save a .md palette doc.

Color Generation Rules

Primary scale (any hue)

Given a base color at 500, generate 050–900 shades:

050: Base + white (~92% light) — lightest tint for backgrounds 100: ~85% light — light tint for selection bg / badges 200: ~75% light 300: ~60% light 400: ~45% light 500: 🔑 BASE COLOR 600: ~10% darker — hover / pressed states 700: ~20% darker — pressed / important emphasis 800: ~30% darker — hero text on light bg 900: ~40% darker — deep brand accent

Tints = mix with white; shades = mix with black. Keep hue steady, vary lightness.

Semantic colors (standard, adjust for dark mode)

Type Light mode Dark mode

Success #22C55E #4ADE80
Warning #F59E0B #FBBF24
Error #EF4444 #F87171
Info #3B82F6 #60A5FA
Neutral grays (hue-tinted)

Derive neutrals with a subtle tint of the primary hue for cohesion:

Level Purpose

900 Main text 700 Secondary text 500 Placeholder / disabled text 300 Border / divider 200 Subtle border 100 Hover / subtle bg 50 Page background 0 Card / surface (white or near-white)

Accessibility Rules

Text on light bg: text color must have ≥4.5:1 contrast (body), ≥3:1 (large text ≥18pt/24px)
Primary button: white text on primary-500 must be ≥4.5:1 (if not, use 600/700)
State combos: disabled must still read as text (≥3:1 on bg)
Dark mode: text #E5E7EB or similar on dark bg (#111827)

If primary-500 fails contrast with white text, recommend using primary-600/700 for buttons instead.

Palette Presentation Format

🎨 配色方案 — {项目/行业} · {风格}

主色 Primary

| 令牌 | 色值 | 明度 | 用途 | 050 | # | ~92% | 浅背景 | 100 | # | ~85% | 选中背景 | ... 500 | # | base | 主操作/品牌 | 600 | # | darker | 按压/hover | 900 | # | darkest | 品牌强调 |

辅助色 Secondary

...

中性色 Neutral

...

语义色 Semantic

...

强调色 Accent (optional)

...

使用指南

• 主色占比 ~60-70%
• 辅助色 ~20%
• 中性色 ~5-10% (functional)
• 强调色 ≤5% (亮点)
• 深色模式调暗主色使用 400/300

Platform-Specific Notes

Platform Color usage guidance

小程序 主色用在按钮/选中态，注意与微信原生 UI 协调
App iOS 建议系统语义色（绿/橙/红/蓝），可覆写
Web 需 hover / focus / active 状态色
大屏 深色背景为主，主色做亮色强调，注意远距离对比度
品牌 强调独特性，考虑印刷 CMYK 转换

References

references/industry-palettes.md — Industry-appropriate base hues
references/color-harmony.md — Color harmony rules (complementary, analogous, triadic)
references/accessibility-quick-check.md — Quick contrast check values
Grok 电商视频 | LinkPix

FairSplit