AI Color System — AI skill for Claude Code

AI Color System

**从品牌情感关键词生成完整 UI 色彩系统** **Generate a full UI color system from brand emotion keywords**

[](color-system/LICENSE.txt)

适用于 Cursor · Codex · Claude · ChatGPT · Copilot · Cline Works with Cursor · Codex · Claude · ChatGPT · Copilot · Cline

---

简介 · Overview

从品牌情感出发，由 AI 生成完整 UI 色彩系统：品牌色 / 背景 / 文字 / 语义色、亮色与深色双模式、10 级色阶、WCAG 2.1 AA 对比度校验，以及 iOS / Android Token 命名与可交互 HTML 色板。连接 Figma MCP 时，可将色值直接写入 Variables。

Starting from brand emotion keywords, the AI generates a production-ready UI color system: brand / background / text / semantic colors, light & dark modes, 10-step scales, WCAG 2.1 AA contrast checks, iOS & Android token mapping, and an interactive HTML palette widget. With Figma MCP connected, tokens can be written directly to Variables.

---

效果预览 · Preview

输出 · Output	说明 · Description
情感映射分析 · Emotion mapping	每个关键词 → 色相、饱和度、明度、质感、对比度策略 / Each keyword → hue, saturation, lightness, texture, contrast strategy
HTML 色板 · Palette widget	亮/暗切换、色阶展示、WCAG pass/fail 表 / Light/dark toggle, scale display, WCAG pass/fail table
Token 映射 · Token mapping	Figma → iOS Asset Catalog → Android Material 3
Figma Variables（可选 · optional）	双 Mode 写入 Primitive + Semantic 层 / Dual-mode write to Primitive + Semantic layers

📄 完整示例 · Full example: [Stillness 冥想 App](color-system/references/example-output.md)

---

快速开始 · Quick Start

git clone https://github.com/yuqizhang1228-blip/AI-color-system.git
cd AI-color-system

在 AI 工具中发送 / Send to your AI agent:

帮我为「夜语」做一个色彩系统：
- 定位：面向年轻人的夜间阅读 App
- 情感：安静、神秘、专注
- 平台：iOS，夜间使用为主

Create a color system for "Nocturne":
- A night-reading app for young adults
- Emotions: calm, mysterious, focused
- Platform: iOS, night-first usage

Agent 会先收集品牌名、定位、情感词与平台，再输出分析 + HTML widget + Token 建议。 The agent collects brand name, positioning, emotion keywords, and platform, then outputs an