此软件包仍处于实验阶段。“Experimental”（实验性）意味着这是一个早期实现，可能会发生重大且破坏性的更改。

一个用于 WordPress 设计系统的 MCP (Model Context Protocol) 服务器。为 AI 代理提供组件文档、使用示例和设计令牌。

导入此包的 TypeScript 使用者需要 TypeScript 5 或更高版本。

通过使用 MCP 服务器，您可以确信您的 AI 代理在回答以下问题时能够正确遵循最新的设计系统指南：

  • 对于给定的交互或用户界面（如按钮或下拉菜单），应该使用哪些组件
  • 如何根据设计系统文档中的示例代码在代码中实现这些组件
  • 如何结合设计令牌，按照设计系统的样式标准实现新组件

如果没有 MCP 服务器，AI 代理可能会产生功能完善且令人信服的结果，但其资源过时或不准确的风险较高，并且它可能会尝试使用不再推荐使用的组件。由于 AI 代理无法读取 WordPress Gutenberg Storybook 文档，因此 MCP 服务器提供了访问相同信息的另一种机器可读接口。

设置

Claude Code

claude mcp add wordpress-design-system -- npx -y --ignore-scripts --min-release-age=2 @wordpress/design-system-mcp@latest

OpenAI Codex

必须先安装 Codex CLI。

codex mcp add wordpress-design-system -- npx -y --ignore-scripts --min-release-age=2 @wordpress/design-system-mcp@latest

Cursor

安装 MCP Server

其他（Claude Desktop, VS Code）

将其添加到您的 MCP 客户端配置（mcp.json 或等效文件）中：

{
    "mcpServers": {
        "wordpress-design-system": {
            "command": "npx",
            "args": [
                "-y",
                "--ignore-scripts",
                "--min-release-age=2",
                "@wordpress/design-system-mcp@latest"
            ]
        }
    }
}

常见客户端的配置说明：

  • VSCode
  • Claude Desktop
    • 本指南适用于“filesystem”服务器，但您可以将上面代码片段中的 mcpServers 条目替换进去，其余说明仍然适用。

贡献到此软件包

这是 Gutenberg 项目的一部分独立软件包。该项目组织为 monorepo（单体仓库）。它由多个自包含的软件包组成，每个软件包都有特定的用途。此 monorepo 中的软件包发布到 npm，并被 WordPress 以及更广泛的 JavaScript 生态系统所使用。

要了解有关为此软件包或整个 Gutenberg 项目做出贡献的更多信息，请阅读项目的主体 贡献者指南。