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 能执行：把“问答”升级为“可调用的工具链”

参考

magicui MCP 文档 semi UI MCP 文档