内容
# @lando-labs/lando-ds-mcp
[](https://www.npmjs.com/package/@lando-labs/lando-ds-mcp)
[](./LICENSE)
[](https://github.com/lando-labs/lando-ds-mcp/actions/workflows/test.yml)
[](https://nodejs.org)
**Lando Labs 设计系统（Lando Labs Design System）的 MCP 服务器。** 为 AI 代理提供权威的自省和代码生成能力，涵盖 127 个 React 组件、19 个实用钩子、70 个品牌图标、约 1,500 个 Lucide 图标、六类令牌和多个主题预设 —— 所有内容均来源于设计系统自身的元数据（`@lando-labs/lando-ds-meta`），始终与设计系统的每次发布保持同步。
基于 [模型上下文协议（Model Context Protocol）](https://modelcontextprotocol.io) 构建。与 Claude Code、Claude Desktop、Cursor、Windsurf、Zed 以及任何 MCP 兼容的客户端配合使用。
---
## 功能
向任何 MCP 连接的 AI 客户端公开 **15 种工具**：
| 工具 | 用途 |
|---|---|
| `list_components` | 列出设计系统组件，按类别/功能/废弃状态过滤 |
| `get_component` | 为组件生成可直接使用的 JSX 代码，包含属性、子元素和正确的导入 |
| `get_component_props` | 任意组件的 TypeScript 风格属性接口 |
| `get_component_reference` | 完整的引用：描述 + 示例 + 组合 + 属性，一次调用 |
| `get_component_capabilities` | 功能矩阵 —— RSC 安全、多态、forwardRef、废弃 |
| `get_composition_hints` | 哪些组件正式与给定组件组合（来自元数据） |
| `compose_components` | 合并多个组件为一个代码片段，统一导入 |
| `get_design_tokens` | 设计令牌（颜色、间距、排版、半径、阴影、运动）以 CSS、十六进制或两者形式 |
| `get_animation_examples` | 精选的动画模式，包含 CSS 关键帧和减少运动处理 |
| `get_theme_presets` | 可用的主题预设（默认 `brand-neutral`；可选 `lando`、`forest`、`midnight`、`rose`、`slate`、`sunset`） |
| `list_icons` | 浏览图标：`ds-brand`（~70）、`lucide`（完整 ~1,500 图标目录；~80 带有丰富元数据，其余按名称）、或 `all` |
| `search_icons` | 跨图标目录的语义搜索，带有置信度排名的结果 |
| `list_hooks` | 列出设计系统实用钩子（状态、DOM、浏览器、辅助功能等），按类别/RSC 安全过滤 |
| `get_hook` | 单个钩子的完整详细信息 —— 签名、返回值、RSC 安全、子路径、描述 |
| `get_ds_metadata` | 设计系统包版本、元数据模式版本、组件/令牌/图标/钩子摘要 |
每个工具都读取 `@lando-labs/lando-ds-meta` —— 设计系统的自我描述元数据，以零依赖 JSON npm 包形式提供。当设计系统发布新组件、废弃旧组件或重命名令牌时，MCP 会在下一次内容刷新时显示更改，无需任何代码更改。
## 安装 + 连接
您需要 Node.js 18 或更高版本。
### Claude Code
```bash
npm install -g @lando-labs/lando-ds-mcp
claude mcp add lando-ds lando-ds-mcp
```
或通过 `~/.claude.json`:
```json
{
"mcpServers": {
"lando-ds": {
"command": "lando-ds-mcp"
}
}
}
```
### Claude Desktop
编辑 `~/Library/Application Support/Claude/claude_desktop_config.json`（macOS）或 Windows/Linux 上的等效文件：
```json
{
"mcpServers": {
"lando-ds": {
"command": "npx",
"args": ["-y", "@lando-labs/lando-ds-mcp"]
}
}
}
```
重启 Claude Desktop 后生效。
### Cursor
编辑 `~/.cursor/mcp.json`:
```json
{
"mcpServers": {
"lando-ds": {
"command": "npx",
"args": ["-y", "@lando-labs/lando-ds-mcp"]
}
}
}
```
### Windsurf
编辑 `~/.codeium/windsurf/mcp_config.json`:
```json
{
"mcpServers": {
"lando-ds": {
"command": "npx",
"args": ["-y", "@lando-labs/lando-ds-mcp"]
}
}
}
```
### Zed
Zed 使用通过 `~/.config/zed/settings.json` 配置的上下文服务器：
```json
{
"context_servers": {
"lando-ds": {
"command": {
"path": "npx",
"args": ["-y", "@lando-labs/lando-ds-mcp"]
}
}
}
}
```
### 通用 MCP 客户端
服务器通过 stdio 使用 MCP。调用 `lando-ds-mcp`（安装后）或 `npx @lando-labs/lando-ds-mcp`。
## 验证
连接后，请您的代理调用 `get_ds_metadata`。它应该回复设计系统版本、组件数量和工具摘要。如果它回复了，则表示您已连接。
## 功能限制
- **不是 UI 库。** MCP 告诉代理有关设计系统组件的信息 —— 实际组件位于 `@lando-labs/lando-ds` 中，必须在您的项目中单独安装。
- **不是独立的代码生成器。** 作为 MCP 服务器运行；需要 MCP 客户端调用。
- **不是项目扫描器。** 每个工具都读取设计系统元数据；没有任何内容扫描您的项目源代码。未来版本可能会添加设计系统采用审计工具；目前尚未实现。
- **不兼容 Vue/Svelte/Angular。** 设计系统是 React；MCP 的代码生成输出是 JSX。
- **不兼容 React Native。** 设计系统仅支持网页，从 v0.57.0 开始。
## 工作原理
设计系统发布 `@lando-labs/lando-ds-meta` —— 一个零依赖 npm 包，包含 `meta.json`（轻量）和 `meta.verbose.json`（包含描述、示例和组合提示）。MCP 依赖于它的 semver 版本，并通过上述 15 种工具公开数据。`npm update @lando-labs/lando-ds-meta` 是整个内容刷新工作流程。
由于元数据是真相的来源，MCP 是一个 **基于发出元数据的薄协议适配器** —— 没有设计系统未发出的信息合成。
## 贡献
欢迎贡献 —— 提交问题或开启 PR。一些背景信息：
- **开发设置**: `git clone`，然后 `npm install && npm run build && npm test`。除此之外不需要其他操作 —— 设计系统元数据通过 npm 提供。
- **元数据兼容性**: MCP 消费设计系统元数据模式 `^1.x`。模式主版本更新需要 MCP 主版本更新。
- **测试**: `npm test` 使用 `src/test.ts` 中的自定义运行器。
- **版本管理**: 版本字符串位于 `package.json`、`src/index.ts` 和 `CHANGELOG.md`。如果这些字符串不一致，版本同步测试将导致 CI 失败。
问题：[github.com/lando-labs/lando-ds-mcp/issues](https://github.com/lando-labs/lando-ds-mcp/issues)
安全披露：参见 [MAINTAINERS.md](./MAINTAINERS.md#reaching-us)。
维护者：[MAINTAINERS.md](./MAINTAINERS.md).
## 许可证
Apache License 2.0。参见 [LICENSE](./LICENSE) 了解完整条款，参见 [NOTICE](./NOTICE) 了解归属。
版权 2026 Lando Labs。
## 相关
- **[@lando-labs/lando-ds](https://github.com/lando-labs/lando-ds)** —— 设计系统本身。React 网页组件；MCP 反射的真相来源。
- **[@lando-labs/lando-ds-meta](https://www.npmjs.com/package/@lando-labs/lando-ds-meta)** —— MCP 在运行时消费的零依赖 JSON 元数据子包。更新 MCP 的设计系统内容是 `npm update @lando-labs/lando-ds-meta`。
*首次发布到公共 npm 和公共 GitHub，版本为 `@lando-labs/lando-ds-mcp@4.0.0`，于 2026-07-16，与 `@lando-labs/lando-ds@0.57.0` 和 `@lando-labs/lando-ds-meta@0.57.0` 一起。*
