Skip to main content
Glama
Sign In
my-design MCP Server

my-design MCP Server

by Davont
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Remote

@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) 排查版本升级问题。支持按版本号过滤和分页。

Inputs: version, page, keyword.

component_detailsA

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

Inputs: componentName (required), sections.

component_examplesB

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

Inputs: componentName (required).

component_listC

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

Inputs: category, status.

component_searchA

搜索 my-design 组件库的组件。支持按组件名、别名、关键词、分类进行模糊搜索。适用于：1) 不确定组件名称时进行探索；2) 根据需求找到合适的组件；3) 查找相关组件。

Inputs: query (required).

theme_tokensB

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

Inputs: type, theme.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A3.8/5.0

    Scored across 6 tools

    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
    ResponsivenessOutdated data

    Resources

    Related MCP Connectors

    Related MCP Servers

    • ds-pilot

      lyse-labs
      A
      license
      Not graded
      quality
      D
      maintenance
      MCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.
      4 npm
      9
      MIT

    • BrixUI MCP Server

      multicomak
      A
      license
      A
      quality
      D
      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
      7 npm
      MIT

    • @dsk/mcp

      rabindranath1311
      A
      license
      Not graded
      quality
      D
      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