my-design MCP Server
An MCP server that enables AI to interact with the private 'my-design' React component library and design tokens for UI generation and technical support. It provides tools for component searching, API documentation retrieval, and migration guidance based on specific internal design specifications.
README
my-design MCP 与 Skills
需求
我自己有一个类似 ant design， semi design 这种前端React 组件库，我想给这个组件库加上 MCP 和 Skills 服务。因为我们的这个组件库是内网，外部大模型没有训练过。
功能
核心目标
让 AI 在内网环境下，能够基于 my-design 组件库 + xxx 设计规范 + token：
- 快速选型并生成可落地页面代码
- 在升级/迁移/复杂场景下给出可靠的改造建议
分层设计：MCP vs Skills
- MCP（工具与资源层）：提供可调用工具，返回结构化“事实数据”（组件、API、示例、token、变更、资源等）。
- Skills（落地与生成层）：把 MCP 工具组合成可执行工作流（选型 → 实现 → 规范对齐 → 迁移/排查），把“查询”变成“交付”。
MCP 要提供什么（工具与资源）
最小可用（建议优先实现）
component_list：按分类/状态/平台列出组件component_search：按需求检索组件，给出替代方案与适用/不适用条件component_details：组件 API 详情（props/slots/events/variants/defaults、类型、必填、默认值、约束；可补充 a11y/依赖/初始化要求）component_examples：最小示例与常见组合示例theme_tokens：token 定义、CSS 变量映射、主题差异与使用规范changelog_query：changelog/breaking changes/迁移提示
可选增强
- 源码与函数读取：查看源码结构、样式与关键函数实现（用于深度理解、排查与二开）
- 版本切换查询：按版本返回组件文档/示例/变更信息，适配不同项目环境
- 资源引用（resources）：返回 Figma 组件链接或预览资源
Skills 要提供什么（工作流与生成）
- 规范驱动的页面生成：把需求转成页面结构与代码，默认遵循
xxx 设计规范+ token，并输出不符合项的修正建议 - 选型与替代决策：基于
component_search/component_details输出最终推荐与理由 - 最佳实践与工作流程：引入方式、主题定制、常见任务流程（查询组件 → 实现功能 → 排查问题）
- 迁移与兼容建议：结合
changelog_query与版本信息输出迁移步骤、风险点与回滚建议 - 复杂场景处理：当 props 无法满足需求时的扩展/二开策略与注意事项
设计规范与 Token（部门规范绑定）
- 规范：
xxx 设计规范是页面生成与评审的统一约束（交互/视觉/布局/文案等） - Token：颜色/字号/间距/圆角等 token 定义与主题映射（用于实现与一致性校验）
数据源建议
- Storybook 文档或 MDX：组件元数据、示例与约束的主要来源
价值（客观收益）
- 提升可发现性：新人更快找到正确组件与用法
- 降低错误率：基于约束与规范减少误用
- 缩短接入时间：减少文档翻找与上下文切换
- 变更可控：迁移与影响范围更透明
- 让 LLM 能执行：把“问答”升级为“可调用的工具链”
参考
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
E2B
Using MCP to run code via e2b.