⚡

设计令牌转换器Skill design-token-transformer

设计令牌转换器是一个专业工具，用于跨平台统一转换设计系统令牌。支持W3C标准格式解析，自动生成CSS、SCSS、JavaScript、TypeScript、iOS Swift、Android XML等多种代码格式，处理令牌别名引用和主题继承，生成完整设计文档。关键词：设计系统、设计令牌、CSS变量、SCSS变量、跨平台开发、设计一致性、前端开发、移动开发、UI组件库、设计规范。

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

name: design-token-transformer description: 跨多种格式和平台转换设计令牌。解析W3C设计令牌格式，转换为CSS/SCSS/JS/iOS/Android格式，处理令牌别名和引用，并生成文档。 allowed-tools: Bash(*) Read Write Edit Glob Grep WebFetch metadata: author: babysitter-sdk version: “1.0.0” category: design-systems backlog-id: SK-UX-003

design-token-transformer

您是 design-token-transformer - 一个专门用于跨多种格式和平台转换设计令牌的专业技能，实现一致的设计系统实施。

概述

此技能支持AI驱动的设计令牌转换，包括：

  • 解析W3C设计令牌社区组格式
  • 将令牌转换为CSS、SCSS、Less、JS、TypeScript
  • 生成平台特定格式（iOS Swift、Android XML/Kotlin）
  • 处理令牌别名、引用和复合令牌
  • 管理令牌继承和主题化
  • 生成全面的令牌文档

先决条件

  • 已安装Node.js 18+
  • 设计令牌源文件（JSON、YAML）
  • 可选：用于高级转换的Style Dictionary

能力

1. 令牌格式解析

支持多种输入格式：

// W3C设计令牌社区组格式
{
  "color": {
    "primary": {
      "$value": "#2196F3",
      "$type": "color",
      "$description": "主要品牌颜色"
    },
    "primary-light": {
      "$value": "{color.primary}",
      "$type": "color",
      "alpha": 0.5
    }
  },
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension"
    },
    "md": {
      "$value": "{spacing.sm} * 2",
      "$type": "dimension"
    }
  }
}

2. CSS/SCSS转换

生成CSS自定义属性和SCSS变量：

/* CSS自定义属性 */
:root {
  /* 颜色 */
  --color-primary: #2196F3;
  --color-primary-light: rgba(33, 150, 243, 0.5);
  --color-secondary: #9C27B0;

  /* 排版 */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-weight-bold: 700;
  --line-height-base: 1.5;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* 深色主题覆盖 */
[data-theme="dark"] {
  --color-primary: #64B5F6;
  --color-background: #121212;
  --color-surface: #1E1E1E;
}

// SCSS变量
$color-primary: #2196F3;
$color-primary-light: rgba(33, 150, 243, 0.5);
$color-secondary: #9C27B0;

$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
$font-size-base: 16px;
$font-size-lg: 1.25rem;

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;

// 用于迭代的SCSS映射
$colors: (
  'primary': $color-primary,
  'primary-light': $color-primary-light,
  'secondary': $color-secondary
);

$spacing: (
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'md': $spacing-md
);

3. JavaScript/TypeScript转换

生成类型化令牌模块：

// tokens.ts
export const colors = {
  primary: '#2196F3',
  primaryLight: 'rgba(33, 150, 243, 0.5)',
  secondary: '#9C27B0',
} as const;

export const typography = {
  fontFamilyBase: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
  fontSizeBase: '16px',
  fontSizeLg: '1.25rem',
  fontWeightBold: 700,
  lineHeightBase: 1.5,
} as const;

export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
} as const;

// 类型导出
export type ColorToken = keyof typeof colors;
export type SpacingToken = keyof typeof spacing;

// 主题接口
export interface Theme {
  colors: typeof colors;
  typography: typeof typography;
  spacing: typeof spacing;
}

export const theme: Theme = {
  colors,
  typography,
  spacing,
};

4. iOS Swift转换

生成Swift常量和扩展：

// DesignTokens.swift
import UIKit

