31. 🎯 设计令牌 Design Tokens ★★★☆☆

🌏 Web 网页规范

  • CSS 自定义变量三层架构 (Global-Alias-Comp)
  • Figma Tokens / Style Dictionary 交付链
  • 自动化打包分发与 JSON 配置同步

📱 App 移动端规范

  • 原生语义色彩令牌与 Asset Catalog 配置
  • SwiftUI / Jetpack Compose 静态编译类映射
  • 多主题皮肤包本地映射防错机制

Web CSS 变量管理与自动化主题分发

Web CSS Custom Properties & Build Chains

Web 端将设计系统的色值、字号、圆角、阴影等导出为 CSS 变量挂载在 `:root` 节点。通过打包工具（如 PostCSS）分发，实现全站多主题、暗黑模式秒级渲染和统一编译。

App 原生强类型变量类与 JSON 导入

App Strongly-typed Swift/Kotlin Classes & XML Map

App 移动端通过 Style Dictionary 工具将 Figma JSON 格式的设计令牌转换为 Swift 静态常量结构体或 Kotlin 强类型对象类。编译期静态生成，防多端色差与解析崩坏。

LIVE PLAYGROUND: 实时令牌编辑器与全局组件样式映射沙盒 拖动滑块微调色彩、圆角与阴影模糊半径令牌，卡片外观将依据 CSS 变量映射实时自动重算
https://web.meta-ui.edu/design-tokens
09:41
📶 🔋
系统色相 Hue: 220
圆角 Radius: 8px
阴影 Shadow: 4px

预览组件

该组件的外观全部绑定在 CSS 变量 Token 上。

📋 大模型统一 Prompt (LLM Prompt)