Skip to main content

​
Claude Integration

Advanced patterns for using Tokencraft with Claude Desktop.

​
Natural Language Queries

Claude understands natural language requests about your tokens:

​
Exploratory Questions

You: What design tokens do I have?
You: Show me my color palette
You: Which tokens use the primary color?
You: How many spacing tokens are there?

​
Analysis

You: Compare light and dark mode colors
You: Find all tokens without descriptions
You: Show me which tokens are aliases
You: What's the most used color value?

​
Generation

You: Create a style guide for my colors
You: Generate documentation for all tokens
You: Make a comparison table of spacing values
You: Create a visual preview of my color palette

​
Complex Workflows

​
1. Token Audit

You: Audit my design tokens and suggest improvements

Claude: **Design Token Audit**

**Findings:**
1. 5 tokens missing descriptions
2. 3 color tokens could be semantic aliases
3. Spacing scale has gaps (no 20px value)
4. Dark mode has 5 fewer tokens than Light

**Recommendations:**
1. Add descriptions to these tokens:
   - colors.gray.150
   - spacing.custom
   ...

2. Consider creating semantic tokens:
   - button.primary.bg → colors.primary.500
   ...

​
2. Documentation Generation

You: Generate markdown documentation for all my color tokens

Claude: # Color Tokens

## Primary Colors

### colors.primary.500
- **Value:** `#3b82f6`
- **Description:** Primary brand color
- **Usage:** CTAs, links, focus states

### colors.primary.600
- **Value:** `#2563eb`
- **Description:** Primary hover state
- **Usage:** Hover states for primary buttons

[continues...]

​
3. Migration Planning

You: I'm migrating from Sass variables to CSS custom properties.
     Help me plan the migration.

Claude: **Migration Plan**

**Current State:** 90 tokens across 3 tokensets

**Step 1:** Export as CSS
- Download tokens-light.css
- Download tokens-dark.css

**Step 2:** Replace Sass variables
- $color-primary → var(--colors-primary-500)
- $spacing-base → var(--spacing-base)

**Step 3:** Add theme switching
```css
[data-theme="dark"] {
  @import 'tokens-dark.css';
}
Step 4: Test in browser [provides testing checklist] 

## Combining with Other MCP Servers

### With Filesystem
You: Export my tokens and save them to ./src/styles/ Claude: [Uses Tokencraft MCP to export] [Uses Filesystem MCP to save] ✓ Saved tokens-light.css to ./src/styles/ ✓ Saved tokens-dark.css to ./src/styles/ 

### With GitHub
You: Export my tokens and create a PR with the changes Claude: [Exports tokens] [Creates GitHub branch] [Commits changes] [Opens PR] ✓ Created PR #123: Update design tokens 

## Best Practices

### 1. Context Setting

Start conversations with context:
You: I’m working on the Design System workspace, specifically the Colors tokenset. I need to export Light and Dark modes as CSS. 

### 2. Iterative Refinement

Build on previous responses:
You: Show me the color tokens Claude: [Shows tokens] You: Now filter to just the primary colors Claude: [Filters results] You: Export those as JSON Claude: [Exports filtered tokens] 

### 3. Batch Operations

Ask for multiple things at once:
You: For each tokenset in Design System:
  1. Show token count
  2. List modes
  3. Export Light mode as CSS

## Tips for Effective Use

### Be Specific
❌ “Export tokens” ✅ “Export the Colors tokenset Light mode as CSS” 

### Provide Context
❌ “Change the primary color” ✅ “In the Design System workspace, I want to change colors.primary.500 in the Light mode to #2563eb” 

### Ask for Explanations
You: Why would I use aliases vs direct values? Claude: Aliases vs Direct Values Direct Values:
  • colors.blue.500: #3b82f6
Aliases:
  • button.primary.bg → colors.primary.500
Benefits of Aliases:
  1. Semantic meaning
  2. Easy updates
  3. Consistency
  4. Better maintainability
[provides examples] 

## Next Steps

<CardGroup cols={2}>
  <Card
    title="Basic Usage"
    icon="rocket"
    href="/mcp/examples/basic-usage"
  >
    Start with basics
  </Card>
  <Card
    title="Export Workflow"
    icon="file-export"
    href="/mcp/examples/export-workflow"
  >
    Master exports
  </Card>
</CardGroup>