Skip to content
BranchesTags

Repository files navigation

tinted-ui-tokens-skills（品牌色 UI 设计 Token skills）

Type: Cross-Agent Skill Input: 1 brand color Engine: Python 3.10+ License: MIT Live examples Version Stars Platforms Accessibility Get it on SkillHub

English | 中文

⭐ If this project helped you, a star is the easiest way to say thanks — and helps others find it. 若这个项目对你有用，点个 Star 就是最简单的鼓励，也能帮更多人发现它。

▶ Live Gallery → Ten brand colors across the full hue wheel (red → violet → pink), light + dark, WCAG AA guaranteed. Source in examples/.

Why does your UI look cheap? Flat #FFF / #000 / #808080 neutrals. This skill turns one brand color into a complete, production-ready tinted-neutral token system — so every surface, border, and text layer carries the brand's temperature instead of reading as "flat".

Table of Contents

A cross-agent skill that turns one brand color into a complete, production-ready brand-tinted design-token system — so your UI stops looking cheap from flat neutral colors. It works in 15 AI coding agents (Claude Code, Cursor, OpenAI Codex, Cline, Aider, WindSurf, GitHub Copilot, Gemini CLI, Kiro, RooCode, Kilo Code, Trae, CodeBuddy, Augment, and WorkBuddy).

