> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tokencraft.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Basic Usage Examples

> Common MCP usage patterns

# Basic Usage Examples

Practical examples showing how to use Tokencraft with Claude. Start with the connection test above, then try these patterns.

## Common Questions New Users Ask

### "How do I find token IDs?"

**Don't worry about IDs!** Use these helper tools first:

* `list_resources` - Shows everything with IDs
* `find_tokens_by_type` - Search by type (color, spacing, etc.)
* `search_tokens` - Search by name or value

### "What's the difference between tokensets and modes?"

* **Tokenset**: A collection of related tokens (Colors, Typography, Spacing)
* **Mode**: Different values for the same tokens (Light/Dark themes, Compact/Regular sizing)

### "How do I export for my specific platform?"

Ask Claude directly:

* *"Export as CSS variables"*
* *"Generate iOS Swift colors"*
* *"Create Android XML colors"*
* *"Give me JSON format"*

## Test the Connection

Start with the basics to make sure everything works:

```
You: Show me my workspaces

Claude: You have 3 workspaces:
        1. Design System - Main product design system
        2. Mobile App - Mobile application tokens
        3. Marketing Site - Marketing website design tokens

        Which would you like to explore?
```

If you see your workspaces, you're connected! 🎉

## Progressive Examples

Start simple, then go deeper:

### 1. Find Something Specific

```
You: What's my primary color?

Claude: Your primary color is #3b82f6 in light mode, #60a5fa in dark mode.
```

### 2. Explore Your System

```
You: Show me all color tokens

Claude: You have 45 color tokens across 3 workspaces:
        - Brand colors: primary, secondary, accent
        - Semantic colors: success, warning, error
        - Neutral colors: backgrounds, text, borders
```

### 3. Get Technical Details

```
You: Give me the exact RGB values for the primary color

Claude: Primary color (#3b82f6):
        - RGB: 59, 130, 246
        - HSL: 217°, 91%, 60%
        - Used in 8 different tokens
```

### 4. Export for Development

````
You: Export all colors as CSS variables

Claude: Here's your CSS:

```css
:root {
  --color-primary: #3b82f6;
  --color-secondary: #5856d6;
  --color-success: #34c759;
  /* ... 42 more colors */
}
````

## Deep Dive Examples

### List Workspaces

```
You: What Tokencraft workspaces do I have?

Claude: You have 3 workspaces:

1. **Design System** (Created Jan 15, 2025)
   Main product design system
   
2. **Mobile App** (Created Jan 10, 2025)
   Mobile application tokens
   
3. **Marketing Site** (Created Jan 5, 2025)
   Marketing website design tokens

Which one would you like to explore?
```

### Explore a Workspace

```
You: Show me what's in the Design System workspace

Claude: **Design System Workspace**

This workspace contains 3 tokensets:

1. **Colors** - 50 tokens
   Color tokens for the design system
   Modes: Light, Dark, High Contrast
   
2. **Typography** - 25 tokens
   Font and text tokens
   Modes: Base
   
3. **Spacing** - 15 tokens
   Layout and spacing tokens
   Modes: Base, Compact

Total: 90 tokens across all tokensets
```

### View a Tokenset

```
You: Show me the Colors tokenset

Claude: **Colors Tokenset**

**Description:** Color tokens for the design system

**Modes:**
- Light (default) - 50 tokens
- Dark - 50 tokens
- High Contrast - 45 tokens

**Token Categories:**
- Primary colors (8 tokens)
- Secondary colors (6 tokens)
- Background colors (12 tokens)
- Text colors (10 tokens)
- Semantic colors (14 tokens)

Would you like to see the tokens for a specific mode?
```

### List Tokens

```
You: Show me the tokens in the Light mode

Claude: **Light Mode - Colors** (50 tokens)

**Primary Colors:**
- colors.primary.500: #3b82f6 (Primary brand color)
- colors.primary.600: #2563eb
- colors.primary.700: #1d4ed8

**Background Colors:**
- colors.background.default: #ffffff
- colors.background.subtle: #f9fafb
- colors.background.muted: #f3f4f6

**Text Colors:**
- colors.text.primary: #111827
- colors.text.secondary: #6b7280
- colors.text.tertiary: #9ca3af

[... and 41 more tokens]
```

## Searching Tokens

### By Name

```
You: Find all tokens with "primary" in the name

Claude: Found 8 tokens with "primary":

**Light Mode:**
- colors.primary.500: #3b82f6 (Primary brand color)
- colors.primary.600: #2563eb
- colors.primary.700: #1d4ed8
- button.primary.background → colors.primary.500

**Dark Mode:**
- colors.primary.500: #60a5fa
- colors.primary.600: #3b82f6
- colors.primary.700: #2563eb
- button.primary.background → colors.primary.500
```

### By Type

```
You: Show me all dimension tokens

Claude: **Dimension Tokens** (15 total)

**Spacing:**
- spacing.base: 16px
- spacing.xs: 4px
- spacing.sm: 8px
- spacing.md: 12px
- spacing.lg: 24px
- spacing.xl: 32px

**Sizing:**
- size.button.sm: 32px
- size.button.md: 40px
- size.button.lg: 48px

[... and 6 more]
```

### By Value

```
You: What tokens use the color #3b82f6?

Claude: The color #3b82f6 is used by:

**Direct values:**
- colors.primary.500: #3b82f6

**Aliases (reference colors.primary.500):**
- button.primary.background
- link.default.color
- focus.ring.color

This is your primary brand color, used in 3 other tokens via aliases.
```

## Exporting Tokens

### Export as CSS

````
You: Export the Light mode colors as CSS

Claude: Here's your CSS export:

```css
:root {
  /* Primary brand color */
  --colors-primary-500: #3b82f6;
  --colors-primary-600: #2563eb;
  --colors-background-default: #ffffff;
  --colors-text-primary: #111827;
  /* ... */
}
````

Copy this to your project's CSS file.

### Export Multiple Formats

````
You: I need the colors in both JSON and CSS

Claude: **JSON Export:**
```json
{
  "colors": {
    "primary": {
      "500": {
        "value": "#3b82f6",
        "type": "color"
      }
    }
  }
}
````

**CSS Export:**

```css theme={null}
:root {
  --colors-primary-500: #3b82f6;
}
```

## Analyzing Your Design System

### Token Statistics

```
You: Give me statistics about my design tokens

Claude: **Design Token Statistics**

Total Workspaces: 3
Total Tokensets: 10
Total Tokens: 245

**By Type:**
- Colors: 120 (49%)
- Dimensions: 65 (27%)
- Typography: 40 (16%)
- Other: 20 (8%)

**By Workspace:**
- Design System: 90 tokens (37%)
- Mobile App: 85 tokens (35%)
- Marketing Site: 70 tokens (29%)

**Modes:**
- 6 tokensets with Light/Dark modes
- 4 tokensets with single mode
```

### Compare Modes

```
You: Compare the primary color between Light and Dark modes

Claude: **Primary Color Comparison**

**Light Mode:**
- colors.primary.500: #3b82f6 (RGB: 59, 130, 246)
- Brightness: 62%

**Dark Mode:**
- colors.primary.500: #60a5fa (RGB: 96, 165, 250)
- Brightness: 75%

**Difference:**
The dark mode version is 37 points lighter in RGB and 21% brighter,
making it more visible on dark backgrounds.
```