design-tokens

Design token management, generation, and multi-platform support.

509 stars

bya5c-ai

View on GitHub Installation ↓

Best use case

design-tokens is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Design token management, generation, and multi-platform support.

Teams using design-tokens should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/design-tokens/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/design-tokens/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/design-tokens/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How design-tokens Compares

Feature / Agent	design-tokens	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Design token management, generation, and multi-platform support.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Design Tokens Skill

Expert assistance for design token management.

## Capabilities

- Define design tokens
- Generate platform outputs
- Configure Style Dictionary
- Manage token hierarchies
- Handle theming

## Token Structure

```json
{
  "color": {
    "primary": {
      "50": { "value": "#eff6ff" },
      "500": { "value": "#3b82f6" },
      "900": { "value": "#1e3a8a" }
    }
  },
  "spacing": {
    "xs": { "value": "0.25rem" },
    "sm": { "value": "0.5rem" },
    "md": { "value": "1rem" }
  }
}
```

## Style Dictionary Config

```javascript
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'variables.css', format: 'css/variables' }],
    },
  },
};
```

## Target Processes

- design-system
- multi-platform-design
- theming-implementation

Related Skills

rest-api-design

509

from a5c-ai/babysitter

RESTful API design principles, versioning, pagination, HATEOAS, and documentation.

design-token-transformer

509

from a5c-ai/babysitter

Transform design tokens across multiple formats and platforms. Parse W3C design token format, transform to CSS/SCSS/JS/iOS/Android, handle token aliases and references, and generate documentation.