Using Talent with Claude Code

Claude Code is Anthropic's command-line AI assistant that can be enhanced with Popmelt Talent to provide design guidance directly in your terminal. This guide will walk you through connecting your Talent to Claude Code using the Model Context Protocol (MCP).

Prerequisites

Before you begin, make sure you have:

1. Claude Code installed - Get it from Claude's official documentation
2. A Popmelt account with at least one Talent created
3. A secret key generated from your Popmelt account settings
4. Terminal access on your system

Step 1: Generate Your Secret Key

If you haven't already generated a secret key:

1. Log into your Popmelt account
2. Navigate to Account Settings
3. Go to the Secret Keys section
4. Click Generate New Key
5. Copy and securely store your secret key

Step 2: Install Claude Code

If you haven't installed Claude Code yet:

1. Follow the installation instructions from Anthropic's documentation
2. Verify the installation by running:

   claude --version
   

3. Authenticate with your Claude account if required

Step 3: Add Popmelt Integration

Use the Claude MCP command to add Popmelt as a context provider:

claude mcp add --transport sse popmelt https://web-production-98d7b.up.railway.app/sse?secretKey=YOUR_SECRET_KEY_HERE

Important: Replace YOUR_SECRET_KEY_HERE with your actual secret key from Step 1.

Verify the Integration

Check that Popmelt has been added successfully:

/mcp

You should see "popmelt" in the list of available MCP providers.

Step 4: Using Talent in Claude Code

Once connected, you can leverage your Talent directly in your terminal sessions:

Start a session and reference your Talent in queries:

claude "How should I style a primary button according to my design system?"

Design System Queries

Ask Claude about your design system directly:

# Query color specifications
claude "What are the primary colors in my Talent's palette?"

# Ask about typography
claude "What font sizes and weights should I use for headings?"

# Check spacing guidelines
claude "What's the recommended spacing between components?"

Component Generation

Request code that follows your Talent's guidelines:

# Generate React components
claude "Create a Card component following my design system principles"

# Generate CSS classes
claude "Write CSS for a button component using my Talent's specifications"

# Generate HTML structures
claude "Create a navigation menu markup following my brand guidelines"

Common Workflows

Code Generation with Design Context

# Generate a complete component with styling
claude "Build a user profile card component with:
- Avatar image
- Name and title
- Action buttons
Following my Talent's design principles"

Design System Validation

# Check if existing code follows your guidelines
claude "Does this CSS follow my design system?" < styles.css

# Get improvement suggestions
claude "How can I improve this component to better match my Talent?" < component.tsx

Aliases for Common Tasks

Create shell aliases for frequent operations:

# Add to your shell configuration
alias claude-design="claude chat --mcp popmelt"
alias claude-component="claude 'Generate component following design system' --mcp popmelt"
alias claude-review="claude 'Review code for design consistency' --mcp popmelt"

Troubleshooting

Connection Issues

Problem: claude mcp add command fails

• Solution: Verify your secret key is correct and you have internet connectivity
• Check: Ensure Claude Code is properly installed and authenticated

Problem: Talent not accessible in chat

• Solution: Restart your terminal and try claude mcp list to verify the connection
• Check: Confirm your Talent is published and accessible in your Popmelt dashboard

Problem: Inconsistent responses about design system

• Solution: Be more specific in your queries and reference particular aspects of your Talent
• Check: Verify your Talent has sufficient detail in its principles and components

Performance Optimization

• Use specific queries: Ask about particular components or design aspects rather than general questions
• Cache responses: For repeated tasks, save Claude's responses to avoid redundant API calls
• Batch similar requests: Group related design questions together in single conversations

Best Practices

Query Structure

Structure your requests for better Talent-informed responses:

# Good: Specific and contextual
claude "Create a primary CTA button component for my e-commerce site following my Talent's color palette and typography rules"

# Better: Include constraints and requirements  
claude "Generate a responsive navigation menu component that:
- Uses my Talent's primary colors
- Includes mobile hamburger menu
- Follows accessibility guidelines from my design system
- Uses the typography scale defined in my Talent"

Documentation Integration

Use Claude to generate documentation that aligns with your design system:

# Generate style guide documentation
claude "Create CSS documentation for my button components based on my Talent's specifications"

# Generate component README files
claude "Write documentation for this component explaining how it follows our design system" < Button.tsx

Consistent Workflows

Establish team conventions for using Claude with Talent:

# Standard component generation
alias new-component="claude 'Generate a new component following our team Talent' --mcp popmelt"

# Design review process
alias review-design="claude 'Review this code for design system compliance' --mcp popmelt"