Skip to main content
Glama
Davont
by Davont

@my-design/mcp

my-design 组件库的 MCP Server,让 AI 能够查询组件文档、Props、示例、源码、Design Tokens,生成符合规范的代码。

工具一览

工具

说明

get_context_bundle

一次性获取组件的完整上下文(文档 + Props + 示例 + Tokens),适合代码生成场景

component_search

按关键词搜索组件,返回匹配列表和适用场景

component_details

获取组件详情(Props、Events、行为说明),支持按章节和属性过滤

theme_tokens

查询 Design Tokens(颜色、字号、间距等)和 CSS 变量映射

changelog_query

查询组件变更日志和 breaking changes

source_inspect

查看组件源码结构和关键函数实现

fetch_design_data

从 Octo 平台下载设计稿到本地(支持分享口令和 fileKey)

design_to_code

将设计稿 JSON 转换为 DSL / HTML / Vue 代码

Related MCP server: @deay/mcp

快速开始

安装依赖

npm install

构建

npm run build

启动

Stdio 模式(Cursor / Claude Desktop 等 MCP 客户端):

node dist/stdio.js

HTTP 模式

node dist/http.js --port 3000

MCP 客户端配置

{
  "mcpServers": {
    "my-design": {
      "command": "node",
      "args": ["/path/to/dist/stdio.js"]
    }
  }
}

环境变量

变量

必需

说明

OCTO_API_BASE

Octo API 地址(fileKey 下载模式需要)

OCTO_TOKEN

Octo 认证 Token(fileKey 下载模式需要)

OCTO_DIR

.octo/ 目录路径,默认当前目录

COMPONENT_PACKAGE_ROOT

组件包源码路径(source_inspect 用),默认读 node_modules/@douyinfe/semi-ui

项目结构

src/
  tools/          # MCP 工具定义和处理器
  utils/          # 工具函数(文档读取、源码解析等)
  server.ts       # MCP Server 创建和配置
  stdio.ts        # stdio 传输入口
  http.ts         # HTTP 传输入口
doc/
  components/     # 组件文档(Markdown)
  tokens/         # Design Tokens(JSON)
  guidelines/     # 设计规范
  changelog/      # 变更日志
  index.json      # 组件索引
tests/
  tools/          # 工具测试
  utils/          # 工具函数测试

开发

npm run build          # 构建
npm run dev            # watch 模式
npx rstest run         # 运行测试

控量策略

工具设计遵循渐进式获取,减少 token 消耗:

  • component_details brief 模式只返回概述 + Props 名称列表

  • sections 参数按需获取指定章节

  • propFilter 只返回指定属性

  • 大文档自动隐藏代码块,配合 get_code_block 按需获取

  • get_context_bundle 一次打包常用上下文,减少多次调用

Available Tools

6 tools
changelog_queryA

查询 my-design 组件库的变更日志(Changelog)和迁移指南。用于:1) 了解版本更新内容;2) 查找 Breaking Changes 和迁移方法;3) 排查版本升级问题。支持按版本号过滤和分页。

ParametersJSON Schema
NameRequiredDescriptionDefault
versionNo指定版本号(如 "2.0.0")或版本范围(如 ">=1.5.0")。如不指定,返回最新的变更记录。
pageNo页码(从 1 开始)。changelog 较长时需要分页获取。默认为 1。
keywordNo关键词搜索。用于在 changelog 中搜索特定内容(如组件名、功能名)。

TDQS

A4.1/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden. It mentions support for version filtering and pagination, which are useful behavioral details. However, it doesn't disclose important traits like whether this is a read-only operation, what authentication might be required, rate limits, or what format the changelog data returns in. The description adds some context but leaves significant behavioral gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is efficiently structured with two sentences: one stating the purpose and use cases, and another describing parameter support. Every sentence earns its place by providing essential information without redundancy. The use cases are presented in a clear numbered list format.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 parameters, no output schema, no annotations), the description provides good purpose and usage guidance but lacks important behavioral context. Without annotations or an output schema, the description should ideally explain more about what the tool returns and any operational constraints. It's adequate but has clear gaps in completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already fully documents all three parameters. The description mentions '支持按版本号过滤和分页' (supports version filtering and pagination), which aligns with the 'version' and 'page' parameters but doesn't add meaningful semantic information beyond what the schema provides. The baseline of 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with specific verbs ('查询' - query) and resources ('my-design 组件库的变更日志和迁移指南' - changelog and migration guide for my-design component library). It distinguishes from siblings by focusing on changelog queries rather than component details, examples, listings, searches, or theme tokens.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly lists three use cases: 1) understanding version updates, 2) finding breaking changes and migration methods, and 3) troubleshooting version upgrade issues. This provides clear guidance on when to use this tool versus alternatives like component_search or component_details.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

