# @db-ux/mcp-server 中文文档

规范地址：https://npmcn.com/package/%40db-ux/mcp-server/

版本：6\.3\.2
npm 元数据更新时间：2026-11-11T13:01:32.663Z
中文译文更新时间：2026-11-11T20:11:11.903Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40db-ux/mcp-server
原文对照：https://npmcn.com/package/%40db-ux/mcp-server/?lang=original
源码仓库：https://github.com/db-ux-design-system/core-web

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：7.1 MB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=22\.0\.0
- 运行依赖：2 个
- 首次发布：2026-03-30T09:49:52.369Z
- 最新版本发布：2026-11-11T13:01:32.173Z
- 近 30 天下载量：3663（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：71（近 12 个月 71 个）

## 中文简介

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

## 安装

```sh
npm install @db-ux/mcp-server
```

也可以使用：`pnpm add @db-ux/mcp-server`、`yarn add @db-ux/mcp-server`、`bun add @db-ux/mcp-server`

## README

# 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`数字 :

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

或与平按:

```bash
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等) :

```json
{
    "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` 文件优先.

```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 规则

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

```shell
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助手

**设置 :**

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

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

3.  设置 `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图像块. 没有构建时间或运行时间图像处理依赖性——图像被承诺作为预优化资产. |

### 示例:获取反应按钮示例

```text
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个强制性步骤):**

```text
┌──────────────────────────────────────────────────────────────────┐
│ 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            │
└──────────────────────────────────────────────────────────────────┘
```

**分步骤详细情况:**

1.  **移徙分析** - 电话 `list_migration_guides` 接下来 `get_migration_guide` 以加载官方迁移规则(包装重命名、道具更改、去除组件)。 电话 `docs_search` 用于特定组成部分的迁移文件。 制作一个绘图表:遗产元素 → 第一代 第3部分 → 理由.
2.  **组件发现和道具检索** - 电话 `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` 以验证图标名称.
3.  **代码生成** 生成完整迁移代码并正确 `@db-ux/*` 导入、验证设计符和验证图标名称. **尚未将此输出给用户 .**
4.  **代码验证和自我更正** - 电话 `verify_migrated_code` 它指示AI运行项目自己的校验脚本(类型检查, lint, 从 package.json 构建). 如果发现错误,AI会修正代码并重试——最多 **3次最大尝试**这一步骤适用于所有框架目标.
5.  **最后产出** ——将结果分为三节:"迁移分析"(映射表+指南参考文献),"迁移码"(标注为"成功"的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`

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

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

### `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进程 **静态** 使用 [示范背景协议](https://modelcontextprotocol.io/)。它由 IDE 中的 MCP 客户端作为儿童进程启动.

### 构建时间表

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

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

```text
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 独立可执行文件** 里面包含了所有的知识.

### 通用路径分辨率

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

```text
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/`。这些文件直接被输入寄存器——不需要构建时段图像处理或本地依赖.

### 目录结构

```text
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` 目录第一:

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

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

* * *

## 开发和测试

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

```bash
# 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代理工作流程中依赖它们之前验证快速输出.

#### 先决条件

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

```bash
# from packages/mcp-server/
npm run build
```

#### 开始检查

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

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

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

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

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

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

#### 分步工作流程

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

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 和提交记录判断。