@db-ux/mcp-server

中文文档

6.3.2发布于 2026/11/11Apache-2.0ES Module构建来源已验证近 30 天下载 3663

DB UX 设计系统的 MCP 服务器 – 允许 LLMS 访问 UI 组件和代码示例

文档目录25 节

消费者快速启动
1. 访问服务器
2. 配置您的 IDE
3. 添加 DB UX 规则
4. 验证连接
5. 为这一项目优化亚马逊Q(建议)
• 可用AI工具(技能)
示例:获取反应按钮示例
* 可用 AI 工作流程(Prompts)
scaffold_page (稀有原型)
review_ui_code (质量保证和A11y)
migrate_component (Legacy重现)
audit_accessibility (深A11y扫描)
安全合规
++ 架构和声明
如何运作
构建时间表
通用路径分辨率
目录结构
* 解决问题
VS 代码中的"未知配置设置"
服务器无法从 monrepo 根( 本地开发) 启动
开发和测试
MCP 检查员
发展制约因素

DB UX 模式上下文协议( MCP) 服务器

此服务器是AI编码代理(如亚马逊Q,GitHub Copilot,克洛德)和DB UX设计系统的连接器. 它让每个AI代理都有一个单一的,权威的真理来源——组件API,特定框架的代码示例,设计符号,和图标名称——因此代理从不需要猜测或幻觉组件名称,道具签名,或色彩值.

没有这个服务器,AI代理就发明了可信但错误的组件用法. 用它,他们拉出准确生成的源代码船舶在npm包。此外,通过Agent Auto-Recovery(语义错误处理),服务器会截取AI打字机并主动引导代理自动恢复,防止工作流程崩溃.

消费者快速启动

要求: 节点.js 页:1 运行 MCP 服务器需要更高或更高.

1. 访问服务器

保证您正在使用 Node.js v22+ 并访问 DB UX 包。服务器通过 npx数字 :

npx --yes @db-ux/mcp-server

或与平按:

pnpm i @db-ux/mcp-server --save-dev
pnpm exec db-ux-mcp-server

关键概念: 没错没有在您的终端中手动运行此命令, 供日常使用。如果你这样做,它会看起来像终端挂起,因为它在标准输入上等待JSON-RPC消息(stdio) (中文(简体) ). 相反,您会配置您的 IDE( Cursor, VS 代码, IntelliJ) 在背景中自动运行此命令 .

2. 配置您的 IDE

重要内容: 确保您包括整个等级(例如, mcp - > (中文) servers) (中文(简体) ). 别添加 db-ux 键直接到设置文件的根.

在您的 MCP 客户端配置中添加以下条目( VS 代码, IntelliJ, Cursor等) :

{
    "mcpServers": {
        "db-ux": {
            "command": "npx",
            "args": ["--yes", "@db-ux/mcp-server"]
        }
    }
}

这些是您可能想要更改的文件 :

亚马逊Q/ 基罗: ~\.aws\amazonq\agents\default.json
副驾驶: ~\.copilot\config.json

VS 代码

你有两种选择:

建议(项目一级): 创建一个 .vscode/mcp.json 中的文件。这使得您可以通过Git与团队分享MCP配置.
替代品(用户级): 将条目添加到您的全局 settings.json 内侧 mcp 对象.

说明: 如果两者都存在 .vscode/mcp.json 文件优先.

{
    "servers": {
        "db-ux": {
            "command": "npx",
            "args": ["--yes", "@db-ux/mcp-server"]
        }
    }
}

IntelliJ / JetBrains 接口

通过 设置 – 工具 – AI助手 – 模式上下文协议 – 添加服务器在对话框中使用这些值 :

外地	数值
名称	`db-ux`
类型	`stdio`
命令	`npx`
参数	`--yes @db-ux/mcp-server`

3. 添加 DB UX 规则

运行此命令以更新您的仓库规则

npm i --save-dev @db-ux/mcp-server
npx --yes @db-ux/agent-cli

这将将 DB UX 组件使用的正确规则复制到一个 .github/copilot-instructions.md 文件中的文件。这些规则对于确保AI代理正确使用DB UX组件,并且不会产生幻觉或发明不正确的使用模式至关重要.

