Skip to main content

​
Basic Usage Examples

Learn how to use the Tokencraft MCP server with Claude through practical examples.

​
Getting Started

​
Check Connection

You: Are you connected to Tokencraft?

Claude: Yes, I'm connected to Tokencraft! I can help you with:
        - Listing workspaces and tokensets
        - Searching and browsing tokens
        - Exporting tokens in various formats
        
        What would you like to do?

​
Browsing Your Tokens

​
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: 
{
  "colors": {
    "primary": {
      "500": {
        "value": "#3b82f6",
        "type": "color"
      }
    }
  }
}
CSS Export: 
: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. 

## Next Steps

<CardGroup cols={2}>
  <Card
    title="Export Workflow"
    icon="file-export"
    href="/mcp/examples/export-workflow"
  >
    Learn export patterns
  </Card>
  <Card
    title="Claude Integration"
    icon="robot"
    href="/mcp/examples/claude-integration"
  >
    Advanced Claude usage
  </Card>
</CardGroup>