技能介绍

问题在哪

很多界面「像拼出来的」：品牌色只出现在主按钮和 Logo 上，背景、边框、文字仍是纯 #FFFFFF、#000000 或 #808080 这类中性灰。视觉层次有了，但整体缺少统一的「温度」，廉价感往往就出在这里。文章《你的UI廉价，错在颜色》里的做法很直接：不要在界面里使用纯中性色——把品牌色相以约 2–3% 的强度混入每一层背景、表面、边框、文字、阴影、语义色和图标，让品牌色「流进」系统，而不是「贴」在上面。

技能如何工作

你只需要提供一个 品牌色（如 #2563EB）。技能会调用内置的 scripts/generate_tokens.py（品牌无关：把每条中性色阶朝给定色相混合），推导 warm / cool / balanced 等温度，并生成可落地的产物：

tokens.css：:root 与 [data-theme="dark"] 下的 --color-brand、--color-bg、--color-surface、语义色与阴影等自定义属性
preview.html：自带明暗切换的独立预览页
可选 --format：css、html、json（W3C DTCG）、tailwind、scss 或 all

生成器会对 文本与背景 组合做 WCAG AA 检查并在需要时微调；输出里不会出现纯 #FFFFFF / #000000 / #808080。想加强或减弱浸润感可用 --tint-strength subtle|normal|strong，无需手改色值。

适用与边界

适合：已有 hex、要一套明/暗主题或语义色 Token；或想快速验证某个品牌色方向。深度改单枚 Token 的规则与反模式见技能内的 references/principles.md。本技能解决的是 系统化色票与对比度，不替代完整的组件库或动效规范；产品名、输出目录等为可选标签，一个 hex 即可跑通全流程。