4. 验证连接

检查状态 : 在您的 IDE 的 MCP 服务器列表中查找绿色指示器或" db-ux" .
检查日志 : 如果它不出现, 请检查您的 IDE 中的 MCP 输出日志( 例如 VS 代码 : 输出面板 → MCP 磁共振 或者说 MCP 服务器) (中文(简体) ).

5. 为这一项目优化亚马逊Q(建议)

亚马逊 Q 可以自动加载工程的 CONTEXT.md 作为每次会话的持久系统提示("规则"). 这就是说那个特工 已经知道 mCP服务器架构,所有可用的工具,设计令牌源,迁移工作流程,以及Generation 3组件 API——开发者没有任何手动登入或反复设置上下文.

为什么这很重要:

消除关于组件名称、道具签名和符号值的幻觉
QQ 代理从第一个信件中遵循正确的6步迁移工作流程
QQ 新团队成员在第一天获得完全了解背景的AI助手

设置 :

打开( 或创建) 文件 ~/.aws/amazonq/agents/default.json
添加以下配置 :

{
    "agentInstruction": {
        "paths": ["CONTEXT.md"]
    }
}

设置 CONTEXT.md 在您的工程根中存档( 它为 @db-ux/mcp-server 复制到 npx @db-ux/agent-cli(中文(简体) )

说明: 路径相对于工作空间根解决. Amazon Q / Kiro将在每次会话开始时读取此文件并注入为代理的系统级上下文.

• 可用AI工具(技能)

工具	说明
`list_components`	返回所有可用的 DB UX 组件名称(例如 . `button`, (中文(简体) ), `input`, (中文(简体) ), `tag`) (中文(简体) ). 调用此选项以确认组件在使用前已存在 .
`get_component_props`	返回原始类型脚本 `model.ts` 用于组件——所有接口、道具类型和 JSDoc 注释.
`get_component_details`	返回组件可用示例名称列表(例如). `"Variant"`, (中文(简体) ), `"Show Icon Leading"`) (中文(简体) ).
`get_example_code`	为特定框架中的组件示例获取精确生成的源代码( E)`react`, (中文(简体) ), `angular`, (中文(简体) ), `vue`, (中文(简体) ), `web-components`,或 `html`) (中文(简体) ). 这是AI适应的代码——而不是发明.
`get_design_tokens`	返回 CSS 自定义属性( E)`--db-*`用于符号类(`colors`, (中文(简体) ), `spacing`, (中文(简体) ), `typography`, (中文(简体) ), `elevation`, (中文(简体) ), `density`(中文(简体) ). 从结构化读取 `tokens.json` 以混凝土原始值(如:. `0.75rem`,框-阴影字符串). 将不属于JSON的类别(如动画,过渡)从清单中退回SCSS. 防止了硬码的六进制值和魔法数字.
`list_design_token_categories`	列出要传递给的所有可用的符号类别 `get_design_tokens`。。。 .
`list_icons`	返回所有有效的 DB UX 图标名称( 例如 ) . `arrow_down`, (中文(简体) ), `chevron_right`, (中文(简体) ), `x_placeholder`) (中文(简体) ). 在使用前总是使用此选项 `icon` 道克——永远不要猜出一个名字.
`docs_search`	搜索 DB UX 概念文档( 指南、可访问性、迁移、 ADRs) 或特定组件的标记下文件。充当我们的检索增强型(RAG)引擎.
`list_migration_guides`	返回所有可用的移民指南名称(例如:. `color-migration`, (中文(简体) ), `component-migration`) (中文(简体) ). 在任何移民任务之前先叫它.
`get_migration_guide`	返回特定迁移指南的全部标记下的内容。使用它来装入正式的软件包重命名,道具更改,以及组件在重构遗留代码之前的绕行.
`verify_migrated_code`	指示AI使用项目自己的脚本来验证其变化(`typecheck`, (中文(简体) ), `lint`, (中文(简体) ), `build`从 `package.json`. 没有临时文件或硬码编译器——与任何工具链(JS,TS,Vite,Angular CLI)合作.
`scan_generation_2_migration`	迁移文件时拨打 First . 扫描 DB UX 设计系统 — Generation 2( aka DB UI) 模式( Generation 2 CSS 类) 的源文件`cmp-`, (中文(简体) ), `elm-`, (中文(简体) ), `rea-`)和第二代网络组件(`<db->`, (中文(简体) ), `db-color-*` 符号,遗留图标名称),并返回JSON报告,其中包含准确行号,以及官方指南的决定性迁移建议. 不需要LLM猜测.
`list_visuals`	返回所有可用的可视参考名称(例如:. `dashboard`, (中文(简体) ), `form`, (中文(简体) ), `table`) (中文(简体) ). 调用此来发现哪些视觉存在, 然后再请求 .
`get_visual_reference`	返回一个预优化的静态视觉参考图像(JPEG)作为Base64-encoded MCP图像块. 没有构建时间或运行时间图像处理依赖性——图像被承诺作为预优化资产.

