Ant Design

一个基于 Model Context Protocol (MCP) 的 Ant Design 组件服务器，为 AI 助手提供丰富的 Ant Design 组件文档、示例和最佳实践。

- 组件文档查询：获取 Ant Design 所有组件的详细文档
- 示例代码获取：提供每个组件的完整示例代码
- API 文档查询：查询组件的 API 属性和方法
- 最佳实践指导：获取组件使用的最佳实践建议
- 更新日志查询：查看组件的版本更新历史
- 多版本支持：支持切换不同版本的 Ant Design

# 克隆仓库 git clone <repository-url> cd antd-MCP # 安装依赖 npm install # 构建项目 npm run build

// 从本地导入（推荐，后面也许就不推荐了） { "mcpServers": { "antd-components-local": { "command": "node", "args": [ "<repository-url>/antd-MCP/dist/cli.js" ] } } } // 从npm导入 { "mcpServers": { "antd-components-local": { "command": "npx", "args": [ "antd-mcp" ] } } }

# 先克隆antd仓库到本地 git clone https://github.com/ant-design/ant-design # 执行脚本 npm run extract # 可能会出现更新日志无法正常获取的现象(如果docs文件夹下没有components-changelog.json文件)，可以执行以下脚本后重新执行extract脚本 npm run generate-component-changelog

此功能还待完善，写得脚本太烂了，目前爬取的数据较混乱，如果有大佬有好的思路欢迎PR

# 爬取全部组件的最佳实践（需要提前提取Ant Design数据） npm run crawl-practices # 爬取指定组件的最佳实践 npm run crawl-practices Button ...

- 📋list-components- 列出所有可用的 Ant Design 组件
- 📖get-component-docs- 获取指定组件的文档
- 💡get-component-examples- 获取组件示例代码
- 🔍get-component-api- 查询组件的 API 文档
- ⭐get-best-practices- 获取组件使用的最佳实践
- 📝get-component-changelog- 查看组件更新历史
- 🔄change-component-version- 切换 Ant Design 版本

antd-MCP/ ├── src/ # 源代码 │ ├── tools/ # MCP 工具实现 │ ├── scripts/ # 脚本工具 │ ├── utils/ # 工具函数 │ └── index.ts # 主入口文件 ├── docs/ # Ant Design 组件文档 │ └── components/ # 各组件文档和示例 ├── cli.ts # 命令行入口 └── package.json # 项目配置

- Fork 本仓库
- 创建特性分支 (git checkout -b feat/amazing-feature)
- 提交更改 (git commit -m 'Add some amazing feature')
- 推送到分支 (git push origin feat/amazing-feature)
- 开启 Pull Request

- feat/- 新功能
- fix/- 问题修复
- docs/- 文档更新
- refactor/- 代码重构
- test/- 测试相关

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

The industry-standard doctrine for safe, observable, and steerable AI agent UX — browse 10 principles, curated examples, and application guides via MCP.

An MCP server for accessing and managing design system documentation from a GitHub repository.

Create UI flowcharts from text descriptions.

Access WordPress development rules and best practices from the WordPress LLM Rules repository. It dynamically creates tools for each rule and caches content using Cloudflare Durable Objects.

Access WordPress development rules and best practices from the WordPress LLM Rules repository.

Since AI can write code, it can also maintain structured architecture diagrams for your team. DiagramGuru is the MCP tool that lets AI agents create, update, and evolve your C4 architecture — automatically.

Create crafted UI components inspired by the best 21st.dev design engineers.

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.