Optics Mcp
Connects LLMs to the Optics Design System's HSL-based token architecture and component library. Exposes 14 tools split between core operations like get_token, search_tokens, and get_component_info, plus advanced utilities for theme generation, contrast checking, and migrating hard-coded values to design tokens. Ships with 83 design tokens (colors, spacing, typography) and documentation for 24 components. The standout feature is its understanding of Optics' three-layer token system, which differs from typical design systems. Reach for this when building interfaces with Optics and you need an AI agent that knows the difference between --op-color-primary-base and a standard primary color token, or when auditing code for token compliance.
- tools
- 14
- transport
- STDIO
- last updated
- Dec 5, 2025
Tools
14 toolsPublic tool metadata for what this MCP can expose to an agent.
get_tokenGet detailed information about a specific design token.
Get detailed information about a specific design token.
No parameter schema in public metadata yet.
search_tokensSearch for design tokens by category or name pattern.
Search for design tokens by category or name pattern.
No parameter schema in public metadata yet.
get_token_usage_statsGet statistics about design token usage across the system.
Get statistics about design token usage across the system.
No parameter schema in public metadata yet.
get_component_infoGet detailed information about a component including its design token dependencies.
Get detailed information about a component including its design token dependencies.
No parameter schema in public metadata yet.
list_componentsList all available components in the design system.
List all available components in the design system.
No parameter schema in public metadata yet.
get_component_tokensGet all design tokens used by a specific component.
Get all design tokens used by a specific component.
No parameter schema in public metadata yet.
search_documentationSearch through Optics documentation.
Search through Optics documentation.
No parameter schema in public metadata yet.
generate_themeCreate a custom branded theme with CSS variables and Figma Variables JSON.
Create a custom branded theme with CSS variables and Figma Variables JSON.
No parameter schema in public metadata yet.
validate_token_usageFind hard-coded values in code that should use design tokens.
Find hard-coded values in code that should use design tokens.
No parameter schema in public metadata yet.
replace_hard_coded_valuesAutomatically replace hard-coded values with design tokens.
Automatically replace hard-coded values with design tokens.
No parameter schema in public metadata yet.
check_contrastCheck WCAG color contrast ratios between tokens.
Check WCAG color contrast ratios between tokens.
No parameter schema in public metadata yet.
suggest_token_migrationSuggest tokens for legacy code migration.
Suggest tokens for legacy code migration.
No parameter schema in public metadata yet.
generate_component_scaffoldGenerate component code with Optics tokens.
Generate component code with Optics tokens.
No parameter schema in public metadata yet.
generate_sticker_sheetGenerate a visual style guide showing all design tokens and components.
Generate a visual style guide showing all design tokens and components.
No parameter schema in public metadata yet.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageReadme
Optics MCP Server
A Model Context Protocol (MCP) server for the Optics Design System, enabling LLMs to understand and work with design tokens, components, and documentation from https://docs.optics.rolemodel.design.
⚠️ IMPORTANT: Understanding Optics
If you're an AI agent, read SYSTEM_OVERVIEW.md FIRST!
Optics uses a sophisticated HSL-based color system that's different from typical design systems. The system overview explains:
- Why there's no
--color-primarytoken (use--op-color-primary-baseinstead) - The three-layer token architecture (HSL base → Scale → On tokens)
- How to find and use the correct tokens
- Common mistakes and how to avoid them
Key insight: Optics has 500+ color tokens organized as a predictable scale system, not simple name-value pairs.
Overview
This MCP server provides 14 tools and resources for working with the Optics design system:
Details
- Repository
- github.com/rolemodel/optics-mcp
- Category
- Design & Creative
- Package
optics-mcp- Transport
- STDIO
- Registry
- MCP registry, active
Related Design & Creative MCP servers
View all
openmodeshansabnani/openmodeVideo editing and rendering for coding agents: look at footage, render edits to MP4, keep versions.0stars
Hive Compute Gridsrotzin/hive-mcp-compute-gridMCP server: solver auction across io.net / Akash / Render with signed receipts · Hive Civilization0stars
ROFilter - RO Membrane System Designszhuangzan/rofilter-mcpReverse-osmosis membrane system design: 742-element library, 8 brands, water & scaling analysis.0stars
Siteauditthegridwork/siteauditAudit websites for accessibility, performance, SEO, design, and mobile. 47 WCAG checks.0stars
Systemonomic — Work Domain Analysis & AI Task Suitabilitytonyc23/systemonomic-mcpModel work domains, score tasks for AI suitability, and design organisations.0stars
OrgXuseorgx/orgx-mcpOrgX is coordination infrastructure for AI-native teams. It gives your LLM a persistent organizational layer: initiatives with milestones and tasks, human-in-th0stars