Home

design token lab

先看 HTML 风格，再提取 Tokens

不再收录提示词。这里用真实 UI 样张判断审美，满意后输出可给 Agent 应用到项目里的 design-tokens.md。

5

风格样张

9

UI 部件

1

MD 输出

Token Studio
Export
HTML first, tokens after

先看到风格，再沉淀变量

同一组 token 必须同时撑住导航、Hero、按钮、输入框、卡片、代码块和浮层，才值得进入项目。

choose a direction

风格样张

extracted artifact

design-tokens.md

Token 摘要

让界面像一块有深度的冷色玻璃，靠边框高光、暗部层次和克制暖色建立高级感。

适用：Agent 平台、设计工具、AI 控制台、个人知识库

Primary

#9fe8ff

Accent

#ffd18a

Radius

28px

Shadow

2 levels

markdown previewGlass Luxury
# Design Tokens: Glass Luxury

## Intent

让界面像一块有深度的冷色玻璃，靠边框高光、暗部层次和克制暖色建立高级感。

## Best Fit

Agent 平台、设计工具、AI 控制台、个人知识库

## Preview Contract

这套 tokens 已在同一个 HTML 样张中验证过：导航、Hero、按钮、输入框、Badge、内容卡片、代码块、列表和浮层。

## Token Source

```json
{
  "color": {
    "background": {
      "$type": "color",
      "$value": "#050913"
    },
    "foreground": {
      "$type": "color",
      "$value": "#f7fbff"
    },
    "muted": {
      "$type": "color",
      "$value": "rgba(247, 251, 255, 0.62)"
    },
    "surface": {
      "card": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.09)"
      },
      "elevated": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.14)"
      }
    },
    "primary": {
      "default": {
        "$type": "color",
        "$value": "#9fe8ff"
      },
      "foreground": {
        "$type": "color",
        "$value": "#06111f"
      }
    },
    "accent": {
      "default": {
        "$type": "color",
        "$value": "#ffd18a"
      },
      "foreground": {
        "$type": "color",
        "$value": "#241506"
      }
    },
    "border": {
      "subtle": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.13)"
      },
      "strong": {
        "$type": "color",
        "$value": "rgba(159, 232, 255, 0.32)"
      }
    },
    "ring": {
      "$type": "color",
      "$value": "rgba(159, 232, 255, 0.42)"
    }
  },
  "radius": {
    "card": {
      "$type": "dimension",
      "$value": "28px"
    },
    "button": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "shadow": {
    "card": {
      "$type": "shadow",
      "$value": "inset 0 1px 0 rgba(255,255,255,.2), 0 24px 90px rgba(0,0,0,.32)"
    },
    "floating": {
      "$type": "shadow",
      "$value": "0 34px 110px rgba(0,0,0,.48)"
    }
  },
  "effect": {
    "glassBlur": {
      "$type": "custom",
      "$value": "blur(28px) saturate(1.25)"
    }
  }
}
```

## CSS Variables

```css
:root {
  --background: #050913;
  --foreground: #f7fbff;
  --muted-foreground: rgba(247, 251, 255, 0.62);
  --surface-card: rgba(255, 255, 255, 0.09);
  --surface-elevated: rgba(255, 255, 255, 0.14);
  --primary: #9fe8ff;
  --primary-foreground: #06111f;
  --accent: #ffd18a;
  --accent-foreground: #241506;
  --border-subtle: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(159, 232, 255, 0.32);
  --ring: rgba(159, 232, 255, 0.42);
  --radius-card: 28px;
  --radius-button: 999px;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 90px rgba(0,0,0,.32);
  --shadow-floating: 0 34px 110px rgba(0,0,0,.48);
  --blur-glass: blur(28px) saturate(1.25);
}
```

## Tailwind v4 Mapping

```css
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-card: var(--surface-card);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border-subtle);
  --color-ring: var(--ring);
  --radius-lg: var(--radius-card);
  --radius-md: var(--radius-button);
}
```

## Component Mapping

| Component | Tokens |
| --- | --- |
| Page | `--background`, `--foreground` |
| Card | `--surface-card`, `--border-subtle`, `--radius-card`, `--shadow-card` |
| Floating Panel | `--surface-elevated`, `--border-strong`, `--shadow-floating` |
| Button | `--primary`, `--primary-foreground`, `--radius-button` |
| Badge | `--accent`, `--accent-foreground` |
| Focus Ring | `--ring` |

## Usage Rules

- 先应用到真实组件样张，再全局替换项目主题。
- 大面积背景只用 `--background` 和 `--surface-card`，强调色只用于按钮、Badge、链接和状态。
- 阴影最多保留 `card` 与 `floating` 两层，避免廉价发光。
- 圆角只使用 `card` 与 `button` 两组，不要每个组件单独造半径。

## Avoid

- 不要大面积纯蓝渐变
- 不要让所有卡片都发光
- 不要把正文压到 55% 以下透明度