Lawrence'S Personal Server

A Model Context Protocol (MCP) server providing development tools for Figma integration, accessibility checking, and code generation.

Features

🎨 Figma Tools

• figma_get_file - Fetch Figma file structure and metadata
• figma_get_component - Get detailed component information
• figma_extract_design_tokens - Extract colors, typography, and spacing
• figma_search_components - Search for components by name

♿ Accessibility Tools

• a11y_audit_component - Audit components for WCAG compliance
• a11y_suggest_improvements - Get accessibility improvement suggestions

🔧 Code Generation Tools

• codegen_react_component - Generate React components from Figma
• codegen_design_tokens - Generate CSS/TypeScript design tokens

Setup

1. Install Dependencies

npm install

2. Configure Environment

Copy .env.example to .env and add your Figma access token:

cp .env.example .env

Edit .env:

FIGMA_ACCESS_TOKEN=your_figma_personal_access_token

3. Build

npm run build

Usage with Claude Desktop

Add this to your Claude Desktop configuration file:

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "lawrence-mcp": {
      "command": "node",
      "args": ["/Users/lawrence/dev/mcp-server/dist/index.js"]
    }
  }
}

Then restart Claude Desktop.

Development

Run in watch mode

npm run watch

Run directly with tsx

npm run dev

Adding New Tools

1. Create a new tool file in src/tools/
2. Define your tools array and handler function
3. Import and add to src/index.ts

Example:

// src/tools/my-tools.ts
export const myTools: Tool[] = [
  {
    name: 'my_tool',
    description: 'Does something cool',
    inputSchema: { /* ... */ }
  }
];

export async function handleMyTool(name: string, args: any) {
  // Implementation
}

License

MIT