不只看颜色了：Ant Design Token Lens 让非颜色 Token 和多主题预览也变得直观

前言

如果说前面的版本解决的是"颜色 Token 太抽象"，那么这一次更新解决的就是另外两个更接近日常开发的问题：

非颜色 Token 看得到名字，却看不到实际值
项目里明明有多套主题，但编辑器里始终只能盯着一套结果看

这次，Ant Design Token Lens 重点补上了这两个缺口：

非颜色 Token 直观展示
多命名主题并列预览

它们带来的变化很直接：你在编辑器里看到的，不再只是一个 Token 名，而是更接近最终设计结果本身。

为什么这两个功能值得单独讲

在真实项目里，最常见的 Token 不只有颜色。

你会频繁写到：

padding
borderRadius
fontSize
motionDuration
opacity
zIndex

过去这些 Token 虽然可以用，但阅读成本并不低。你看到 var(--ant-padding)，知道它是间距，却不知道当前到底是 12px、16px 还是 24px。你看到 var(--ant-motion-duration-mid)，知道它是动画时长，却不知道是 0.2s 还是 0.3s。如果一段代码里连续出现很多非颜色 Token，开发者只能不停悬停、来回确认。

而当项目开始走向品牌化、国际化、企业级后台或者多租户场景时，另一个问题会迅速出现：同一个 Token 在不同主题下值不一样，但编辑器只能给你一个模糊的默认结果。你知道项目有 brand-a、brand-b、dark、compact，但你没法在写代码时真正感知"我现在看到的是哪一套"。

这两个问题，本质上都和"信息离得太远"有关。

Ant Design Token Lens 这次做的事情，就是把这些信息直接拉回编辑器现场。

新功能一：非颜色 Token 终于不再靠猜

现在，当你在代码里使用非颜色 Token 时，插件会直接在编辑器中给出轻量但足够明确的数值提示。

比如你写下：

css 复制代码

.card {
  padding: var(--ant-padding);
  border-radius: var(--ant-border-radius);
  transition-duration: var(--ant-motion-duration-mid);
  opacity: var(--ant-opacity-image);
}

编辑器里可以直接看到类似这样的结果：

16px
6px
0.2s · 200ms
0.65 · 65%

这件事的价值，不只是"更好看"，而是显著降低理解成本。

以前你需要 Hover 才能知道值，现在扫一眼代码就能完成判断。尤其是在这些场景里，收益会非常明显：

调整布局间距时，快速比较多个 Token 的尺寸差异
调整圆角与字号时，不必再在脑内换算具体数值
检查动画与透明度时，能立刻知道视觉节奏是否合理
阅读历史代码时，更快理解当时为什么选了这个 Token

而且这个展示并不是简单把原值硬塞到代码旁边。它做了专门的格式化处理：

动画时长会补充毫秒换算，减少脑内计算
透明度会直接显示百分比，更符合直觉
过长的值会自动截断，避免编辑器视觉噪音失控
样式是弱化尾注，不会抢走源码本身的阅读重心

也就是说，它不是把 Hover 搬到行内，而是把最有价值、最需要高频确认的信息提炼出来，直接给你。

对于已经在 CSS、Less、Scss，甚至 JS / TS 中大量使用 Token 的团队来说，这个能力会让 Token 从"抽象变量名"真正变成"能快速理解的设计参数"。

新功能二：多命名主题并列预览，终于能看清项目真实主题结构

如果你的项目里只有内置 light / dark 两套主题，这个问题可能还不算明显。

但一旦进入真实业务，主题结构往往会复杂得多：

不同品牌一套一套主题
同一品牌下还分 light / dark
活动主题、企业版主题、定制客户主题并存

这种情况下，传统"只有一个预览槽位"的方式已经不够用了。

Ant Design Token Lens 现在支持多命名主题并列注册和预览。也就是说，插件不再只是知道"这是 light 还是 dark"，而是能理解"这是 brand-a-light、brand-a-dark，还是 brand-b-light"。

这带来几个非常关键的变化。

第一，你可以显式选择当前要预览的命名主题。

通过命令面板执行：

Ant Design Token Lens: 选择命名主题预览

就可以直接切换到某一个命名主题，或者恢复自动 / 默认预览。

第二，切换的不是一个孤立面板，而是整条编辑器体验链路。

当前活动命名主题会同步影响：

Hover 展示顺序
Completion 候选值
颜色装饰
非颜色数值装饰
JS / TS 里的 token.xxx 解析结果

第三，Hover 不再只给你"当前这一套"，还会把其他命名主题的结果一起带出来做补充。

这意味着你在写代码时，不只是知道"这个 Token 现在是什么值"，还能够知道"它在另一套品牌主题下会不会变"。

这对下面这些场景非常关键：

设计系统维护者检查多品牌主题的一致性
业务开发在切换主题前预估视觉影响范围
UI 联调时快速确认某个 Token 是否只在特定主题下变化
深色模式和品牌主题共存时，避免误判当前预览来源

从结果上看，这个能力让插件从"能看 Token"进一步变成了"能看项目主题体系"。

两个功能叠加之后，编辑器里的 Token 终于更接近设计结果本身

这次更新最有价值的地方，不在于单个功能点，而在于两个能力叠加后的体验变化。

非颜色 Token 直观展示，解决的是"值看不见"。

多命名主题并列预览，解决的是"只看见一套值"。

两者结合之后，你在编辑器里看到的 Token 信息，开始同时具备两个维度：

这个 Token 当前到底是多少
这个 Token 在不同命名主题下分别是多少

前者解决理解效率，后者解决主题上下文。

对于使用 Ant Design 做中后台、设计系统、品牌定制、多租户平台的团队来说，这种变化会非常实际。因为开发中最耗时间的，往往不是"不会写 Token"，而是"确认这个 Token 在当前主题里到底会表现成什么"。

现在，这个确认动作被大幅前置了。

适合谁升级

如果你属于下面这些场景，这次更新基本都会有直接收益：

你们项目里大量使用尺寸、圆角、字号、透明度、动画时长等 Token
你们已经不满足于只看颜色，希望连布局和动效 Token 也能快速理解
你们项目里存在多品牌主题、多租户主题或者多套命名主题并存
你们希望在写代码时就提前看到不同主题下的 Token 结果，而不是等运行后再验证

结语

Ant Design Token Lens 之前解决的是"颜色 Token 在编辑器里终于可见"。

而这次更新之后，它进一步解决了两个更贴近真实项目的问题：非颜色 Token 的理解成本，以及多主题项目的预览成本。

当 padding、radius、motion、opacity 这些过去只能靠 Hover 才能确认的信息，开始直接出现在代码里；当 brand-a、brand-b、dark 这些主题不再只是配置文件里的名字，而能真正参与当前编辑器预览时，Token 开发体验才算真正走向完整。

如果你已经在用 Ant Design Token Lens，这次值得更新体验。

如果你还没用过，现在会是一个很合适的时间点。

立即体验

打开你的 VS Code。
进入扩展市场页面，搜索 "Ant Design Token Lens"（如果你已经安装，可能已经自动更新）。

点我直达 VS Code 插件市场进行安装
如果你是Cursor或者TRAE用户，在插件市场搜不到该插件，可以点击这里下载vsix包来安装

如果你觉得好用，请向身边的前端同事激情安利，或者到 GitHub 仓库给我点亮一颗 🌟 Star！

当然，如果大家有更好的想法或遇到了问题，我们 Issue 区见！期待与你们共同将这款插件打磨得更好。