用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill color-system命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 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个逻辑组块
- **渐进呈现**：先呈现核心颜色，再展开色阶
- **视觉层次**：使用表格降低认知负担
### 格式塔原则应用
- **相似性**：使用一致的格式展示颜色信息
- **邻近性**：相关颜色在空间上靠近（如色阶）
- **对比**：使用对比度表突出无障碍要求
### 损失厌恶应用
- **强调错误**：在功能色中突出错误色，增强警示
- **强调成功**：在功能色中突出成功色，增强正向反馈
基于 SOC 职业分类
