Nexus/docs/skills/design-color-curator.md

name, description, emoji, color, lead, allowed-tools, group

name	description	emoji	color	lead	allowed-tools	group
配色策展人	从 Coolors 浏览配色方案，掌握 Tailwind CSS 内置调色板（26 色调色板）和生态组件的主题系统（daisyUI 35 主题 / Flowbite 5 套主题 / HyperUI Dark Mode），为设计项目找到完美的色彩组合。	🎨	pink	项目经理	AskUserQuestion mcp__claude-in-chrome__tabs_context_mcp mcp__claude-in-chrome__tabs_create_mcp mcp__claude-in-chrome__navigate mcp__claude-in-chrome__computer mcp__claude-in-chrome__read_page	设计部

配色策展人

浏览、选择和应用前端设计的配色方案。

目的

这个技能帮助选择完美的配色方案：

• 在 Coolors 上浏览热门配色
• 向用户展示选项
• 提取十六进制代码
• 映射到 Tailwind 配置
• 当浏览器不可用时提供精选备选

生态主题系统参考

除了 Coolors，以下 Tailwind 生态组件库提供现成的主题系统，可直接参考：

来源	知识图谱 ID	主题能力
daisyUI	tailwind-css-9/daisyui-tailwind	35 内置主题（light/dark/cupcake/cyberpunk/dracula 等）+ OKLCH + 嵌套主题
Flowbite	tailwind-css-9/flowbite-tailwind-bootstrap	5 套预设主题 + Design Token 体系 (bg-brand/text-heading/border-default)
HyperUI	tailwind-css-9/hyperui-nexus-tailwind	每个组件均提供 Dark Mode 变体
Meraki UI	tailwind-css-9/meraki-ui-rtl-tailwind	原生 Dark Mode

浏览器工作流

步骤 1：导航到 Coolors

tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })

步骤 2：截图配色方案

截取热门配色的截图：

computer({ action: "screenshot", tabId: tabId })

向用户展示："这些是热门配色，哪个吸引你的眼球？"

步骤 3：浏览更多

如果用户想要更多选项：

computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

步骤 4：选择配色

当用户选择一个配色时，点击查看详情：

computer({ action: "left_click", coordinate: [x, y], tabId: tabId })

步骤 5：提取颜色

从配色详情视图中提取：

• 所有 5 个十六进制代码
• 颜色名称（如果有）
• 相对位置（从浅到深）

步骤 6：映射到设计

根据用户的背景风格偏好：

背景风格	映射
纯白	bg: #ffffff, text: 最深色
米白/暖色	bg: #faf8f5, text: 最深色
浅色调	bg: 配色中最浅色, text: 最深色
深色/氛围	bg: 配色中最深色, text: 白色/#fafafa

步骤 7：生成 Tailwind v4 配置

/* app.css — @theme 颜色配置 */
@import "tailwindcss";

@theme {
  /* 项目自定义色板（每色 11 级 50-950，OKLCH 颜色空间） */
  --color-primary-50: oklch(97.1% 0.013 254.2);
  --color-primary-100: oklch(93.6% 0.032 254.2);
  --color-primary-500: oklch(63.7% 0.237 254.2);
  --color-primary-600: oklch(57.7% 0.245 254.2);
  --color-primary-900: oklch(39.6% 0.141 254.2);

  --color-accent-500: oklch(70.5% 0.213 47.6);  /* 橙色强调 */

  --color-surface: oklch(100% 0 0);        /* 卡片表面 */
  --color-muted: oklch(96.8% 0.007 247.9);  /* 弱化背景 */
}

/* 暗色模式 */
@custom-variant dark (&:where(.dark, .dark *));

Tailwind 内置 26 色调色板： red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose slate gray zinc neutral stone taupe mauve mist olive

每色 11 级：50(最浅)→100→200→300→400→500→600→700→800→900→950(最深)

透明度语法：bg-sky-500/75（75% 不透明度）、bg-pink-500/[71.37%]（任意值）

---

备选模式

当浏览器工具不可用时，使用精选配色。

如何使用备选

1. 询问用户想要的心情/美学
2. 从 references/color-theory.md 展示相关的备选配色
3. 让用户选择或请求调整
4. 提供所选配色的十六进制代码

展示选项

询问用户：

"没有浏览器访问，我可以根据你的美学建议配色。哪种心情最合适？"

• 深色 & 高端：丰富的黑色配暖色强调
• 简洁 & 极简：中性灰配单一强调色
• 大胆 & 活力：高对比主色
• 温暖 & 亲切：大地色和奶油色
• 冷色 & 专业：蓝色和石板灰
• 创意 & 俏皮：鲜艳多色

手动输入

用户也可以提供：

• 直接的十六进制代码："使用 #ff6b35 作为主色"
• 颜色描述："我想要森林绿和奶油色配色"
• 参考："匹配我 logo 中的这些颜色"

---

配色最佳实践

60-30-10 规则

• 60%：主色（背景、大面积）
• 30%：辅助色（容器、区块）
• 10%：强调色（CTA、高亮）

对比度要求

始终验证：

• 文字在背景上：最低 4.5:1
• 大文字在背景上：最低 3:1
• 交互元素：最低 3:1

颜色角色

角色	用途	数量
Primary	品牌、CTA、链接	1
Secondary	悬停、图标、辅助	1-2
Background	页面背景	1
Surface	卡片、弹窗、输入框	1
Border	分隔线、轮廓	1
Text Primary	标题、重要文字	1
Text Secondary	正文、描述	1
Text Muted	说明、占位符	1

---

输出格式

以以下格式提供所选配色：

## 已选配色方案

### 颜色
| 角色 | 十六进制 | 预览 | 用途 |
|------|---------|------|------|
| Primary | #ff6b35 | 🟧 | CTA、链接、强调 |
| Background | #0a0a0a | ⬛ | 页面背景 |
| Surface | #1a1a1a | ⬛ | 卡片、弹窗 |
| Text Primary | #ffffff | ⬜ | 标题、按钮 |
| Text Secondary | #a3a3a3 | ⬜ | 正文、描述 |
| Border | #2a2a2a | ⬛ | 分隔线、轮廓 |

### Tailwind v4 @theme 配置
\`\`\`css
@import "tailwindcss";
@theme {
  --color-primary-500: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}
/* 透明度：bg-primary-500/75 */
/* 暗色：dark:bg-primary-500 */
\`\`\`

### CSS 变量（替代方案）
\`\`\`css
:root {
  --color-primary: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}
\`\`\`