component_detailsA

获取 my-design 组件的详细文档,包括:Props(属性)、Events(事件)、核心规则(AI 生成代码时必读的约束)、Behavior(交互行为)、When to use(适用场景)、Accessibility(无障碍要求)。这是生成代码前必须调用的工具,用于确认组件 API 和使用约束。

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYes组件名称,如 Button、Input、Table。支持别名(如 Btn)。
sectionsNo要获取的章节列表。可选值:props、events、rules(核心规则)、behavior、when-to-use、accessibility、all(全部)。默认返回 props + rules。

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It describes what information is retrieved (documentation sections) and the mandatory nature of the call, but doesn't disclose behavioral traits like error handling, response format, authentication requirements, rate limits, or whether it's a read-only operation. The description adds some context about the tool's role but lacks operational details.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Well-structured with two sentences: first lists what information is retrieved, second states when to use it. Every sentence earns its place by providing essential information. Could be slightly more concise by combining elements, but overall efficient and front-loaded with the core purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a documentation retrieval tool with no annotations and no output schema, the description provides good purpose and usage context but lacks information about what the response looks like, error conditions, or operational constraints. It's adequate for understanding when to use the tool but incomplete for understanding what to expect from the call.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description doesn't add any parameter-specific information beyond what's in the schema - it mentions the same sections (props, events, rules, etc.) but provides no additional syntax, format, or usage details. Baseline 3 is appropriate when schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('获取' - get/retrieve) and resource ('my-design 组件的详细文档' - my-design component detailed documentation), listing exactly what information is included (Props, Events, Rules, Behavior, When to use, Accessibility). It distinguishes from siblings by focusing on comprehensive documentation retrieval rather than examples, lists, search, or changelogs.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly states when to use this tool: '这是生成代码前必须调用的工具' (this tool must be called before generating code). It provides clear context about its mandatory nature in the development workflow and distinguishes from alternatives by specifying it's for confirming API and usage constraints before coding.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

component_examplesB

获取 my-design 组件的代码示例。返回可直接复制使用的示例代码,覆盖组件的常见使用场景(基础用法、加载状态、禁用状态、组合使用等)。

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYes组件名称,如 Button、Input、Table。支持别名。

TDQS

B3.4/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. While it mentions the tool returns '可直接复制使用的示例代码' (ready-to-copy example code) and covers common scenarios, it doesn't disclose important behavioral aspects like authentication requirements, rate limits, error conditions, or whether this is a read-only operation. The description provides some context but leaves significant behavioral questions unanswered.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately concise with two sentences that efficiently communicate the tool's purpose and value. The first sentence states the core function, and the second adds important context about the quality and scope of returned examples. There's no wasted verbiage, though it could be slightly more structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter tool with good schema coverage but no annotations and no output schema, the description provides adequate but incomplete context. It explains what the tool returns (example code covering common scenarios) but doesn't address format, structure, or potential limitations of the output. Given the complexity level, it's minimally viable but leaves room for more complete guidance.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100% with the single parameter 'componentName' well-documented in the schema. The description doesn't add any additional parameter semantics beyond what's already in the schema (which explains it accepts component names like Button, Input, Table and supports aliases). This meets the baseline score of 3 when schema coverage is high.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('获取' - get/retrieve), resource ('my-design 组件的代码示例' - my-design component code examples), and scope ('覆盖组件的常见使用场景' - covering common usage scenarios). It distinguishes itself from siblings like component_details or component_search by focusing on ready-to-use example code rather than metadata or search functionality.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context by mentioning '可直接复制使用的示例代码' (ready-to-copy example code) and covering common scenarios, but doesn't explicitly state when to use this tool versus alternatives like component_details for documentation or component_search for discovery. No explicit exclusions or comparisons with sibling tools are provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

component_listC

获取 my-design 组件库的组件列表。返回所有可用组件及其分类、状态等元信息。

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNo按分类过滤组件。可选值:form(表单)、data(数据展示)、feedback(反馈)、layout(布局)、navigation(导航)、general(通用)
statusNo按状态过滤组件。可选值:stable(稳定)、beta(测试)、deprecated(已弃用)

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. It mentions the tool returns '所有可用组件及其分类、状态等元信息' (all available components with their classification, status, and other metadata), which gives some output context. However, it doesn't address important behavioral aspects like whether this is a read-only operation, potential rate limits, authentication requirements, or pagination behavior for large result sets.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately concise with two sentences that directly address the tool's function and return value. It's front-loaded with the core purpose and efficiently communicates the scope of returned information without unnecessary elaboration.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (list operation with optional filtering), lack of annotations, and absence of an output schema, the description provides basic but incomplete context. It covers what the tool does and what information it returns, but doesn't address behavioral aspects like safety, performance characteristics, or error conditions that would be important for an agent to use it effectively.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with both parameters (category and status) well-documented in the schema itself. The description doesn't add any parameter semantics beyond what's already in the schema - it doesn't explain the filtering logic, default behavior when parameters aren't provided, or how multiple filters interact. This meets the baseline expectation when schema coverage is complete.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: '获取 my-design 组件库的组件列表' (get the component list of the my-design component library). It specifies the resource (component library) and action (get list), but doesn't distinguish it from sibling tools like component_search or component_details, which would require explicit differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools like component_search (which might offer more flexible filtering) or component_details (which provides detailed information about specific components), leaving the agent to guess about appropriate usage contexts.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

