🚀 @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。
感谢您的支持与使用！