颜色策展人

浏览、选择和应用前端设计的颜色调色板。

目的

这个技能通过以下方式帮助选择完美的颜色调色板：

在Coolors上浏览趋势调色板
向用户呈现选项
提取十六进制代码
映射到Tailwind配置
当浏览器不可用时提供策展的后备方案

浏览器工作流程

步骤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：映射到设计

基于用户的背景风格偏好：

背景风格	映射
纯白色	`背景： #ffffff`, 文本：最深颜色
米白色/暖色调	`背景： #faf8f5`, 文本：最深
浅色调	`背景：调色板中最浅颜色`, 文本：最深
深色/情绪化	`背景：调色板中最深颜色`, 文本：白色/#fafafa

步骤7：生成配置

创建Tailwind颜色配置：

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#[主颜色]',
        secondary: '#[辅助颜色]',
        accent: '#[突出颜色]',
        background: '#[背景颜色]',
        surface: '#[卡片颜色]',
        text: {
          primary: '#[标题颜色]',
          secondary: '#[正文颜色]',
          muted: '#[弱化颜色]'
        }
      }
    }
  }
}

后备模式

当浏览器工具不可用时，使用策展的调色板。

如何使用后备方案

询问用户期望的情绪/美学
从references/color-theory.md呈现相关的后备调色板
让用户选择或请求调整
为选定的调色板提供十六进制代码

呈现选项

询问用户：

“没有浏览器访问权限时，我可以根据您的美学建议调色板。哪种情绪最合适？”

暗黑与高级：丰富的黑色与暖色调点缀
简洁与极简：中性灰色与单一点缀
大胆与活力：高对比度的原色
温暖与邀请：大地色调和奶油色
冷静与专业：蓝色和石板灰色
创意与玩味：鲜艳的多色

手动输入

用户也可以提供：

直接十六进制代码：“使用#ff6b35作为主色”
颜色描述：“我想要一个森林绿和奶油色的调色板”
参考：“匹配我徽标中的这些颜色”

调色板最佳实践

60-30-10规则

60%：主色（背景、大面积区域）
30%：辅助色（容器、部分）
10%：点缀色（行动号召、高光）

对比度要求

始终验证：

背景上的文本：最小4.5:1
背景上的大文本：最小3:1
交互元素：最小3:1

颜色角色

角色	用途	数量
主色	品牌、行动号召、链接	1
辅助色	悬停、图标、支持	1-2
背景	页面背景	1
表面	卡片、模态框、输入框	1
边框	分隔线、轮廓线	1
文本主色	标题、重要文本	1
文本辅助色	正文、描述	1
文本弱化	说明文字、占位符	1

输出格式

提供选定调色板的格式如下：

## 选定颜色调色板

### 颜色
| 角色 | 十六进制 | 预览 | 用途 |
|------|-----|---------|-------|
| 主色 | #ff6b35 | 🟧 | 行动号召、链接、点缀 |
| 背景 | #0a0a0a | ⬛ | 页面背景 |
| 表面 | #1a1a1a | ⬛ | 卡片、模态框 |
| 文本主色 | #ffffff | ⬜ | 标题、按钮 |
| 文本辅助色 | #a3a3a3 | ⬜ | 正文文本、描述 |
| 边框 | #2a2a2a | ⬛ | 分隔线、轮廓线 |

### Tailwind配置
```javascript
colors: {
  primary: '#ff6b35',
  background: '#0a0a0a',
  surface: '#1a1a1a',
  text: {
    primary: '#ffffff',
    secondary: '#a3a3a3',
  },
  border: '#2a2a2a',
}

CSS变量（替代方案）

:root {
  --color-primary: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}


---

## 参考文献

参见`references/color-theory.md`以获取：
- 按美学策展的后备调色板
- 颜色心理学指南
- 调色板创建技术
- 无障碍性考虑