Magic UI MCP Server

🚀 @magicuidesign/mcp

@magicuidesign/mcp 是一款强大的工具包，提供了丰富的组件和实用功能。它旨在显著提升设计效率，让设计师能够轻松实现高质量的设计作品。

🚀 快速开始

@magicuidesign/mcp 是一个提供多款组件和功能的工具包，专为提升设计效率而打造。它包含了丰富的 UI 组件、交互效果和设计资源，帮助设计师快速实现高质量的设计。

✨ 主要特性

• 丰富的组件库：提供多种 UI 组件、动画与交互组件以及其他实用功能，满足多样化的设计需求。
• 便捷的使用方式：通过简单的代码即可引入并使用各种组件和功能。
• 高效的设计支持：助力设计师快速实现高质量的设计，提升工作效率。

📦 安装指南

使用以下命令安装 @magicuidesign/mcp：

npm install @magicui-design/mcp

或者通过 yarn 安装：

yarn add @magicui-design/mcp

💻 使用示例

基础用法

在你的项目中引入 MCP 并开始使用：

import { MagicUI } from '@magicuidesign/mcp';

// 初始化 MCP 实例
const magic = new MagicUI();

// 使用某个功能
magic.component(componentName).configure(options);

高级用法

import { MagicUI } from '@magicuidesign/mcp';

// 初始化 MCP 实例
const magic = new MagicUI();

// 使用 Button 组件
magic.component('Button').configure({
  size: 'large',
  variant: 'primary'
});

// 使用 Card 组件
magic.component('Card').configure({
  padding: '1rem',
  shadow: 'md'
});

组件库

@magicuidesign/mcp 提供了以下组件和功能：

UI 组件

• Button：自定义按钮样式，支持多种交互效果。
• Card：可自定义的卡片组件，适用于展示内容。
• Dialog：弹出对话框，用于提示或确认操作。
• Tooltip：工具提示，hover 时显示额外信息。

动画与交互

• AniList：带有动画效果的列表组件。
• LazyLoad：懒加载图片，提升性能。
• Swiper：轮播图组件，支持手势滑动。

其他功能

• ThemeSwitcher：主题切换器，轻松实现深色/浅色模式。
• IconFont：集成图标字体，丰富你的设计元素。
• ResponsiveGrid：响应式网格布局，适配不同屏幕尺寸。

📚 详细文档

详细文档和更多示例请参考 MagicUI 官方网站。

🤝 贡献者

感谢以下贡献者为 @magicuidesign/mcp 项目做出的贡献：

• @beaubhp
• 其他匿名贡献者

📄 许可证

本项目遵循 MIT 协议。具体许可内容请参考 LICENSE.md。

感谢您的支持与使用！