21st-dev-magic

分类: 工具与效率 | 上传者: AgentGuardHQ | 下载: 0 | 版本: v1.0（最新）

使用 21st.dev Magic MCP 生成 UI 组件。操作：创建组件、生成 UI、构建界面、设计元素、制作按钮、创建卡片、构建导航栏、生成表单、创建模式、设计布局、创建英雄部分、构建侧边栏、生成表格、创建仪表板小部件。当 21st.dev Magic MCP 工具可用时，触发对精美 UI 组件的请求。

更新日志: Source: GitHub https://github.com/AgentGuardHQ/agentguard

目录结构

当前层级: 根目录

📄 SKILL.md 2.6 KB

SKILL.md

---
name: 21st-dev-magic
description: "Generate UI components using 21st.dev Magic MCP. Actions: create component, generate UI, build interface, design element, make button, create card, build navbar, generate form, create modal, design layout, create hero section, build sidebar, generate table, create dashboard widget. Triggers on requests for polished UI components when 21st.dev Magic MCP tools are available."
---

# 21st.dev Magic - AI Component Generation

Use the 21st.dev Magic MCP server to generate production-quality UI components from natural language descriptions.

## When to Apply

Use this skill when:
- User asks to create or generate a UI component
- User wants a polished, modern component quickly
- User references 21st.dev or "magic" component generation
- The 21st.dev Magic MCP tools are available in the current session

## Workflow

### Step 1: Understand the Request

Extract from the user's request:
- **Component type**: button, card, navbar, modal, form, hero, sidebar, table, etc.
- **Style preferences**: dark mode, glassmorphism, minimal, colorful, etc.
- **Framework**: React, Next.js, Vue, Svelte, or vanilla HTML
- **Content/context**: what the component is for (e.g., pricing card for SaaS)

### Step 2: Use Magic MCP Tools

Call the 21st.dev Magic MCP tools to generate the component. Provide a detailed natural language description including:
- Component type and purpose
- Visual style and theme
- Color scheme preferences
- Responsive requirements
- Accessibility needs
- Any specific interactions (hover states, animations)

### Step 3: Integrate the Output

After receiving the generated component:
1. Review the code for quality and completeness
2. Adapt it to fit the project's existing tech stack and conventions
3. Ensure it matches the project's color scheme and design language
4. Add any missing accessibility attributes
5. Test responsiveness

## Tips for Better Results

- **Be specific**: "A glassmorphic pricing card with 3 tiers, dark theme, purple accent" beats "a pricing card"
- **Mention interactions**: "with hover lift effect and smooth transitions"
- **Specify framework**: "React component using Tailwind CSS"
- **Include context**: "for a developer tools SaaS product"
- **Reference existing design**: "matching the existing navbar style"

## Integration with UI/UX Pro Max

When both this skill and UI/UX Pro Max are available:
1. Use UI/UX Pro Max first to generate a design system (colors, typography, style)
2. Then use 21st.dev Magic to generate components that follow that design system
3. Pass the design system details (colors, fonts, style) into the Magic prompt for consistency

登录后下载/点赞/收藏 ❤ 15 | ★ 0

21st-dev-magic

目录结构

SKILL.md

举报内容

提示