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).

Aller à l'installation

Dépôt: plugin87/full-stack-design-skills
Dernière activité de la source: 18 juillet 2026 à 07:39
Langue détectée de SKILL.md: anglais
Étoiles: 8
Forks: 1

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/plugin87/full-stack-design-skills --skill design-tokens-system

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

{
  "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"
  }
}

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

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

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

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

:root {
  --color-primary: #2563eb;
  --spacing-md: 16px;
}

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

{
  "color": { "primary": "#2563eb" },
  "spacing": { "md": "16px" }
}

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

# .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

// 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();

import { tokens } from '@design-system/tokens';

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

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

<button class="bg-primary px-md">Button</button>

import DesignTokens

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

import { tokens } from '@design-system/tokens';

export const ColorPalette = () => (
  <div>
    {Object.entries(tokens.color).map(([name, value]) => (
      <div key={name} style={{ background: value }}>
        {name}: {value}
      </div>
    ))}
  </div>
);

# 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

design-tokens-system

Options d'installation

Vérifiez les fichiers source