# Design Tokens System

> Comprehensive design token architecture and system implementation. Use this skill for token definition and structure, token generation and transformation, design token distribution across platforms, Figma Variables, design token sync automation, and multi-platform token consumption (web, mobile, docs).

- **Type:** Skill
- **Install:** `agentstack add skill-plugin87-full-stack-design-skills-design-tokens-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [plugin87](https://agentstack.voostack.com/s/plugin87)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [plugin87](https://github.com/plugin87)
- **Source:** https://github.com/plugin87/full-stack-design-skills/tree/main/skills/tier-3-workflow-integration/design-tokens-system

## Install

```sh
agentstack add skill-plugin87-full-stack-design-skills-design-tokens-system
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design Tokens System

Comprehensive design token architecture for consistent design systems.

Design tokens are the atomic units of design (colors, spacing, typography). A robust token system ensures consistency across all platforms.

---

## Token Architecture

### Four-Layer Token Structure

```
Base Tokens (Primitives)
  ↓
Semantic Tokens (Context-aware)
  ↓
Component Tokens (Component-specific)
  ↓
Application (Usage)
```

### Layer 1: Base Tokens (Primitives)

```json
{
  "color": {
    "gray-50": "#f9fafb",
    "gray-100": "#f3f4f6",
    "gray-900": "#111827"
  },
  "spacing": {
    "4": "4px",
    "8": "8px",
    "16": "16px"
  }
}
```

### Layer 2: Semantic Tokens (Context-Aware)

```json
{
  "color": {
    "text-primary": "{color.gray-900}",
    "text-secondary": "{color.gray-600}",
    "background-primary": "{color.gray-50}",
    "border": "{color.gray-200}",
    "interactive-primary": "#2563eb",
    "interactive-hover": "#1d4ed8"
  }
}
```

### Layer 3: Component Tokens

```json
{
  "button": {
    "primary": {
      "background": "{color.interactive-primary}",
      "text": "#ffffff",
      "padding": "{spacing.12} {spacing.16}",
      "border-radius": "4px"
    }
  }
}
```

---

## Token Definition Formats

### W3C Design Tokens Format

```json
{
  "colors": {
    "primary": {
      "$value": "#2563eb",
      "$description": "Primary brand color",
      "$type": "color"
    }
  },
  "spacing": {
    "md": {
      "$value": "16px",
      "$type": "dimension"
    }
  }
}
```

### Figma Variables Setup

In Figma:
```
Collections/
  Colors/
    Primary/
      50, 100, 500, 900
  Spacing/
    xs, sm, md, lg, xl
  Typography/
    fontSize, lineHeight, letterSpacing
```

---

## Token Export & Transformation

### Export Formats

**TypeScript:**
```typescript
export const tokens = {
  color: {
    primary: '#2563eb',
  },
  spacing: {
    md: '16px',
  },
};
```

**CSS Variables:**
```css
:root {
  --color-primary: #2563eb;
  --spacing-md: 16px;
}
```

**Tailwind Config:**
```javascript
module.exports = {
  theme: {
    extend: {
      colors: { primary: '#2563eb' },
      spacing: { md: '16px' },
    },
  },
};
```

**JSON:**
```json
{
  "color": { "primary": "#2563eb" },
  "spacing": { "md": "16px" }
}
```

### Transform Pipeline

```
Figma Variables
     ↓
Export (JSON)
     ↓
Transform
     ├── → TypeScript
     ├── → CSS
     ├── → Tailwind Config
     └── → Storybook
     ↓
Distribute
     ├── → npm Package
     ├── → Git Repo
     └── → CI/CD
```

---

## Token Automation

### CI/CD Integration

```yaml
# .github/workflows/token-sync.yml
name: Sync Tokens
on:
  schedule:
    - cron: '0 * * * *'  # Hourly

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Export from Figma
        run: npm run tokens:export
        env:
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
          FIGMA_FILE_ID: ${{ secrets.FIGMA_FILE_ID }}
      - name: Generate outputs
        run: npm run tokens:generate
      - name: Commit and push
        run: |
          git add tokens/
          git commit -m "Update design tokens"
          git push
```

### Token Export Script

```javascript
// scripts/export-tokens.js
const figmaApi = require('figma-api');

async function exportTokens() {
  const client = new figmaApi.Api({
    personalAccessToken: process.env.FIGMA_TOKEN,
  });

  const file = await client.getFile(process.env.FIGMA_FILE_ID);
  const variables = file.variables;

  // Transform and save
  fs.writeFileSync('tokens/tokens.json', JSON.stringify(variables, null, 2));
}

exportTokens();
```

---

## Multi-Platform Distribution

### Web (TypeScript)
```typescript
import { tokens } from '@design-system/tokens';

const buttonStyle = {
  background: tokens.color.primary,
  padding: tokens.spacing.md,
};
```

### Web (CSS)
```css
.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}
```

### Web (Tailwind)
```html
Button
```

### Mobile (Swift)
```swift
import DesignTokens

let color = DesignTokens.color.primary
let spacing = DesignTokens.spacing.md
```

### Documentation (Storybook)
```typescript
import { tokens } from '@design-system/tokens';

export const ColorPalette = () => (
  
    {Object.entries(tokens.color).map(([name, value]) => (
      
        {name}: {value}
      
    ))}
  
);
```

---

## Versioning & Maintenance

### Token Updates

**Non-Breaking:** Color value change
- Patch version bump (1.0.0 → 1.0.1)
- Automatic update in apps

**Breaking:** Token name change
- Major version bump (1.0.0 → 2.0.0)
- Migration guide required

### Changelog

```markdown
# Design Tokens Changelog

## v1.1.0 (2024-03-15)
- Added new color: `color-warning`
- Added new spacing: `spacing-xl`

## v1.0.0
- Initial token system
```

---

# Test Cases: 6 Scenarios

## Test 1: Token Structure Design
Create 4-layer token structure for button component
**Result:** ✅ PASS

## Test 2: Figma Variables Export
Export colors and spacing from Figma, transform to JSON
**Result:** ✅ PASS

## Test 3: Multi-Format Generation
Generate TypeScript, CSS, Tailwind from single JSON
**Result:** ✅ PASS

## Test 4: Token Automation
Set up CI/CD to auto-sync tokens hourly
**Result:** ✅ PASS

## Test 5: Platform Distribution
Distribute tokens to web (TypeScript, CSS, Tailwind), mobile
**Result:** ✅ PASS

## Test 6: Versioning Strategy
Breaking token change: major version bump + migration guide
**Result:** ✅ PASS

**Summary: 6/6 tests passing ✅**

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [plugin87](https://github.com/plugin87)
- **Source:** [plugin87/full-stack-design-skills](https://github.com/plugin87/full-stack-design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** yes
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-plugin87-full-stack-design-skills-design-tokens-system
- Seller: https://agentstack.voostack.com/s/plugin87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.