Skip to main content

​
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: 
: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.