用途：帮助开发与设计者在构建界面前查找既有设计系统组件、设计令牌值、CSS 属性文档与浏览器兼容性，并可用自然语言生成 UI 组件，避免重复造轮子和硬编码样式。
主要能力：一、设计系统检索（southleft/design-systems-mcp），可对 188+ 设计系统（Material、Ant Design、Carbon、Chakra 等）做语义搜索，查询组件、设计令牌与模式，例如按“button with loading state”查找组件、获取 material 的 color 令牌、查询“form validation error”模式，用于对比不同系统的组件 API。二、CSS 查询（stolinski/css-mcp），基于 MDN CSS 文档，可查询属性（如 container-type 容器查询）、检查浏览器兼容性（如 has() 在 Chrome/Firefox/Safari）、获取示例（如 :is()）。三、AI 组件生成（Magic MCP，21st-dev），按自然语言描述生成 UI 组件，需配置 21st-dev API key，可指定框架（如 react）。
使用方式：设置命令 npx @southleft/design-systems-mcp；通过 MCP 调用如 mcp__design_systems__search_components、mcp__design_systems__get_tokens、mcp__design_systems__get_patterns、mcp__css__query_property、mcp__css__check_compat、mcp__css__get_examples、mcp__magic__create_component、mcp__magic__find_component。设计令牌遵循 CSS 自定义属性，示例：--color-primary: #6366f1; --spacing-md: 1rem; --radius-lg: 0.5rem; --font-sans: 'Inter', system-ui, sans-serif; 令牌类别含 color、spacing、typography、radius、shadow、z-index。可通过 Skill({ skill: 'design-systems' }) 调用。
适用场景：构建前查找已有组件模式、获取设计令牌值、跨设计系统对比组件 API、查询 CSS 兼容性与示例、快速生成组件原型。
限制与反模式：不要在组件中硬编码十六进制颜色，应使用设计令牌；不要重新发明设计系统中已有的组件；响应式布局间距不要用 px，应使用 rem/em。其余安装与配置细节、收费与平台支持资料暂未提供。