示例:获取反应按钮示例

list_components          → confirms "button" exists
get_component_props      → reveals DBButtonProps, variants, types
get_component_details    → lists ["Density", "Variant", "Show Icon Leading", ...]
get_example_code         → returns show-icon-leading.example.tsx source
list_icons               → confirms "arrow_right" is a valid icon name
get_design_tokens        → returns --db-spacing-fixed-md for layout
verify_migrated_code     → instructs AI to run project's own typecheck/lint/build scripts

* 可用 AI 工作流程(Prompts)

服务器暴露了预定义的"提示",即会协调复杂的认知工作流程. 它们迫使AI在生成输出前,通过工具进行规划,核实和分析. 您可以在您的 AI 聊天 UI (如果支持的话) 或通过 MCP 检查器触发这些 .

`scaffold_page` (稀有原型)

生成完整网页或复杂模块的初始结构.

参数: page_type, (中文(简体) ), framework, (中文(简体) ), additional_requirements。。。 .
行为: 执行"Plan-First"范式,将布局解为逻辑UI块并验证组件存在后再写出任何框架特定代码.

`review_ui_code` (质量保证和A11y)

对提供的代码片段进行严格的多层QA,可访问性和DB UX合规性审核.

参数: code_snippet, (中文(简体) ), framework。。。 .
行为: 扫描硬码"魔法数字"并检查WCAG 2.2 AA规则. 大赦国际被迫提供: 证据由于它使用设计符号和组件 API 工具进行批评.

`migrate_component` (Legacy重现)

将遗留的UI代码(如:Bootstrap,原生HTML,DB UI Generation 1或2)转换为现代Generation 3架构. 这是最复杂的瞬间——它协调了 10个不同的MCP工具 跨越5个强制步骤,包括核查循环.

参数:

参数	需求	说明
`legacy_code`	对	要迁移的过时的源代码(DB UI,Bootstrap,生HTML/CSS). 最大 1万个字符
`source_context`	对	遗留代码的来源 : `db-ui-generation-1`, (中文(简体) ), `db-ui-generation-2`, (中文(简体) ), `db-ux-generation-1`, (中文(简体) ), `db-ux-generation-2`, (中文(简体) ), `db-ux-generation-3`, (中文(简体) ), `bootstrap-4`,或 `native-html`
`target_framework`	对	目标框架: `react`, (中文(简体) ), `angular`, (中文(简体) ), `vue`, (中文(简体) ), `web-components`,或 `html`

全部工作流程(5个强制性步骤):

┌──────────────────────────────────────────────────────────────────┐
│ STEP 0: FILE SCAN (NEW — deterministic, no guessing)             │
│  scan_generation_2_migration → JSON report with line numbers, │
│  Generation 2 patterns, and migration suggestions                │
├──────────────────────────────────────────────────────────────────┤
│ STEP 1: MIGRATION ANALYSIS                                       │
│  list_migration_guides → get_migration_guide → docs_search       │
│  Output: Legacy Element → Generation 3 Component mapping table   │
├──────────────────────────────────────────────────────────────────┤
│ STEP 2: COMPONENT DISCOVERY & PROPS RETRIEVAL                    │
│  list_components → get_component_props → get_component_details   │
│  → get_example_code → get_design_tokens → list_icons             │
├──────────────────────────────────────────────────────────────────┤
│ STEP 3: CODE GENERATION                                          │
│  Generates complete migrated code (NOT shown to user yet)        │
├──────────────────────────────────────────────────────────────────┤
│ STEP 4: CODE VERIFICATION & SELF-CORRECTION (mandatory)          │
│  verify_migrated_code → run project scripts → retry (max 3)     │
├──────────────────────────────────────────────────────────────────┤
│ STEP 5: FINAL OUTPUT                                             │
│  ✅ VERIFIED or ⚠️ WARNING with remaining diagnostics            │
└──────────────────────────────────────────────────────────────────┘

