tinted-ui-tokens-skills

Tinted UI Tokens skills — Skill Instructions · 技能指令

Agent-neutral instruction set for tinted-ui-tokens-skills(品牌色 UI 设计 Token skills). Paste this file’s contents into your agent’s rule / memory / command file (see agents/ for per-agent wiring). The engine is scripts/generate_tokens.py — pure Python standard library, runs anywhere Python 3.10+ is available (Windows / macOS / Linux).

这是与具体 agent 无关的「技能指令」。把本文件内容粘贴进你所用 agent 的规则 / 记忆 / 命令文件即可(各 agent 接入方式见 agents/)。引擎脚本 scripts/generate_tokens.py 仅用 Python 标准库,Python 3.10+ 任意系统可跑。

What it does · 它能做什么

Turn one brand color (hex) into a complete, production-ready brand-tinted design-token system. 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, so the UI reads as “designed” instead of “assembled”.

输入一个品牌色(hex),自动生成一套完整、可直接上线的「染色中性色」设计 Token 系统。任何地方都不使用纯中性色(#FFFFFF / #000000 / #808080):每一个背景、 表面、边框、文字层级、阴影、语义色、渐变与图标,都带上一小撮品牌色的温度。

Method distilled from the essay 《你的UI廉价,错在颜色》.

When to use · 何时使用

Workflow · 工作流

1. Collect the minimum input · 收集最小输入

Only the brand color is required. Ask for it if missing: 只需要品牌色。若缺失则询问:

Do not over-ask. One hex is enough to produce the whole system. 不要追问过多。一个 hex 就足以生成整套系统。

2. Run the generator · 运行生成器

Run the script with the managed or system Python: 用托管或系统 Python 运行脚本:

python scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --out "./out"

Flags · 参数:

Outputs · 产物:

The script prints the detected temperature (warm / cool / balanced) and key values. 脚本会打印检测到的温度(暖 / 冷 / 中性)与关键数值。

3. Present the result · 呈现结果

Show preview.html (opens in a browser / preview panel) and tokens.css. Tell the user the detected temperature and that every neutral is brand-tinted. Offer to regenerate with a different brand color or to hand-tune specific tokens. 展示 preview.html(在浏览器 / 预览面板打开)与 tokens.css,说明检测到的温度与 “所有中性色均被染色”这一事实。可主动提议换品牌色重生成,或手动微调个别 Token。

4. Hand-tuning (optional) · 手动微调(可选)

Consult references/principles.md before editing. Common tweaks: 改之前先读 references/principles.md。常见调整:

Output contract · 输出约定

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

No pure #FFFFFF, #000000, or #808080 is emitted anywhere. Every text-on-surface pair passes WCAG AA (auto-checked + nudged if needed). 任何位置都不会输出纯 #FFFFFF#000000#808080。文字与底色组合均通过 WCAG AA(自动校验,不达标则自动微调),可读性始终优先。

References · 参考