No pure neutral colors anywhere (#FFFFFF, #000000, #808080): every background, surface, border, text layer, shadow, semantic color, gradient, and icon picks up a few percent of the brand's temperature.

The engine (scripts/generate_tokens.py) is plain Python standard library and runs anywhere Python 3.10+ is available. The instructions live in INSTRUCTIONS.md and are wired into each agent via the docs in agents/.

Light and dark UI generated from brand color #2563EB

Above: light + dark output for brand #2563EB (cool). Every surface, border, text layer, and semantic color is tinted toward the brand — the topbar title stays legible in both modes. Run the generator to get a live preview.html with a real light/dark toggle.

Who This Is For

  • Designers who want a premium, on-brand UI color system without hand-tuning dozens of gray values.
  • Developers who want drop-in CSS variables for light + dark mode from a single hex.
  • Teams that want a consistent "tinted neutral" language across products — and across the different AI coding agents they use.
  • Anyone whose UI currently uses pure #FFF / #000 / #808080 and reads as "flat".

What It Can Do

  • Generate a full token system from one brand color (hex).
  • Output tokens.css with :root + [data-theme="dark"] custom properties.
  • Output a self-contained preview.html with a live light / dark toggle.
  • Tint backgrounds, surfaces, borders, text hierarchy, shadows, semantic colors, gradients, and icons.
  • Nudge semantic colors (error / warning / success) toward the brand temperature.
  • Auto-detect warm / cool / balanced temperature from the brand hue.
  • Work for any brand color (brand-agnostic generator, not two hard-coded palettes).

Cross-Agent Compatibility

The skill is agent-agnostic: the engine is a Python script and the instructions are a single paste-ready Markdown file. Each agent only differs in where the rule goes. Full wiring steps are in agents/.

Agent Rule / Command format Install location Engine Status
Claude Code SKILL.md (skills) / /command ~/.claude/skills/tinted-ui-tokens-skills/ Python script ✅ Supported
Cursor .mdc rule .cursor/rules/ or ~/.cursor/rules/ Python script ✅ Supported
OpenAI Codex AGENTS.md / codex.md repo root or ~ Python script ✅ Supported
Cline .clinerules / .cline/rules/*.md project or ~/.cline/rules/ Python script ✅ Supported
Aider CONVENTIONS.md (--read) repo root Python script ✅ Supported
WindSurf .windsurfrules repo root or ~ Python script ✅ Supported
GitHub Copilot copilot-instructions.md .github/ Python script ✅ Supported
Gemini CLI GEMINI.md repo root or ~ Python script ✅ Supported
Kiro steering .md .kiro/steering/ Python script ✅ Supported
RooCode .roo/rules/*.md .roo/rules/ Python script ✅ Supported
Kilo Code .roo/rules/*.md .roo/rules/ Python script ✅ Supported
Trae .trae/rules/*.md .trae/rules/ Python script ✅ Supported
CodeBuddy .codebuddy/rules/*.md .codebuddy/rules/ Python script ✅ Supported
Augment .augment/rules/*.md .augment/rules/ Python script ✅ Supported
WorkBuddy SKILL.md (skills) ~/.workbuddy/skills/tinted-ui-tokens-skills/ Python script ✅ Supported

All agents share the same engine and the same INSTRUCTIONS.md. Once cloned, point your agent's rule file at it (see the per-agent docs) and you are done.

Quick Install

Clone the repo once, then point your agent at the matching rule file. Every agent shares the same engine and INSTRUCTIONS.md.

git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-tokens-skills
Agent Wire it up
Claude Code Move the cloned folder to ~/.claude/skills/tinted-ui-tokens-skills/ (the SKILL.md is picked up automatically)
Cursor cp tinted-ui-tokens-skills/agents/cursor/tinted-ui-tokens-skills.mdc .cursor/rules/
OpenAI Codex cp tinted-ui-tokens-skills/agents/codex/AGENTS.md AGENTS.md
Cline cp tinted-ui-tokens-skills/agents/cline/.clinerules .cline/rules/tinted-ui-tokens-skills
Aider aider --read tinted-ui-tokens-skills/agents/aider/CONVENTIONS.md
WindSurf cp tinted-ui-tokens-skills/agents/windsurf/.windsurfrules .windsurfrules
GitHub Copilot cp tinted-ui-tokens-skills/agents/copilot/copilot-instructions.md .github/copilot-instructions.md
Gemini CLI cp tinted-ui-tokens-skills/agents/gemini-cli/GEMINI.md GEMINI.md
Kiro cp tinted-ui-tokens-skills/agents/kiro/tinted-ui-tokens.md .kiro/steering/tinted-ui-tokens.md
RooCode cp tinted-ui-tokens-skills/agents/roocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md
Kilo Code cp tinted-ui-tokens-skills/agents/kilocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md
Trae cp tinted-ui-tokens-skills/agents/trae/tinted-ui-tokens.md .trae/rules/tinted-ui-tokens.md
CodeBuddy cp tinted-ui-tokens-skills/agents/codebuddy/tinted-ui-tokens.md .codebuddy/rules/tinted-ui-tokens.md
Augment cp tinted-ui-tokens-skills/agents/augment/tinted-ui-tokens.md .augment/rules/tinted-ui-tokens.md
WorkBuddy Copy the repo to ~/.workbuddy/skills/tinted-ui-tokens-skills/, or install from the Skills panel

Full per-agent steps (global vs project scope, multiple projects) are in agents/.

Install via SkillHub (one command)

The skill is also published on SkillHub — install it with the official CLI in a single line (no clone needed):

skillhub install tinted-ui-tokens-skills --namespace user_fa423024

Quick Start (any agent)

# 1. Get the engine + instructions
git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-tokens-skills

# 2. Run it directly (works in every agent's terminal)
python ./tinted-ui-tokens-skills/scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --out "./out"

Then wire it into your agent by following the matching doc in agents/ (typically: paste INSTRUCTIONS.md into your agent's rule file).

Example Workflows

  • "Use #2563EB to generate a tinted token system" → get tokens.css + preview.html.
  • Refresh an existing UI: drop tokens.css in and replace pure neutrals with the tinted set.
  • Compare directions: generate for two brand colors and eyeball the previews.
  • Hand-tune: change the blend factor in build_tokens() for a stronger or weaker tint.

Pre-delivery Checklist

Before shipping a system the generator produced, run this 8-point check (full version with rationale in references/principles.md):

  • No pure neutrals — no #FFFFFF / #000000 / #808080 in the output.
  • Contrast — body ≥ 4.5:1, muted ≥ 3:1, --color-on-brand ≥ 4.5:1.
  • Dark mode — toggle preview.html; title + body stay legible.
  • Grayscale test — desaturate; hierarchy still reads.
  • Semantic signal — error red / warning amber / success green, only leaned.
  • Interactive states — hover/focus/active use --color-brand-subtle.
  • Drop-in sanity — :root vars override framework defaults, no !important.
  • Format parity — tokens.css / .json / tailwind.config.js / _tokens.scss agree.

Requirements

  • Python 3.10+ (standard library only — no pip install needed).
  • Windows / macOS / Linux all supported (engine is pure Python).

How to Use (WorkBuddy / Claude Code)

Invoke the skill by asking, for example:

用 #2563EB 出一套染色 Token 系统

The agent runs scripts/generate_tokens.py and presents preview.html + tokens.css.

For every other agent, follow its doc in agents/.

CLI Usage

python scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --out "./out"
  • --brand (required): any hex color.
  • --name (optional): label shown in the preview header.
  • --out (optional): output folder, created if missing.
  • --format css|html|both|json|tailwind|scss|all (optional, default both). json = W3C DTCG tokens, tailwind = tailwind.config.js, scss = SCSS variables, all = css + html + json + tailwind + scss.
  • --tint-strength subtle|normal|strong (optional, default normal): how strongly every neutral leans toward the brand hue.

Output

tokens.css defines, for :root / [data-theme="light"] and [data-theme="dark"]:

  • --color-brand, --color-brand-subtle, --color-on-brand (readable text/icon color to place ON --color-brand; WCAG AA-compensated to >= 4.5:1 on every brand hue, like body text)
  • --color-bg, --color-surface, --color-surface-2, --color-border, --color-border-strong
  • --color-text, --color-text-2, --color-text-muted
  • --color-error / -subtle, --color-warning / -subtle, --color-success / -subtle
  • --shadow-sm, --shadow-md, --shadow-lg

Other formats: tokens.json (W3C DTCG color/* + shadow/*), tailwind.config.js (theme.extend.colors + boxShadow), _tokens.scss (light + dark SCSS variables).

No pure #FFFFFF, #000000, or #808080 is emitted anywhere. Every text-on-surface pair and --color-on-brand passes WCAG AA — the generator measures contrast and nudges text (and the on-brand color) if needed, so readability always wins.

How It Works

The generator is brand-agnostic: it blends the brand hue into each neutral ramp with a small chroma, derives a warm / cool / balanced temperature, and emits a full token set — instead of hard-coding the two palettes from the original essay.

Method distilled from the article 《你的UI廉价，错在颜色》. See references/principles.md for the design principles and the desaturation grayscale test.

Examples (10 hues, full color wheel)

Every brand color below was produced by the same single command — python scripts/generate_tokens.py --brand "#XXXXXX". Light + dark, and every text pair and on-brand button keeps WCAG AA (≥4.5:1).

Live gallery — 10 brand colors across the full hue wheel, light + dark themes

▶ Open Live Gallery — 10 hues, light + dark, interactive  |  📁 Browse local examples/

Hue Brand Light bg Dark bg On-brand Preview
Ruby #DC2626 #F7F1F1 #241318 4.54:1 preview
Tangerine #EA580C #F8F2F0 #251816 4.82:1 preview
Marigold #F59E0B #F8F5F0 #261F16 7.56:1 preview
Emerald #16A34A #F0F5F2 #10201C 5.12:1 preview
Teal #0D9488 #F0F4F4 #0F1E22 4.57:1 preview
Azure #2563EB #F1F3F8 #11192C 4.90:1 preview
Indigo #4F46E5 #F2F2F7 #15162C 5.94:1 preview
Violet #7C3AED #F4F1F8 #1A152C 5.37:1 preview
Rose #DB2777 #F7F1F3 #231321 4.54:1 preview
Terracotta #C4502A #F6F2F1 #211719 4.56:1 preview

Each folder under examples/ also ships tokens.css, tokens.json (W3C DTCG), tailwind.config.js, and _tokens.scss — the same output your own run produces.

Files

  • SKILL.md — WorkBuddy / Claude Code skill manifest (triggers + workflow)
  • INSTRUCTIONS.md — agent-neutral instruction set (paste into any agent's rules)
  • scripts/generate_tokens.py — the token generator (the engine)
  • references/principles.md — design principles
  • agents/ — per-agent wiring docs (Claude Code, Cursor, Codex, Cline, Aider, WindSurf, Copilot, Gemini, Kiro, RooCode, Kilo Code, Trae, CodeBuddy, Augment, WorkBuddy)
  • README.md — this document

Notes

The generated tokens intentionally keep the brand tint subtle (a few percent of chroma) so the UI reads as "designed" rather than "themed". Validate a system with the grayscale test in references/principles.md.

FAQ

My brand color is neutral (white / black / gray). The generator still runs, but with no hue to tint toward it emits near-neutral tokens. That is expected — a gray brand has nothing to "borrow" temperature from. Pass a slightly hue-ish color, or use --tint-strength strong on a near-gray only if you want more character.

Does it only output CSS? No. --format supports css, html, json (W3C DTCG), tailwind, scss, and all. Use all to get every format at once.

Can I use the tokens in React / Tailwind / Flutter / anything? Yes. Tokens are plain CSS variables, a DTCG JSON, a tailwind.config.js color map, and SCSS variables — drop them into any framework. The skill only generates them; your app consumes them.

Do I have to hand-tune? Usually no. If you want a stronger or weaker tint, use --tint-strength subtle|normal|strong (first try that) or adjust the blend factor in build_tokens().

How is WCAG AA guaranteed? The generator measures contrast for every text-on-surface pair and the on-brand button color, and nudges the text (or on-brand color) until it reaches ≥4.5:1. Readability always wins over a perfectly "clean" value. See references/principles.md.

Roadmap

  • GitHub Action to validate the skill on every change (frontmatter + generator smoke + golden + contrast + version check)
  • One-command install script (install.sh / install.ps1)
  • Figma Variables export
  • Brand-color extraction from an uploaded screenshot
  • More example palettes (cool / warm / balanced) on a comparison page

License

MIT

中文说明

English | 中文

Version Stars Platforms Accessibility Get it on SkillHub

▶ 在线画廊 → 十个品牌色覆盖完整色轮（红 → 紫 → 粉），明暗双主题，WCAG AA 保证。源码见 examples/。

为什么你的 UI 看起来很廉价？ 因为用了扁平的纯中性色 #FFF / #000 / #808080。这个技能把一个品牌色变成一套完整、可上线的「染色中性色」Token 系统——让每一个背景、表面、边框、文字层级都带上品牌的体温，而不是一片「平」。

目录

一个跨 agent 的技能：输入一个品牌色，自动生成一套完整、可直接上线的「染色中性色」 设计 Token 系统——让你的 UI 不再因为扁平的中性色而显得廉价。它可在 15 个 AI 编程 agent 中使用（Claude Code、Cursor、Codex、Cline、Aider、WindSurf、Copilot、Gemini、Kiro、 RooCode、Kilo Code、Trae、CodeBuddy、Augment 与 WorkBuddy）。

任何地方都不使用纯中性色（#FFFFFF、#000000、#808080）：每一个背景、表面、边框、 文字层级、阴影、语义色、渐变与图标，都带上一小撮品牌色的温度。

引擎（scripts/generate_tokens.py）仅用 Python 标准库，Python 3.10+ 任意系统可跑。 指令在 INSTRUCTIONS.md，各 agent 的接入方式见 agents/。

由品牌色 #2563EB 生成的明暗两套 UI

上图：品牌色 #2563EB（冷色）的明 / 暗两套输出。每个表面、边框、文字层级与语义色 都朝品牌色方向染色——顶部标题在两种模式下均保持清晰可读。运行生成器即可得到带真实 明暗切换的 preview.html。

适合谁使用

  • 想要高级、统一品牌感配色，又不想手动调几十个灰阶的设计师。
  • 想用一个 hex 直接得到可即用的明 / 暗双模式 CSS 变量的开发者。
  • 希望跨产品、跨不同 AI 编程 agent 都保持一致的「染色中性色」语言规范的团队。
  • 当前 UI 还在用纯 #FFF / #000 / #808080、整体显得「平」的任何人。

能做什么

  • 只需一个品牌色（hex）就生成一整套 Token 系统。
  • 输出 tokens.css，含 :root 与 [data-theme="dark"] 自定义属性。
  • 输出一份自包含的 preview.html，带明 / 暗实时切换。
  • 为背景、表面、边框、文字层级、阴影、语义色、渐变、图标全部染色。
  • 把语义色（错误 / 警告 / 成功）轻推至品牌色温。
  • 根据品牌色相自动判定暖 / 冷 / 中性三种温度。
  • 对任意品牌色都适用（品牌无关的生成器，而非写死的两套配色）。

跨 Agent 兼容性

本技能与具体 agent 无关：引擎是一个 Python 脚本，指令是一份可直接粘贴的 Markdown。 各 agent 的区别只在于规则文件放在哪。完整的接入步骤见 agents/。

Agent 规则 / 命令格式 安装位置 引擎 状态
Claude Code SKILL.md（skills）/ /command ~/.claude/skills/tinted-ui-tokens-skills/ Python 脚本 ✅ 支持
Cursor .mdc 规则 .cursor/rules/ 或 ~/.cursor/rules/ Python 脚本 ✅ 支持
OpenAI Codex AGENTS.md / codex.md 仓库根目录或 ~ Python 脚本 ✅ 支持
Cline .clinerules / .cline/rules/*.md 项目或 ~/.cline/rules/ Python 脚本 ✅ 支持
Aider CONVENTIONS.md（--read） 仓库根目录 Python 脚本 ✅ 支持
WindSurf .windsurfrules 仓库根目录或 ~ Python 脚本 ✅ 支持
GitHub Copilot copilot-instructions.md .github/ Python 脚本 ✅ 支持
Gemini CLI GEMINI.md 仓库根目录或 ~ Python 脚本 ✅ 支持
Kiro steering .md .kiro/steering/ Python 脚本 ✅ 支持
RooCode .roo/rules/*.md .roo/rules/ Python 脚本 ✅ 支持
Kilo Code .roo/rules/*.md .roo/rules/ Python 脚本 ✅ 支持
Trae .trae/rules/*.md .trae/rules/ Python 脚本 ✅ 支持
CodeBuddy .codebuddy/rules/*.md .codebuddy/rules/ Python 脚本 ✅ 支持
Augment .augment/rules/*.md .augment/rules/ Python 脚本 ✅ 支持
WorkBuddy SKILL.md（skills） ~/.workbuddy/skills/tinted-ui-tokens-skills/ Python 脚本 ✅ 支持

所有 agent 共用同一个引擎与同一份 INSTRUCTIONS.md。克隆仓库后， 把指令粘贴进你所用 agent 的规则文件即可（见各 agent 文档）。

一键安装

先把仓库克隆下来，再把对应的规则文件指向你用的 agent。所有 agent 共用同一个引擎 与 INSTRUCTIONS.md。

git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-tokens-skills
Agent 接入方式
Claude Code 把克隆下来的文件夹移到 ~/.claude/skills/tinted-ui-tokens-skills/（SKILL.md 会被自动识别）
Cursor cp tinted-ui-tokens-skills/agents/cursor/tinted-ui-tokens-skills.mdc .cursor/rules/
OpenAI Codex cp tinted-ui-tokens-skills/agents/codex/AGENTS.md AGENTS.md
Cline cp tinted-ui-tokens-skills/agents/cline/.clinerules .cline/rules/tinted-ui-tokens-skills
Aider aider --read tinted-ui-tokens-skills/agents/aider/CONVENTIONS.md
WindSurf cp tinted-ui-tokens-skills/agents/windsurf/.windsurfrules .windsurfrules
GitHub Copilot cp tinted-ui-tokens-skills/agents/copilot/copilot-instructions.md .github/copilot-instructions.md
Gemini CLI cp tinted-ui-tokens-skills/agents/gemini-cli/GEMINI.md GEMINI.md
Kiro cp tinted-ui-tokens-skills/agents/kiro/tinted-ui-tokens.md .kiro/steering/tinted-ui-tokens.md
RooCode cp tinted-ui-tokens-skills/agents/roocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md
Kilo Code cp tinted-ui-tokens-skills/agents/kilocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md
Trae cp tinted-ui-tokens-skills/agents/trae/tinted-ui-tokens.md .trae/rules/tinted-ui-tokens.md
CodeBuddy cp tinted-ui-tokens-skills/agents/codebuddy/tinted-ui-tokens.md .codebuddy/rules/tinted-ui-tokens.md
Augment cp tinted-ui-tokens-skills/agents/augment/tinted-ui-tokens.md .augment/rules/tinted-ui-tokens.md
WorkBuddy 把仓库复制到 ~/.workbuddy/skills/tinted-ui-tokens-skills/，或在技能面板安装

各 agent 的完整步骤（全局 vs 项目级、多个项目）见 agents/。

通过 SkillHub 安装（一条命令）

本技能也已发布在 SkillHub —— 用官方 CLI 一行即可安装（无需 clone）：

skillhub install tinted-ui-tokens-skills --namespace user_fa423024

快速开始（任意 agent）

# 1. 获取引擎与指令
git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-tokens-skills

# 2. 直接运行（任意 agent 的终端都能跑）
python ./tinted-ui-tokens-skills/scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --out "./out"

然后按 agents/ 中对应文档把技能接入你的 agent（通常只需把 INSTRUCTIONS.md 粘贴进规则文件）。

典型使用场景

  • 「用 #2563EB 出一套染色 Token 系统」→ 得到 tokens.css + preview.html。
  • 翻新现有 UI：把 tokens.css 丢进去，用染色集合替换纯中性色。
  • 对比方向：分别用两个品牌色各生成一套，直接看预览挑方向。
  • 手动微调：改 build_tokens() 里的混合系数，让染色更强或更弱。

交付前验收清单

发布生成器产出的系统前，先过这 8 项检查（带原理的完整版见 references/principles.md）：

  • 无纯中性色 —— 输出里没有 #FFFFFF / #000000 / #808080。
  • 对比度 —— 正文 ≥ 4.5:1、弱化文字 ≥ 3:1、--color-on-brand ≥ 4.5:1。
  • 暗色模式 —— 切换 preview.html，标题与正文仍清晰。
  • 灰度测试 —— 去饱和后层级仍成立。
  • 语义信号 —— 错误红 / 警告琥珀 / 成功绿，只轻推不换色。
  • 交互态 —— hover/focus/active 用 --color-brand-subtle。
  • 即用性 —— :root 变量能覆盖框架默认值，无需 !important。
  • 格式一致 —— tokens.css / .json / tailwind.config.js / _tokens.scss 数值一致。

使用要求

  • Python 3.10+（仅标准库，无需 pip install）。
  • Windows / macOS / Linux 均支持（引擎为纯 Python）。

使用方法（WorkBuddy / Claude Code）

像下面这样唤起技能即可：

用 #2563EB 出一套染色 Token 系统

Agent 会运行 scripts/generate_tokens.py，并展示 preview.html 与 tokens.css。

其他 agent 请按 agents/ 中的对应文档操作。

命令行用法

python scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --out "./out"
  • --brand（必填）：任意 hex 颜色。
  • --name（可选）：预览页顶部显示的标签。
  • --out（可选）：输出目录，不存在则自动创建。
  • --format css|html|both|json|tailwind|scss|all（可选，默认 both）。 json = W3C DTCG tokens；tailwind = tailwind.config.js；scss = SCSS 变量； all = css + html + json + tailwind + scss。
  • --tint-strength subtle|normal|strong（可选，默认 normal）：中性色向品牌色偏移的强度。

输出内容

tokens.css 为 :root / [data-theme="light"] 与 [data-theme="dark"] 定义：

  • --color-brand、--color-brand-subtle、--color-on-brand （写在 --color-brand 上的可读文字 / 图标色）
  • --color-bg、--color-surface、--color-surface-2、--color-border、--color-border-strong
  • --color-text、--color-text-2、--color-text-muted
  • --color-error / -subtle、--color-warning / -subtle、--color-success / -subtle
  • --shadow-sm、--shadow-md、--shadow-lg

其他格式：tokens.json（W3C DTCG 的 color/* + shadow/*）、tailwind.config.js （theme.extend.colors + boxShadow）、_tokens.scss（明 / 暗 SCSS 变量）。

任何位置都不会输出纯 #FFFFFF、#000000 或 #808080。文字与底色的每一组组合都通过 WCAG AA——生成器会实测对比度并在不达标时自动微调文字，可读性始终优先。

工作原理

生成器是品牌无关的：它把品牌色相以极小的彩度混入每条中性色阶，推导出暖 / 冷 / 中性 三种温度，并输出一整套 Token——而不是把文章里的两套配色写死。

方法论提炼自文章《你的UI廉价，错在颜色》。设计原则与「去饱和灰度测试」详见 references/principles.md。

示例：10 个色系（完整色轮）

下面每一个品牌色，都是用同一条命令生成的 —— python scripts/generate_tokens.py --brand "#XXXXXX"。 明暗双主题，且每一组文字对比与「品牌按钮上的文字色」都保持 WCAG AA（≥4.5:1）。

在线画廊 —— 10 个品牌色覆盖完整色轮，明暗双主题

▶ 打开在线画廊（10 个色系，明 + 暗，可交互）  |  📁 浏览本地 examples/

色系 品牌色 浅色背景 深色背景 on-brand 预览
Ruby #DC2626 #F7F1F1 #241318 4.54:1 预览
Tangerine #EA580C #F8F2F0 #251816 4.82:1 预览
Marigold #F59E0B #F8F5F0 #261F16 7.56:1 预览
Emerald #16A34A #F0F5F2 #10201C 5.12:1 预览
Teal #0D9488 #F0F4F4 #0F1E22 4.57:1 预览
Azure #2563EB #F1F3F8 #11192C 4.90:1 预览
Indigo #4F46E5 #F2F2F7 #15162C 5.94:1 预览
Violet #7C3AED #F4F1F8 #1A152C 5.37:1 预览
Rose #DB2777 #F7F1F3 #231321 4.54:1 预览
Terracotta #C4502A #F6F2F1 #211719 4.56:1 预览

examples/ 下每个文件夹还附带 tokens.css、tokens.json（W3C DTCG）、 tailwind.config.js 与 _tokens.scss——和你自己跑出来的产物完全一致。

文件结构

  • SKILL.md — WorkBuddy / Claude Code 技能清单（触发场景 + 工作流）
  • INSTRUCTIONS.md — 与 agent 无关的指令集（可粘贴进任意 agent 规则）
  • scripts/generate_tokens.py — Token 生成引擎
  • references/principles.md — 设计原则
  • agents/ — 各 agent 接入文档（Claude Code、Cursor、Codex、Cline、Aider、WindSurf、Copilot、Gemini、Kiro、RooCode、Kilo Code、Trae、CodeBuddy、Augment、WorkBuddy）
  • README.md — 本说明文档

说明

生成的 Token 故意把品牌染色保持在很小的比例（几个百分点的彩度），让界面读起来像 「精心设计」而非「套了主题色」。可用 references/principles.md 里的灰度测试来验证一套系统是否合格。

常见问题（FAQ）

我的品牌色是中性色（白 / 黑 / 灰）怎么办？ 生成器照样能跑，但没有可染的色相，会输出接近中性的 Token。这是预期行为——灰色品牌本就没有「温度」可借。除非你想要更强个性，否则不必强行传一个近灰的颜色，或对其使用 --tint-strength strong。

它只输出 CSS 吗？ 不是。--format 支持 css、html、json（W3C DTCG）、tailwind、scss 与 all。用 all 一次得到全部格式。

能用在 React / Tailwind / Flutter / 任何框架吗？ 能。Token 就是标准的 CSS 变量、DTCG JSON、tailwind.config.js 色板与 SCSS 变量——直接丢进任意框架即可。技能只负责生成，由你的应用去消费。

必须手调吗？ 通常不用。想要更强或更弱的染色，先用 --tint-strength subtle|normal|strong，或调整 build_tokens() 里的混合系数。

WCAG AA 是怎么保证的？ 生成器会实测每一组文字与底色的对比度，以及品牌按钮上的文字色，并在不达标时自动微调文字（或 on-brand 色），直到 ≥4.5:1。可读性永远优先于「数值干净」。详见 references/principles.md。

路线图

  • 用 GitHub Action 在每次改动时自动校验技能（frontmatter + 生成器冒烟 + golden + 对比度 + 版本一致性）
  • 一键安装脚本（install.sh / install.ps1）
  • 输出 Figma Variables
  • 从上传的截图自动提取品牌色
  • 在对比页上给出更多示例配色（冷 / 暖 / 中性）

开源协议

MIT

About

tinted-ui-tokens-skills（品牌色 UI 设计 Token skills）— a cross-agent skill that turns one brand color into a complete brand-tinted design-token system (CSS).

Topics

brand-colorclaude-codecross-agentcsscursordesign-tokensskillsui

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages