金大哥 - Magic UI MCP Server MCP 详情

article

README

🚀 @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。

感谢您的支持与使用！

Magic UI MCP Server