77[ ![ Engine: Python 3.10+] ( https://img.shields.io/badge/engine-Python%203.10%2B-green.svg )] ( #requirements )
88[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg )] ( LICENSE )
99[ ![ Live examples] ( https://img.shields.io/badge/live-examples-2563EB.svg )] ( https://truman-t3.github.io/tinted-ui-tokens-skills/examples/ )
10+ [ ![ Version] ( https://img.shields.io/github/v/release/truman-t3/tinted-ui-tokens-skills?label=version&color=blue )] ( https://github.com/truman-t3/tinted-ui-tokens-skills/releases )
11+ [ ![ Stars] ( https://img.shields.io/github/stars/truman-t3/tinted-ui-tokens-skills?style=social )] ( https://github.com/truman-t3/tinted-ui-tokens-skills/stargazers )
12+ [ ![ Platforms] ( https://img.shields.io/badge/agents-15%20supported-9cf )] ( agents/ )
13+ [ ![ Accessibility] ( https://img.shields.io/badge/WCAG%20AA-%E2%89%A5%204.5%3A1-brightgreen )] ( references/principles.md )
1014
1115English | [ 中文] ( #chinese )
1216
1317> ** ▶ Live examples:** https://truman-t3.github.io/tinted-ui-tokens-skills/examples/ — four brand colors (blue / green / warm / violet), light + dark, WCAG AA guaranteed. Source in [ ` examples/ ` ] ( examples/ ) .
1418
1519A ** cross-agent** skill that turns one brand color into a complete,
1620production-ready ** brand-tinted design-token system** — so your UI stops looking
17- cheap from flat neutral colors. It works in Claude Code, Cursor, OpenAI Codex,
18- Cline, Aider, WindSurf, GitHub Copilot, Gemini CLI, and WorkBuddy.
21+ cheap from flat neutral colors. It works in ** 15 AI coding agents**
22+ (Claude Code, Cursor, OpenAI Codex, Cline, Aider, WindSurf, GitHub Copilot,
23+ Gemini CLI, Kiro, RooCode, Kilo Code, Trae, CodeBuddy, Augment, and WorkBuddy).
1924
2025No pure neutral colors anywhere (` #FFFFFF ` , ` #000000 ` , ` #808080 ` ): every
2126background, surface, border, text layer, shadow, semantic color, gradient, and
@@ -66,6 +71,12 @@ goes*. Full wiring steps are in [`agents/`](agents/).
6671| ** WindSurf** | ` .windsurfrules ` | repo root or ` ~ ` | Python script | ✅ Supported |
6772| ** GitHub Copilot** | ` copilot-instructions.md ` | ` .github/ ` | Python script | ✅ Supported |
6873| ** Gemini CLI** | ` GEMINI.md ` | repo root or ` ~ ` | Python script | ✅ Supported |
74+ | ** Kiro** | steering ` .md ` | ` .kiro/steering/ ` | Python script | ✅ Supported |
75+ | ** RooCode** | ` .roo/rules/*.md ` | ` .roo/rules/ ` | Python script | ✅ Supported |
76+ | ** Kilo Code** | ` .roo/rules/*.md ` | ` .roo/rules/ ` | Python script | ✅ Supported |
77+ | ** Trae** | ` .trae/rules/*.md ` | ` .trae/rules/ ` | Python script | ✅ Supported |
78+ | ** CodeBuddy** | ` .codebuddy/rules/*.md ` | ` .codebuddy/rules/ ` | Python script | ✅ Supported |
79+ | ** Augment** | ` .augment/rules/*.md ` | ` .augment/rules/ ` | Python script | ✅ Supported |
6980| ** WorkBuddy** | ` SKILL.md ` (skills) | ` ~/.workbuddy/skills/tinted-ui-tokens-skills/ ` | Python script | ✅ Supported |
7081
7182> All agents share the same engine and the same [ ` INSTRUCTIONS.md ` ] ( INSTRUCTIONS.md ) .
@@ -90,6 +101,12 @@ git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-token
90101| ** WindSurf** | ` cp tinted-ui-tokens-skills/agents/windsurf/.windsurfrules .windsurfrules ` |
91102| ** GitHub Copilot** | ` cp tinted-ui-tokens-skills/agents/copilot/copilot-instructions.md .github/copilot-instructions.md ` |
92103| ** Gemini CLI** | ` cp tinted-ui-tokens-skills/agents/gemini-cli/GEMINI.md GEMINI.md ` |
104+ | ** Kiro** | ` cp tinted-ui-tokens-skills/agents/kiro/tinted-ui-tokens.md .kiro/steering/tinted-ui-tokens.md ` |
105+ | ** RooCode** | ` cp tinted-ui-tokens-skills/agents/roocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md ` |
106+ | ** Kilo Code** | ` cp tinted-ui-tokens-skills/agents/kilocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md ` |
107+ | ** Trae** | ` cp tinted-ui-tokens-skills/agents/trae/tinted-ui-tokens.md .trae/rules/tinted-ui-tokens.md ` |
108+ | ** CodeBuddy** | ` cp tinted-ui-tokens-skills/agents/codebuddy/tinted-ui-tokens.md .codebuddy/rules/tinted-ui-tokens.md ` |
109+ | ** Augment** | ` cp tinted-ui-tokens-skills/agents/augment/tinted-ui-tokens.md .augment/rules/tinted-ui-tokens.md ` |
93110| ** WorkBuddy** | Copy the repo to ` ~/.workbuddy/skills/tinted-ui-tokens-skills/ ` , or install from the Skills panel |
94111
95112> Full per-agent steps (global vs project scope, multiple projects) are in
@@ -115,6 +132,20 @@ Then wire it into your agent by following the matching doc in
115132- Compare directions: generate for two brand colors and eyeball the previews.
116133- Hand-tune: change the blend factor in ` build_tokens() ` for a stronger or weaker tint.
117134
135+ ## Pre-delivery Checklist
136+
137+ Before shipping a system the generator produced, run this 8-point check
138+ (full version with rationale in [ ` references/principles.md ` ] ( references/principles.md ) ):
139+
140+ - [ ] ** No pure neutrals** — no ` #FFFFFF ` / ` #000000 ` / ` #808080 ` in the output.
141+ - [ ] ** Contrast** — body ≥ 4.5:1, muted ≥ 3:1, ` --color-on-brand ` ≥ 4.5:1.
142+ - [ ] ** Dark mode** — toggle ` preview.html ` ; title + body stay legible.
143+ - [ ] ** Grayscale test** — desaturate; hierarchy still reads.
144+ - [ ] ** Semantic signal** — error red / warning amber / success green, only leaned.
145+ - [ ] ** Interactive states** — hover/focus/active use ` --color-brand-subtle ` .
146+ - [ ] ** Drop-in sanity** — ` :root ` vars override framework defaults, no ` !important ` .
147+ - [ ] ** Format parity** — ` tokens.css ` / ` .json ` / ` tailwind.config.js ` / ` _tokens.scss ` agree.
148+
118149## Requirements
119150
120151- Python 3.10+ (standard library only — no ` pip install ` needed).
@@ -180,7 +211,7 @@ the desaturation grayscale test.
180211- ` INSTRUCTIONS.md ` — agent-neutral instruction set (paste into any agent's rules)
181212- ` scripts/generate_tokens.py ` — the token generator (the engine)
182213- ` references/principles.md ` — design principles
183- - ` agents/ ` — per-agent wiring docs (Claude Code, Cursor, Codex, Cline, Aider, WindSurf, Copilot, Gemini)
214+ - ` agents/ ` — per-agent wiring docs (Claude Code, Cursor, Codex, Cline, Aider, WindSurf, Copilot, Gemini, Kiro, RooCode, Kilo Code, Trae, CodeBuddy, Augment, WorkBuddy )
184215- ` README.md ` — this document
185216
186217## Notes
@@ -191,10 +222,11 @@ the grayscale test in [`references/principles.md`](references/principles.md).
191222
192223## Roadmap
193224
194- - [ ] Tailwind / Figma variable export
225+ - [x] GitHub Action to validate the skill on every change (frontmatter + generator smoke + golden + contrast + version check)
226+ - [ ] One-command install script (` install.sh ` / ` install.ps1 ` )
227+ - [ ] Figma Variables export
195228- [ ] Brand-color extraction from an uploaded screenshot
196229- [ ] More example palettes (cool / warm / balanced) on a comparison page
197- - [ ] GitHub Action to validate the skill on every change
198230
199231## License
200232
@@ -208,12 +240,17 @@ MIT
208240
209241[ English] ( #english ) | 中文
210242
243+ [ ![ Version] ( https://img.shields.io/github/v/release/truman-t3/tinted-ui-tokens-skills?label=version&color=blue )] ( https://github.com/truman-t3/tinted-ui-tokens-skills/releases )
244+ [ ![ Stars] ( https://img.shields.io/github/stars/truman-t3/tinted-ui-tokens-skills?style=social )] ( https://github.com/truman-t3/tinted-ui-tokens-skills/stargazers )
245+ [ ![ Platforms] ( https://img.shields.io/badge/agents-15%20supported-9cf )] ( agents/ )
246+ [ ![ Accessibility] ( https://img.shields.io/badge/WCAG%20AA-%E2%89%A5%204.5%3A1-brightgreen )] ( references/principles.md )
247+
211248> ** ▶ 在线预览:** https://truman-t3.github.io/tinted-ui-tokens-skills/examples/ —— 四个品牌色(蓝 / 绿 / 暖 / 紫),明暗双主题,WCAG AA 保证。源码见 [ ` examples/ ` ] ( examples/ ) 。
212249
213250一个** 跨 agent** 的技能:输入一个品牌色,自动生成一套完整、可直接上线的「染色中性色」
214- 设计 Token 系统——让你的 UI 不再因为扁平的中性色而显得廉价。它可在 Claude Code、
215- Cursor、OpenAI Codex、Cline、Aider、WindSurf、GitHub Copilot、Gemini CLI 与
216- WorkBuddy 中使用 。
251+ 设计 Token 系统——让你的 UI 不再因为扁平的中性色而显得廉价。它可在 ** 15 个 AI 编程 agent **
252+ 中使用(Claude Code、 Cursor、Codex、Cline、Aider、WindSurf、Copilot、Gemini、Kiro、
253+ RooCode、Kilo Code、Trae、CodeBuddy、Augment 与 WorkBuddy) 。
217254
218255任何地方都不使用纯中性色(` #FFFFFF ` 、` #000000 ` 、` #808080 ` ):每一个背景、表面、边框、
219256文字层级、阴影、语义色、渐变与图标,都带上一小撮品牌色的温度。
@@ -259,6 +296,12 @@ WorkBuddy 中使用。
259296| ** WindSurf** | ` .windsurfrules ` | 仓库根目录或 ` ~ ` | Python 脚本 | ✅ 支持 |
260297| ** GitHub Copilot** | ` copilot-instructions.md ` | ` .github/ ` | Python 脚本 | ✅ 支持 |
261298| ** Gemini CLI** | ` GEMINI.md ` | 仓库根目录或 ` ~ ` | Python 脚本 | ✅ 支持 |
299+ | ** Kiro** | steering ` .md ` | ` .kiro/steering/ ` | Python 脚本 | ✅ 支持 |
300+ | ** RooCode** | ` .roo/rules/*.md ` | ` .roo/rules/ ` | Python 脚本 | ✅ 支持 |
301+ | ** Kilo Code** | ` .roo/rules/*.md ` | ` .roo/rules/ ` | Python 脚本 | ✅ 支持 |
302+ | ** Trae** | ` .trae/rules/*.md ` | ` .trae/rules/ ` | Python 脚本 | ✅ 支持 |
303+ | ** CodeBuddy** | ` .codebuddy/rules/*.md ` | ` .codebuddy/rules/ ` | Python 脚本 | ✅ 支持 |
304+ | ** Augment** | ` .augment/rules/*.md ` | ` .augment/rules/ ` | Python 脚本 | ✅ 支持 |
262305| ** WorkBuddy** | ` SKILL.md ` (skills) | ` ~/.workbuddy/skills/tinted-ui-tokens-skills/ ` | Python 脚本 | ✅ 支持 |
263306
264307> 所有 agent 共用同一个引擎与同一份 [ ` INSTRUCTIONS.md ` ] ( INSTRUCTIONS.md ) 。克隆仓库后,
@@ -283,6 +326,12 @@ git clone https://github.com/truman-t3/tinted-ui-tokens-skills ./tinted-ui-token
283326| ** WindSurf** | ` cp tinted-ui-tokens-skills/agents/windsurf/.windsurfrules .windsurfrules ` |
284327| ** GitHub Copilot** | ` cp tinted-ui-tokens-skills/agents/copilot/copilot-instructions.md .github/copilot-instructions.md ` |
285328| ** Gemini CLI** | ` cp tinted-ui-tokens-skills/agents/gemini-cli/GEMINI.md GEMINI.md ` |
329+ | ** Kiro** | ` cp tinted-ui-tokens-skills/agents/kiro/tinted-ui-tokens.md .kiro/steering/tinted-ui-tokens.md ` |
330+ | ** RooCode** | ` cp tinted-ui-tokens-skills/agents/roocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md ` |
331+ | ** Kilo Code** | ` cp tinted-ui-tokens-skills/agents/kilocode/tinted-ui-tokens.md .roo/rules/tinted-ui-tokens.md ` |
332+ | ** Trae** | ` cp tinted-ui-tokens-skills/agents/trae/tinted-ui-tokens.md .trae/rules/tinted-ui-tokens.md ` |
333+ | ** CodeBuddy** | ` cp tinted-ui-tokens-skills/agents/codebuddy/tinted-ui-tokens.md .codebuddy/rules/tinted-ui-tokens.md ` |
334+ | ** Augment** | ` cp tinted-ui-tokens-skills/agents/augment/tinted-ui-tokens.md .augment/rules/tinted-ui-tokens.md ` |
286335| ** WorkBuddy** | 把仓库复制到 ` ~/.workbuddy/skills/tinted-ui-tokens-skills/ ` ,或在技能面板安装 |
287336
288337> 各 agent 的完整步骤(全局 vs 项目级、多个项目)见 [ ` agents/ ` ] ( agents/ ) 。
@@ -307,6 +356,20 @@ python ./tinted-ui-tokens-skills/scripts/generate_tokens.py --brand "#2563EB" --
307356- 对比方向:分别用两个品牌色各生成一套,直接看预览挑方向。
308357- 手动微调:改 ` build_tokens() ` 里的混合系数,让染色更强或更弱。
309358
359+ ## 交付前验收清单
360+
361+ 发布生成器产出的系统前,先过这 8 项检查(带原理的完整版见
362+ [ ` references/principles.md ` ] ( references/principles.md ) ):
363+
364+ - [ ] ** 无纯中性色** —— 输出里没有 ` #FFFFFF ` / ` #000000 ` / ` #808080 ` 。
365+ - [ ] ** 对比度** —— 正文 ≥ 4.5:1、弱化文字 ≥ 3:1、` --color-on-brand ` ≥ 4.5:1。
366+ - [ ] ** 暗色模式** —— 切换 ` preview.html ` ,标题与正文仍清晰。
367+ - [ ] ** 灰度测试** —— 去饱和后层级仍成立。
368+ - [ ] ** 语义信号** —— 错误红 / 警告琥珀 / 成功绿,只轻推不换色。
369+ - [ ] ** 交互态** —— hover/focus/active 用 ` --color-brand-subtle ` 。
370+ - [ ] ** 即用性** —— ` :root ` 变量能覆盖框架默认值,无需 ` !important ` 。
371+ - [ ] ** 格式一致** —— ` tokens.css ` / ` .json ` / ` tailwind.config.js ` / ` _tokens.scss ` 数值一致。
372+
310373## 使用要求
311374
312375- Python 3.10+(仅标准库,无需 ` pip install ` )。
@@ -367,7 +430,7 @@ WCAG AA——生成器会实测对比度并在不达标时自动微调文字,
367430- ` INSTRUCTIONS.md ` — 与 agent 无关的指令集(可粘贴进任意 agent 规则)
368431- ` scripts/generate_tokens.py ` — Token 生成引擎
369432- ` references/principles.md ` — 设计原则
370- - ` agents/ ` — 各 agent 接入文档(Claude Code、Cursor、Codex、Cline、Aider、WindSurf、Copilot、Gemini)
433+ - ` agents/ ` — 各 agent 接入文档(Claude Code、Cursor、Codex、Cline、Aider、WindSurf、Copilot、Gemini、Kiro、RooCode、Kilo Code、Trae、CodeBuddy、Augment、WorkBuddy )
371434- ` README.md ` — 本说明文档
372435
373436## 说明
@@ -378,10 +441,11 @@ WCAG AA——生成器会实测对比度并在不达标时自动微调文字,
378441
379442## 路线图
380443
381- - [ ] 输出 Tailwind / Figma 变量
444+ - [x] 用 GitHub Action 在每次改动时自动校验技能(frontmatter + 生成器冒烟 + golden + 对比度 + 版本一致性)
445+ - [ ] 一键安装脚本(` install.sh ` / ` install.ps1 ` )
446+ - [ ] 输出 Figma Variables
382447- [ ] 从上传的截图自动提取品牌色
383448- [ ] 在对比页上给出更多示例配色(冷 / 暖 / 中性)
384- - [ ] 用 GitHub Action 在每次改动时自动校验技能
385449
386450## 开源协议
387451
0 commit comments