tinted-ui-tokens-skillslisted

Generates a complete, production-ready design-token system from a single brand color, where every neutral surface (backgrounds, borders, text, shadows, semantic colors, gradients, icons, dark mode) carries a few percent of the brand's temperature instead of using pure neutral colors. Use when a user asks to generate, build, or design UI color tokens, a design system, CSS variables, a tinted color palette, or a branded theme from a brand color or hex, or wants to make an existing UI look more premium by fixing flat neutral colors. Trigger phrases include 给我生成一套设计Token, 用这个品牌色出一套配色, UI颜色太廉价了, 生成染色中性色系统, build a design system from #XXXXXX, tinted neutral palette.
truman-t3/tinted-ui-tokens-skills · ★ 0 · Web & Frontend · score 75

Install: claude install-skill truman-t3/tinted-ui-tokens-skills

# Tinted UI Tokens skills（品牌色 UI 设计 Token skills） ## Overview Turn one brand color into a full design-token system where the brand "flows through" the interface instead of sitting on top of it. The core technique (from the essay 《你的UI廉价，错在颜色》) is: **never use pure neutral colors** — blend 2–3% of the brand hue into every background, surface, border, text layer, shadow, semantic color, gradient and icon. The result reads as "designed" rather than "assembled". The bundled generator (`scripts/generate_tokens.py`) is brand-agnostic: it derives the temperature by blending each neutral ramp toward the given brand hue, so it works for any color, not just the two palettes in the original essay. ### Cross-agent · 跨 agent This skill is **agent-agnostic**. WorkBuddy and Claude Code read this `SKILL.md` directly. For every other agent (Cursor, OpenAI Codex, Cline, Aider, WindSurf, GitHub Copilot, Gemini CLI), the same instructions live in [`INSTRUCTIONS.md`](INSTRUCTIONS.md) and are wired in via the docs under [`agents/`](agents/) — each agent only differs in where its rule file goes. The engine (`scripts/generate_tokens.py`) is identical everywhere. See the `Cross-Agent Compatibility` table in `README.md`. > 中文：本技能与具体 agent 无关。WorkBuddy 与 Claude Code 直接读取本 `SKILL.md`； > 其余 agent（Cursor、OpenAI Codex、Cline、Aider、WindSurf、GitHub Copilot、Gemini CLI） > 使用 [`INSTRUCTIONS.md`](INSTRUCTIONS.md) 中的同一份指令，并按 [`agents/`](agents/) > 下的文档接入——差异只在规则文件的位置。引擎（`scripts/generate_tokens.py`）各处一致。 > 详