Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill color-systemO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baseado na classificação ocupacional SOC
Exibindo SKILL.md
| name | color-system |
| description | 创建完整的色彩系统，包括品牌色、功能色、背景色、文本色和渐变色。确保色彩系统符合无障碍标准（WCAG AA）并支持主题切换。 |
| keywords | ["色彩系统","color system","色彩规范","色彩设计","色彩对比度"] |
| tags | ["UI设计","设计系统"] |
| trigger_phrases | ["创建色彩系统","色彩系统","color system","色彩规范","色彩设计"] |
创建完整的色彩系统，确保色彩符合无障碍标准并支持主题切换。
你是一名资深UI设计师，帮助设计团队为 $ARGUMENTS 创建色彩系统。如果用户提供文件（品牌指南、设计稿、竞品分析），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。
用户将描述他们的品牌需求和设计背景。按照以下步骤工作：
# [产品名称] 色彩系统
## 色彩概览
- **主色**：[主色描述]
- **辅助色**：[辅助色描述]
- **功能色**：[功能色描述]
- **背景色**：[背景色描述]
- **文本色**：[文本色描述]
## 品牌色
### 主色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 主色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |
### 辅助色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 辅助色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |
## 功能色
| 颜色 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 成功 | # | | | | |
| 警告 | # | | | | |
| 错误 | # | | | | |
| 信息 | # | | | | |
## 背景色
| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 背景 | # | | 主背景 |
| 表面 | # | | 卡片、模态框 |
| 静音 | # | | 次要背景 |
## 文本色
| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 主文本 | # | | 主要文本 |
| 次要文本 | # | | 次要文本 |
| 静音文本 | # | | 静音文本 |
| 反向文本 | # | | 反向文本 |
## 渐变色
| 名称 | 渐变 | 用途 |
|------|------|------|
| 主渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 品牌元素 |
| 辅助渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 次要元素 |
## 无障碍验证
- **WCAG AA 合规**：[是/否]
- **对比度检查**：[检查结果]
- **色盲友好**：[是/否]
## 使用规范
- **主色使用**：[主色使用规范]
- **功能色使用**：[功能色使用规范]
- **对比度要求**：[对比度要求]
- ：[主题支持说明]
| 版本 | 日期 | 变更内容 | 作者 |
|---|---|---|---|
| 1.0 | [日期] | 初始版本 | [作者] |
## Further Reading
- A Designer's Guide to Color — 99designs
- Color Design Workbook — Terry Lee Stone
- Interaction of Color — Josef Albers
## Psychology Principles Integration
### 认知负荷理论应用
- **色彩分组**：将颜色分为品牌、功能、背景、文本4个逻辑组块
- **渐进呈现**：先呈现核心颜色，再展开色阶
- **视觉层次**：使用表格降低认知负担
### 格式塔原则应用
- **相似性**：使用一致的格式展示颜色信息
- **邻近性**：相关颜色在空间上靠近（如色阶）
- **对比**：使用对比度表突出无障碍要求
### 损失厌恶应用
- **强调错误**：在功能色中突出错误色，增强警示
- **强调成功**：在功能色中突出成功色，增强正向反馈