theme_tokensB

获取 my-design 的 Design Token(设计令牌)和主题信息。包括颜色、间距、圆角、字体等 token 定义,以及不同主题(light/dark)下的值差异。生成代码时应优先使用 token(CSS 变量),避免硬编码颜色、间距等值。

ParametersJSON Schema
NameRequiredDescriptionDefault
typeNoToken 类型过滤。可选值:color(颜色)、spacing(间距)、radius(圆角)、font(字体)、shadow(阴影)、all(全部)。默认返回全部。
themeNo主题名称。可选值:light、dark。如果指定,则返回该主题下的 token 值。

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It describes what the tool returns (tokens and theme info) and a usage recommendation for code generation, but it lacks critical behavioral details such as whether this is a read-only operation, potential rate limits, authentication requirements, error handling, or the format/structure of the returned data. For a tool with no annotations, this is a significant gap in transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized and front-loaded, starting with the core purpose. It uses two sentences: one for the tool's function and one for usage advice. There's minimal waste, though the second sentence could be seen as slightly extraneous if the focus is purely on tool invocation rather than code generation best practices.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (2 parameters, no output schema, no annotations), the description is partially complete. It covers the purpose and includes a usage tip, but it lacks details on behavioral aspects (e.g., read/write nature, data format) and doesn't compensate for the absence of an output schema. This makes it adequate for basic understanding but insufficient for full agent confidence without additional context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with clear documentation for both parameters ('type' and 'theme'), including optional values and defaults. The description adds no additional parameter semantics beyond what's in the schema; it doesn't explain parameter interactions, provide examples, or clarify edge cases. According to the rules, with high schema coverage (>80%), the baseline is 3 even without param info in the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: '获取 my-design 的 Design Token(设计令牌)和主题信息' (Get Design Tokens and theme information for my-design). It specifies the resources (color, spacing, radius, font, shadow tokens) and the scope (light/dark theme differences). However, it doesn't explicitly distinguish this tool from its siblings (like component_details or component_list), which might also involve design-related data, so it doesn't achieve full sibling differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides implied usage guidance by stating '生成代码时应优先使用 token(CSS 变量),避免硬编码颜色、间距等值' (When generating code, prioritize using tokens (CSS variables) and avoid hardcoding values like colors and spacing). This suggests the tool is for code generation contexts. However, it doesn't explicitly state when to use this tool versus alternatives (e.g., vs. component_details for component-specific tokens) or provide clear exclusions, leaving some ambiguity.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

TDQS

A3.8/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose with no overlap: changelog_query handles version history, component_details provides API documentation, component_examples offers code samples, component_list enumerates components, component_search finds components, and theme_tokens covers design tokens. The descriptions explicitly differentiate their roles, making misselection unlikely.

Naming Consistency5/5

All tool names follow a consistent snake_case pattern with a clear 'noun_noun' or 'noun_verb' structure (e.g., changelog_query, component_details). This predictability helps agents easily parse and understand the tool set without confusion from mixed conventions.

Tool Count5/5

With 6 tools, this server is well-scoped for its purpose of supporting a design system (my-design). Each tool earns its place by covering essential aspects like documentation, examples, listing, search, changelogs, and themes, avoiding bloat while providing comprehensive coverage.

Completeness5/5

The tool surface is complete for the domain of a design system, covering CRUD-like operations: component_list and component_search for discovery, component_details for detailed API info, component_examples for implementation, changelog_query for version management, and theme_tokens for styling. No obvious gaps exist for core workflows.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.
    18
    9
    MIT
  • F
    license
    Not graded
    quality
    D
    maintenance
    MCP server providing AI assistants with comprehensive documentation about @deay/ui components, including props, examples, best practices, and Figma design specifications.
  • A
    license
    A
    quality
    C
    maintenance
    An MCP server that connects AI clients to Figma components, design tokens, and variables from the BrixUI Design System, enabling component browsing, searching, and token retrieval.
    4
    13
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    An MCP server that gives AI assistants structured access to a design system's tokens, components, guidelines, and patterns, enabling them to read, lint, and author design system data.
    1
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Davont/my-compoent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server