Optics MCP Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_tokenA | Get detailed information about a specific design token by name |
| get_token_usage_statsB | Get statistics about design token usage across the system |
| search_tokensA | Search for design tokens by category or name pattern |
| list_componentsA | List all available components in the design system |
| get_component_infoB | Get detailed information about a component including its design token dependencies |
| get_component_tokensB | Get all design tokens used by a specific component |
| search_documentationC | Search through Optics documentation |
| generate_themeB | Generate a complete theme with CSS variables and Figma Variables JSON using Optics design tokens |
| validate_token_usageB | Validate code for hard-coded values that should use design tokens |
| replace_hard_coded_valuesB | Replace hard-coded values with design tokens |
| check_contrastC | Check WCAG contrast ratio between two color tokens |
| suggest_token_migrationA | Suggest design tokens for a hard-coded value |
| generate_component_scaffoldB | Generate a React component scaffold with proper token usage |
| generate_sticker_sheetC | Generate a visual style guide with color swatches and component examples |
| validate_color_pairC | Check if the pair is meant to be used together |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| create-themed-component | Generate a component styled with Optics design tokens |
| migrate-to-tokens | Convert hard-coded CSS values to Optics design tokens |
| accessible-color-combo | Suggest accessible foreground/background color token combinations |
| design-review | Review a design or component for Optics token usage and best practices |
| explain-token-system | Explain how a specific token category works in Optics |
| get-token-reference | Get complete list of all available Optics design tokens - USE THIS to prevent token name hallucination |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| system-overview | Critical errors AI agents make, quick reference for Cache Components |
| documentation-section | Documentation sections for the Optics design system |
| tokens-all | Complete list of all Optics design tokens |
| tokens-category | Design tokens filtered by category (color, spacing, typography, border, shadow) |
| components-all | Complete list of all Optics components |
| documentation-introduction | introduction documentation |
| documentation-getting-started | getting-started documentation |
| documentation-design-tokens | design-tokens documentation |
| documentation-color-system | color-system documentation |
| documentation-spacing | spacing documentation |
| documentation-typography | typography documentation |
| documentation-components | components documentation |
| documentation-accessibility | accessibility documentation |
| tokens-color | Design tokens for color |
| tokens-spacing | Design tokens for spacing |
| tokens-typography | Design tokens for typography |
| tokens-border | Design tokens for border |
| tokens-shadow | Design tokens for shadow |
TDQS
Scored across 15 tools
Most tools have distinct purposes (tokens, components, generation, validation). However, some pairs like check_contrast/validate_color_pair and validate_token_usage/replace_hard_coded_values/suggest_token_migration could cause confusion, though their descriptions clarify differences.
All tools use a consistent snake_case verb_noun pattern (e.g., get_token, generate_theme, validate_token_usage). No mixing of styles or irregular names.
With 15 tools, the server covers a broad range of design system tasks without being excessive. Each tool serves a clear purpose, fitting well within the ideal 3-15 range.
The surface covers token management (get, search, usage, migration), components (info, list, scaffolding), theme/sticker generation, and validation. Minor gaps exist (no token creation/update, no component deletion) but core workflows are supported.