Optics

You work with Optics MCP Server to access design tokens, components, and documentation from the Optics design system. It exposes a suite of tools and prompts that let you query tokens, inspect components, generate themes, check accessibility, scaffold code, and generate style guides, all via a lightweight MCP client.

How to use

You can connect to the Optics MCP Server through an MCP client that supports JSON-RPC-style communication. Use either a remote HTTP setup or a local STDIO-based server. Once connected, you can query tokens, retrieve component information, validate token usage, generate themes, and create scaffolds or sticker sheets for design systems work. The server exposes tokens, components, documentation, and a set of core and advanced tools to streamline design-system tasks.

When you start a session, the client can request: the full set of tokens, information about a specific component, a list of available components, usage statistics, and documentation search capabilities. You can also run advanced tasks such as generating a themed CSS/variables set, checking color contrast, migrating old tokens, replacing hard-coded values with tokens, and generating component scaffolds or sticker sheets for cross-framework usage.

How to install

Prerequisites: you need Node.js and npm installed on your machine. You may also use a package manager that supports npx for quick execution of MCP shells.

Choose one of these installation approaches and follow the exact commands.

{
  "mcpServers": {
    "optics": {
      "command": "npx",
      "args": ["-y", "optics-mcp"]
    }
  }
}

Notes on local development and alternative setup

If you prefer running the server locally for development, you can configure with a local Node.js runtime and point to the built entry file.

{
  "mcpServers": {
    "optics": {
      "command": "node",
      "args": ["/absolute/path/to/optics-mcp/dist/index.js"]
    }
  }
}

Available tools

get_token

Get detailed information about a specific design token.

search_tokens

Search for design tokens by category or name pattern.

get_token_usage_stats

Get statistics about design token usage across the system.

get_component_info

Get detailed information about a component including its design token dependencies.

list_components

List all available components in the design system.

get_component_tokens

Get all design tokens used by a specific component.

search_documentation

Search through Optics documentation.

generate_theme

Create a custom branded theme with CSS variables and Figma Variables JSON.

validate_token_usage

Find hard-coded values in code that should use design tokens and suggest replacements.

replace_hard_coded_values

Automatically replace hard-coded values with design tokens.

check_contrast

Check WCAG color contrast ratios between tokens and provide accessibility recommendations.

suggest_token_migration

Suggest tokens for legacy code migration and map old values to new tokens.

generate_component_scaffold

Generate component code with Optics tokens for React, Vue, Svelte, or HTML.

generate_sticker_sheet

Generate a visual style guide showing all tokens and components with multi-framework output.