分步骤详细情况:

移徙分析 - 电话 list_migration_guides 接下来 get_migration_guide 以加载官方迁移规则(包装重命名、道具更改、去除组件)。电话 docs_search 用于特定组成部分的迁移文件。制作一个绘图表:遗产元素 → 第一代第3部分 → 理由.
组件发现和道具检索 - 电话 list_components 以验证每个映射组件。每个: get_component_props (TypeScript API), (中文(简体) ), get_component_details (实例), get_example_code (canonic source to adapt). (原始内容存档于2018-09-21). 电话 get_design_tokens 以替换硬码颜色/相距。电话 list_icons 以验证图标名称.
代码生成 生成完整迁移代码并正确 @db-ux/* 导入、验证设计符和验证图标名称. 尚未将此输出给用户 .
代码验证和自我更正 - 电话 verify_migrated_code 它指示AI运行项目自己的校验脚本(类型检查, lint, 从 package.json 构建). 如果发现错误,AI会修正代码并重试——最多 3次最大尝试这一步骤适用于所有框架目标.
最后产出 ——将结果分为三节:"迁移分析"(映射表+指南参考文献),"迁移码"(标注为"成功"的QQVIFIED,或用所剩诊断的QQWARING")和"可获取性说明"(WCAG 2.2 AA的合规性确认).

现有移徙指南:

指南	封面
`component-migration`	部件重命名、道具更改、去除/计划部件
`color-migration`	全彩色符号映射( 旧 ) `--db-*` 符号)
`icon-migration`	图标名称映射( 如 . `account` → `person`, (中文(简体) ), `delete` → `bin`(中文(简体) )
`general-migration`	字形符号、相距符号、高地、内线样式去除

示例: 迁移代号 2 反应组件

用这些参数触发提示 :

legacy_code: 您的旧 React 组件源代码
source_context数字 : db-ui-generation-2
target_framework数字 : react

然后,大赦国际将自主地:

装入 component-migration, (中文(简体) ), color-migration, (中文(简体) ), icon-migration,以及 general-migration
映射出每个遗留元素(例如. variant="brand-primary" → variant="brand", (中文(简体) ), icon="search" → icon="magnifying_glass"(中文(简体) )
获取每个组件的确切生成的 React 示例代码并对其进行调整
替换所有硬码 #ec0016 编号 : margin: 15px 数值为 --db-* 设计符号
通过 verify_migrated_code (运行项目自己的脚本)和自修正最多3次
提交经核实的代码并附有迁移分析和访问说明

`audit_accessibility` (深A11y扫描)

专门进行深度扫描,专门用于纳入和无障碍标准(WCAG 2.2 AA)。超越了传统的linters,通过评价交互模式,焦点命令,并生成手动测试脚本.

参数: code_snippet, (中文(简体) ), framework。。。 .
行为: 电话 docs_search 以获取全局 DB UX 访问指南,然后验证所使用的组件如何在本地处理 ARIA 属性和键盘事件。制作一份附有证据的WCAG优先违规名单和QA工程师的分步人工测试脚本.

安全合规

这个MCP服务器在严格,零信任的安全模式下运行,以防止恶意AI行为或意外系统损坏.

严格 Read- Only 沙盒 : 服务器对设计系统文件没有写入许可. 所有进口 node:fs 对于组件数据严格只读(readFile, (中文(简体) ), readdir) (中文(简体) ). 这个 verify_migrated_code 工具不执行 shell 命令——它返回指令,让 LLM 运行项目自己的校验脚本.
路径 Traversal 保护( 防故障): 所有文件和目录访问(如解决组件名)都通过一个具有横贯保护的路径解析器(resolveSafePath) (中文(简体) ). 服务器保证任何文件读取都无法从允许的基础目录中逃脱( 屏蔽) ../../etc/passwd 攻击.
DoS 上下文窗口保护( C) : 为防止LLMS因上下文窗口外溢而崩溃或产生大规模API计费提示,实施严格的符号限制:
- 读取的文件在 2万个字符。。。 .
- JSON 阵列( 如组件或图标列表) 在 2万个字符。。。 .
- 目录扫描的硬度限制最大 10个文件。。。 .

++ 架构和声明

如何运作

服务器是一个单一的节点.js进程静态使用示范背景协议。它由 IDE 中的 MCP 客户端作为儿童进程启动.

构建时间表

因为 model.ts,显示文件,框架示例源文件为没有包含在已发布的 npm 包中( 仅编译) dist/ ),服务器在构建时嵌入所有必要的数据.

scripts/build-manifest.ts 被唤作 prebuild.ts 管弦乐和制作 src/manifest.json 包含:

manifest.json
├── icons[]                          — icon names from packages/foundations/src/all-icons.ts
├── tokens{}                         — SCSS design tokens mapped by category (colors, typography, animation, transitions — categories with raw SCSS; spacing/elevation/density served from tokens.json instead)
├── docs{}                           — conceptual markdown documentation
└── components{}
    └── {componentName}
        ├── props                    — raw model.ts content
        ├── examples[]               — example names from showcase file
        └── exampleCode
            ├── react{}              — { "variant.example.tsx": "<source>" }
            ├── angular{}            — { "variant.example.ts":  "<source>" }
            ├── vue{}                — { "variant.example.vue": "<source>" }
            └── web-components{}     — { "variant.example.ts":  "<source>" }

这个清单被捆绑到最后 index.js 由建造,生产 ~775 KB 独立可执行文件 里面包含了所有的知识.

通用路径分辨率

服务器自动检测运行时环境 :

IS_MONOREPO
  true  → packages/components/src/components/ exists
          → reads live files from the monorepo (model.ts, output/, foundations/)
  false → running from node_modules/@db-ux/mcp-server/dist/
          → reads from the embedded manifest.json

这意味着同样的二进制作品用于:

设计系统开发者 在单曲内工作( 总是更新、实时文件)
消费者团队 运行 npx @db-ux/mcp-server (自足,不需要单列)

关于设计标志的说明: 对于大多数类别(相距、高程、密度、颜色等),工具读取结构化 assets/tokens/tokens.json 生成 prebuild 步骤从 @db-ux/db-theme 和基础建立产出。 JSON未覆盖的类别(如动画,过渡)从出货单回落为原始SCSS.

关于视觉参考的说明: 这个 get_visual_reference 工具服务于预优化的 JPEG 图像 assets/visuals/。这些文件直接被输入寄存器——不需要构建时段图像处理或本地依赖.

目录结构

packages/mcp-server/
├── assets/
│   ├── migration/          # Migration guides (copied from docs/migration/db-ui/ by prebuild)
│   ├── tokens/             # Prebuild-generated tokens.json (structured design tokens)
│   └── visuals/            # Pre-optimised static reference images (JPEG, committed to Git)
├── scripts/
│   ├── prebuild.ts          # Central orchestrator: migration assets, tokens, manifest (runs via tsx)
│   └── build-manifest.ts    # Build-time script — generates src/manifest.json
├── src/
│   ├── index.ts            # Bootstrap — serves the factory over stdio via serveStdio
│   ├── server.ts           # buildServer() factory (registers tools/prompts) and lifecycle handlers
│   ├── types.ts            # Framework type and FRAMEWORK_PKG mapping
│   ├── tools/              # Tool handler implementations
│   ├── prompts/            # Prompt handler implementations
│   ├── utils/              # Shared utilities (path, manifest, formatting, async)
│   └── manifest.json       # Generated — do not edit manually
├── dist/
│   └── index.js            # Compiled standalone bundle (gitignored)
├── esbuild.js              # Build script: bundles src/index.ts into standalone dist/index.js
├── package.json
├── tsconfig.json
└── CONTEXT.md              # Architecture notes

* 解决问题

VS 代码中的"未知配置设置"

如果你看到黄色的喷出/警告 settings.json,这是预期的。标准VS代码在本地不承认 mcp 键。只要您的 MCP 客户端( 如 Claude 扩展或 Cursor) 活动, 服务器就会完美工作 .

服务器无法从 monrepo 根( 本地开发) 启动

如果您正在直接从 DB UX 单列波内开发或测试 MCP 服务器,则全局 npx 命令可能由于 npm 工作空间分辨率而失败。在这种情况下,绕道 npx 并直接指向本地已建文件.

回落 IDE 配置( VS 代码/ IntelliJ) : 而不是使用 npx,使用时 node 并指示当地的道路 npm run build 输入 mcp-server 目录第一:

"db-ux": {
    "command": "node",
    "disabled": false,
    "timeout": 60000,
    "args": ["packages/mcp-server/dist/index.js"]
}

或者,您可以将您用于 MCP 服务器的 IDE 工作目录更改为 packages/mcp-server。。。 .

开发和测试

要在开发过程中孤立地构建和测试服务器:

# from packages/mcp-server/
npm run build   # generates manifest + bundle
npm run dev     # runs src/index.ts directly via tsx (monorepo mode, live files). The server communicates over stdio and produces no terminal output by itself — this is expected.

MCP 检查员

这个 MCP 检查员 是验证MCP工具和提示的正式工具(例如:. scaffold_page)独立于任何IDE(VS代码,IntelliJ等). 使用它来检查服务器的能力,测试工具以交互方式调用,并在一个AI代理工作流程中依赖它们之前验证快速输出.

先决条件

首先构建服务器捆绑( 如果尚未完成 ) :

# from packages/mcp-server/
npm run build

开始检查

运行以下命令 packages/mcp-server/ 目录 :

说明: 内审官继续工作 端口 6274,在 端口 6277。如果任一端口已经使用,则首先释放: lsof -ti :6274 -ti :6277 | xargs kill -9

npx @modelcontextprotocol/inspector --transport stdio node dist/index.js

检查员会打印一个URL,并附带终端的会话符号,例如:

🔍 MCP Inspector is up and running at http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=<token>

打开 包含符号的完整 URL 在您的浏览器中 —— 认证需要该符号.

分步工作流程

运行上面的命令——检查者启动本地网络服务器
打开 带符号的完整 URL 在终端打印(例如:. http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=...(中文(简体) )
点击 "连接" 以建立与服务器的 stdio 连接
导航到 "工具" (中文(简体) ) 选项卡以调用单个工具(例如). list_components, (中文(简体) ), scan_generation_2_migration)并检查他们的答复
导航到 "快递" 选项卡以浏览并执行交互式提示 scaffold_page

提示 : 检查员是框架和IDE不可知的。它与服务器在stdio上通信完全像一个真正的MCP客户端, 使它成为最可靠的方法在问题浮出水面之前在AI代理会话.

发展制约因素

这些规则对于在MCP服务器包上工作的贡献者至关重要.

规则	细节
仅限无害环境管理	这个软件包是 `"type": "module"`。永远不要使用 `require()` ——使用 `import` 专有.
tS 脚本的 tsx	构建脚本( 如. `prebuild.ts`运行通过 `tsx`。这确保了与节点.js 22+的兼容性.
没有生命周期钩子	国家预防机制生命周期脚本`prebuild`, (中文(简体) ), `preinstall`)在此单列波中被禁用。建造步骤必须连锁通过 `&&` 输入 `build` 剧本.
没有承诺的建筑文物	文件在 `assets/migration/` 财务报告和审定财务报表 `assets/tokens/` 在构建时生成。他们被侮辱了,绝不能被投入其中. `assets/visuals/` 含有静态 JPEGs 的为: 承诺.
严格只读资产	服务器决不能在运行时返回到单列波源路径. 严格从 `assets/` 避免掩盖建设失败.
硬 CI 失败	构建脚本必须 `throw new Error()` 在缺少所需来源的情况下——永远不能无声地失败。例外:密度CSS(建造文物,软故障允许).
文件系统安全	总是打电话 `stats.isFile()` 之后 `stat()` 在此之前 `readFile()` 预防 `EISDIR` 在目录上崩溃 .
跨平台路径	在路径比较前,将后鞭向前鞭向正态化。包含 Windows 显示密钥 `\`。。。 .

说明: AI的特定行为规则(gentle migration, Crowth 2 / Crowth 3名名词,图标校验等)在其中得到维护 CONTEXT.md (为消费者AI代理商装有包裹) .github/copilot-instructions.md (对于在这个单体内工作的特工). 此处无意重复.

版本与发布记录

@db-ux/mcp-server 共发布 71 个版本，首次发布于 2026/03/30；过去 12 个月发布了 71 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`6.3.2`latest	2026/11/11	今天
`6.3.1`	2026/11/10	1 天前
`6.3.0`	2026/11/05	6 天前
`6.2.1`	2026/11/04	7 天前
`6.2.1-optimized-icon-fonts-amount2-b78987e`next	2026/11/04	7 天前
`6.2.0`	2026/10/29	13 天前

其他发布通道：test → 5.1.3-dummy.0，next → 6.2.1-optimized-icon-fonts-amount2-b78987e。

关于 @db-ux/mcp-server 的常见问题

@db-ux/mcp-server 是什么？

DB UX 设计系统的 MCP 服务器 – 允许 LLMS 访问 UI 组件和代码示例

如何安装 @db-ux/mcp-server？

在项目目录运行 npm install @db-ux/mcp-server，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 db-ux-mcp-server，可以用 npx db-ux-mcp-server 直接运行。

@db-ux/mcp-server 支持 TypeScript 吗？

该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/db-ux__mcp-server 是否存在。

@db-ux/mcp-server 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。

@db-ux/mcp-server 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js >=22.0.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@db-ux/mcp-server 可以商用吗？

@db-ux/mcp-server 使用 Apache-2.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

@db-ux/mcp-server 的下载量有多少？

根据 npm 官方下载统计，@db-ux/mcp-server 在 2026/10/12 – 2026/11/10 这 30 天内被下载 3,663 次，日均约 122 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@db-ux/mcp-server 还在维护吗？

最新版本 6.3.2 发布于 2026/11/11（今天）；至今共发布 71 个版本，其中过去 12 个月发布了 71 个；首次发布于 2026/03/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

@db-ux/mcp-server

DB UX 模式上下文协议( MCP) 服务器

消费者快速启动

1. 访问服务器

2. 配置您的 IDE

VS 代码

IntelliJ / JetBrains 接口

3. 添加 DB UX 规则

4. 验证连接

5. 为这一项目优化亚马逊Q(建议)

• 可用AI工具(技能)

示例:获取反应按钮示例

* 可用 AI 工作流程(Prompts)

scaffold_page (稀有原型)

review_ui_code (质量保证和A11y)

migrate_component (Legacy重现)

audit_accessibility (深A11y扫描)

安全合规

++ 架构和声明

如何运作

构建时间表

通用路径分辨率

目录结构

* 解决问题

VS 代码中的"未知配置设置"

服务器无法从 monrepo 根( 本地开发) 启动

开发和测试

MCP 检查员

先决条件

开始检查

分步工作流程

发展制约因素

版本与发布记录

关于 @db-ux/mcp-server 的常见问题

@db-ux/mcp-server 是什么？

如何安装 @db-ux/mcp-server？

@db-ux/mcp-server 支持 TypeScript 吗？

@db-ux/mcp-server 支持 ESM 还是 CommonJS？

@db-ux/mcp-server 需要什么版本的 Node.js？

@db-ux/mcp-server 可以商用吗？

@db-ux/mcp-server 的下载量有多少？

@db-ux/mcp-server 还在维护吗？

`scaffold_page` (稀有原型)

`review_ui_code` (质量保证和A11y)

`migrate_component` (Legacy重现)

`audit_accessibility` (深A11y扫描)