SuperAPI AI 工具集

frontend-impl-design-tokens

设计与创作

查看项目

更新于 10-15 22:18

技能介绍

用途:为 Web 应用或组件库设计遵循 W3C Design Tokens Community Group Format Module 2025.10 草案的令牌系统,并生成置于级联层下的 CSS 自定义属性。

主要能力:覆盖 DTCG JSON 结构、七种基础类型(color、dimension、fontFamily、fontWeight、duration、cubicBezier、number)与六种复合类型(border、shadow、transition、strokeStyle、gradient、typography)、别名解析规则、primitive→semantic→component 三层链、可动画令牌的 @property 注册,以及运行时主题切换。

必要用法:始终按 DTCG JSON 形状编写令牌,并通过构建管线(Style Dictionary、Tokens Studio 导出或自定义转换器)转换为 CSS 自定义属性,不在运行时消费原始 JSON;令牌统一置于 @layer tokens 等专用层;被过渡或动画的属性必须用 @property 注册;别名在 JSON 内用 {group.token} 引用;命名采用 --<category>-<role>-<variant>。主题切换可用 color-scheme 与 light-dark(),或用 data-theme 属性配合级联层。

限制:DTCG 格式模块为 2025.10 草案,规范前言明确其尚未达到可生产实现状态,工具需固定该草案版本,在进入候选推荐前不应期待格式稳定;内部文档提及 DTCG 一致性时应披露草案状态。本技能不涵盖 OKLCH 调色板生成、明暗模式实现细节及具体工具深入讲解。