Archisketch Design System MCP

Model Context Protocol (MCP) server for Archisketch Design System. Converts Figma designs to Archisketch React components with AI assistance.

Features

• 🎨 Figma to Component Mapping: Convert Figma Text Styles (e.g., "Label 2/medium") to React components (<Label2 weight="medium">)
• 🎯 Design Token Mapping: Automatically map Figma colors to Archisketch design tokens
• 📦 Component Library: Access all Archisketch design system components with type information
• 🔍 Pattern Library: Query common UI patterns and implementations
• 🚀 Code Generation: Generate complete React code from Figma design data

Installation

Using with Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "archisketch-design-system": {
      "command": "npx",
      "args": ["-y", "@archisketch/design-system-mcp"]
    }
  }
}

Using with Cursor

Add to your Cursor MCP settings:

{
  "mcpServers": {
    "archisketch-design-system": {
      "command": "npx",
      "args": ["-y", "@archisketch/design-system-mcp"]
    }
  }
}

Usage

Once installed, you can ask Claude/Cursor:

Basic Component Queries

"Show me all available Archisketch components"
"How do I use the Button component?"
"What props does Label2 accept?"

Figma Integration

"Convert Figma Text Style 'Label 2/medium' to component"
"Map this Figma color #2E2EE8 to design token"
"Show me all available Figma text styles"

Code Generation

"Generate code from this Figma design data"
"Convert these Figma text styles: ['Label 1/medium', 'Body 1/regular']"

Available Tools

Component Tools

• list_components - List all available design system components
• get_component_info - Get detailed information about a specific component
• search_components - Search components by name or category

Design Token Tools

• get_design_tokens - Get all design tokens (colors, typography, spacing, etc.)
• search_tokens - Search tokens by category or name

Pattern Tools

• list_patterns - List common UI patterns
• get_pattern_info - Get implementation details for a specific pattern

Figma Mapping Tools

• figma_to_component - Convert single Figma Text Style to component
• list_figma_text_styles - List all supported Figma text styles
• batch_figma_to_component - Convert multiple Figma styles at once
• generate_code_from_figma_data - Generate complete React code from Figma data
• map_figma_color_to_token - Map Figma colors to design tokens

Example Workflow

1. Get Figma design data (using Figma MCP or API)
2. Convert to Archisketch components (using this MCP)
3. Get complete React code ready to use

// Input from Figma
{
  textNodes: [
    { styleName: "Label 2/medium", content: "로그인" }
  ],
  colors: [
    { hex: "#2E2EE8", usage: "button" }
  ]
}

// Output
import { Label2 } from '@archisketch-dev-team/design-system';

function Screen() {
  return (
    <div>
      <Label2 weight="medium">로그인</Label2>
    </div>
  );
}

Figma Text Style Format

Archisketch uses a specific naming convention for Figma Text Styles:

| Figma Style | Component | Example Code | |------------|-----------|--------------| | Label 2/medium | Label2 | <Label2 weight="medium">Text</Label2> | | Label 1/semibold | Label1 | <Label1 weight="semibold">Text</Label1> | | Body 1/regular | Body1 | <Body1 variant="normal" weight="regular">Text</Body1> | | Caption | Caption | <Caption>Text</Caption> |

Design Tokens

Colors

• Brand: primary (#2E2EE8), secondary (#838395)
• Semantic: Background, Label, Line, Static, Status colors

Typography

• Font: Pretendard Variable
• Styles: Title (1-2), Heading (1-5), Body (1-2), Label (1-3), Caption

Components

8 core components with full TypeScript support:

• Button (4 variants: solid, outlined, text, action)
• Checkbox
• Switch
• Icon
• Text (13 variants: Title1-2, Heading1-5, Body1-2, Label1-3, Caption)
• Radio
• Segment
• IconButton

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Development mode
pnpm dev

Related

• Archisketch Design System
• Model Context Protocol
• MCP Servers List

License

MIT