Design System Analyzer
About
Analyzes React component files and design tokens to provide accurate component properties and styling information for precise UI code generation and design recommendations.
Details
- Author
- yajihum
- Repository
- yajihum/design-system-mcp
- GitHub stars
- 4
- Categories
- AI, Design, Developer Tools, File Management, Infrastructure, Frontend, Knowledge Base
- Tags
- #visualization
Jump to
The MCP server offers two main tools:
- getComponentProps: Retrieves information about component properties
- getTokens: Retrieves design token information from token files
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Design System AnalyzerCommand (node, npx, python, etc.)npxArguments-
Argument 1
-y -
Argument 2
@highlight/mcp-server
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
-
Argument 1
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
getComponentProps
Retrieves information about component properties.
getTokens
Retrieves design token information from token files.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"design system analyzer": {
"env": {},
"args": [
"-y",
"@highlight/mcp-server"
],
"command": "npx"
}
}
}Linux
{
"env": [],
"args": [
"-y",
"@highlight/mcp-server"
],
"command": "npx"
}Macos
{
"env": [],
"args": [
"-y",
"@highlight/mcp-server"
],
"command": "npx"
}Windows
{
"env": [],
"args": [
"/c",
"npx",
"-y",
"@highlight/mcp-server"
],
"command": "cmd"
}MCP Server for Design System
This project includes an MCP (Model Context Protocol) server that provides information about component props and design tokens.
MCP Server Features
The MCP server offers two main tools:
- getComponentProps: Retrieves information about component properties
- getTokens: Retrieves design token information from token files
Debugging the MCP Server
To debug the MCP server:
1. Run the in-memory debug script:
$ deno task debug-mcp
This script:
- Creates an in-memory client-server connection
- Makes sample calls to retrieve component props and tokens
- Displays the results in the console
You can modify the debug script to test different components or specific token requests.
Design Token Generation
Design tokens are stored as JSON files in the src/design-system/tokens directory:
- color.json: Color palette and theme colors
- typography.json: Font families, sizes, weights
- spacing.json: Spacing scale
- radius.json: Border radius values
Token Generation Process
Tokens are processed using Style Dictionary with the following workflow:
1. Define token values in JSON files in the tokens directory
2. Style Dictionary processes these tokens according to the configuration in src/design-system/style-dictionary/config.json
3. Output formats include:
- CSS variables (tokens.css)
- JavaScript module (tokens.js)
- TypeScript declarations (tokens.d.ts)
To generate tokens:
$ deno task build-tokens
The generated files are placed in the src/design-system/style-dictionary/dist directory and can be imported into your components.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
