Palatte

Converts Figma designs into React and Vue components via a Design System MCP workflow.

typescript

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "opti-kjh-palette": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic/palette-mcp"
      ],
      "env": {
        "GITHUB_TOKEN": "ghp_XXXXXXXXXXXXXXXXXXXX",
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE",
        "FIGMA_MCP_SERVER_URL": "http://127.0.0.1:3845/mcp"
      }
    }
  }
}

Available tools

convert_figma_to_react

Transforms a picked Figma design into React components that use the design system components for consistent styling and behavior.

convert_figma_to_vue

Transforms a picked Figma design into Vue components that use the design system components for consistent styling and behavior.

list_design_system_components

Provides a catalog of available design system components that can be referenced during code generation.

analyze_figma_file

Analyzes the structure of a Figma file to understand node hierarchy and mappings to components.

Built by

VeilStrat

AI signals for GTM teams

Palatte MCP Server - opti-kjh/palette | VeilStrat