Design System FAQs

Question 1

What is the Design System MCP server?

Accepted Answer

It's a server that provides information about component properties and design tokens, allowing you to easily access and manage your design system's elements.

Question 2

What features does the MCP server offer?

Accepted Answer

It offers `getComponentProps` to retrieve component property information and `getTokens` to retrieve design token information from JSON files.

Question 3

How are design tokens generated?

Accepted Answer

Design tokens are defined in JSON files, processed using Style Dictionary, and output as CSS variables, JavaScript modules, and TypeScript declarations.

Question 4

What output formats are supported for design tokens?

Accepted Answer

The generated tokens are available as CSS variables (tokens.css), JavaScript modules (tokens.js), and TypeScript declarations (tokens.d.ts).

Question 5

How do I debug the MCP server?

Accepted Answer

Run the in-memory debug script (`deno task debug-mcp`) to create a client-server connection, make sample calls, and display the results in the console.

Design System

主な機能

ユースケース

Design System

主な機能

ユースケース