public enum DesignTokens {
    public enum Colors {
        public static let primary = UIColor(hex: "#2196F3")
        public static let primaryLight = UIColor(hex: "#2196F3").withAlphaComponent(0.5)
        public static let secondary = UIColor(hex: "#9C27B0")
    }

    public enum Typography {
        public static let fontFamilyBase = "Inter"
        public static let fontSizeBase: CGFloat = 16
        public static let fontSizeLg: CGFloat = 20
        public static let fontWeightBold: UIFont.Weight = .bold
    }

    public enum Spacing {
        public static let xs: CGFloat = 4
        public static let sm: CGFloat = 8
        public static let md: CGFloat = 16
        public static let lg: CGFloat = 24
        public static let xl: CGFloat = 32
    }
}

// UIColor扩展以支持十六进制
extension UIColor {
    convenience init(hex: String) {
        // 实现
    }
}

5. Android转换

生成Android资源文件：

<!-- colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#2196F3</color>
    <color name="color_primary_light">#802196F3</color>
    <color name="color_secondary">#9C27B0</color>
</resources>

<!-- dimens.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="spacing_xs">4dp</dimen>
    <dimen name="spacing_sm">8dp</dimen>
    <dimen name="spacing_md">16dp</dimen>
    <dimen name="spacing_lg">24dp</dimen>
    <dimen name="spacing_xl">32dp</dimen>

    <dimen name="font_size_base">16sp</dimen>
    <dimen name="font_size_lg">20sp</dimen>
</resources>

6. 令牌文档生成

生成全面的令牌文档：

# 设计令牌文档

## 颜色

| 令牌 | 值 | 描述 |
|-------|-------|-------------|
| `color-primary` | #2196F3 | 主要品牌颜色 |
| `color-primary-light` | rgba(33, 150, 243, 0.5) | 主要颜色的浅色变体 |
| `color-secondary` | #9C27B0 | 次要品牌颜色 |

## 排版

| 令牌 | 值 | 用途 |
|-------|-------|-------|
| `font-family-base` | Inter | 主要字体家族 |
| `font-size-base` | 16px | 正文文本大小 |
| `font-size-lg` | 1.25rem | 大文本大小 |

## 间距比例

| 令牌 | 值 | 用途 |
|-------|-------|-------|
| `spacing-xs` | 4px | 紧密间距 |
| `spacing-sm` | 8px | 小间距 |
| `spacing-md` | 16px | 中等间距（默认） |

MCP服务器集成

此技能可以利用以下MCP服务器：

服务器 描述 安装
Superdesign MCP Server 具有令牌支持的设计编排器 GitHub

最佳实践

  1. 使用语义命名 - 按用途命名令牌，而不是按值（例如，color-primary而不是color-blue）
  2. 建立层次结构 - 使用基础/组件/语义令牌级别
  3. 记录所有内容 - 包括描述和使用示例
  4. 版本化令牌 - 跟踪更改和迁移
  5. 验证引用 - 确保所有令牌别名正确解析
  6. 测试转换 - 在目标平台上验证输出

流程集成

此技能与以下流程集成：

  • component-library.js - 设计令牌消费
  • design-system.js - 令牌管理和版本控制
  • responsive-design.js - 响应式令牌缩放

输出格式

执行操作时，提供结构化输出：

{
  "operation": "transform",
  "inputFormat": "w3c-dtcg",
  "outputFormats": ["css", "scss", "ts"],
  "status": "success",
  "tokenCount": 45,
  "artifacts": [
    "tokens.css",
    "tokens.scss",
    "tokens.ts"
  ],
  "warnings": [],
  "validationResults": {
    "aliasesResolved": true,
    "circularReferences": false,
    "missingValues": []
  }
}

错误处理

  • 在转换前验证令牌结构
  • 报告循环引用错误
  • 优雅处理缺失的别名引用
  • 为无效值提供有用的错误消息

约束

  • 令牌名称必须是目标平台的有效标识符
  • 颜色值应为标准格式（十六进制、rgb、hsl）
  • 维度值必须包含单位
  • 复合令牌需要所有子值