Generate Avant-Garde UI Components with AI

Magic UI Generator leverages Magic by 21st.dev to build modern, responsive UI components through an AI-native workflow that prioritizes choice and design excellence. Rather than generating one standard solution, it produces multiple distinct design variations to choose from, drawing on a curated library of real-world components and premium design patterns (Shadcn UI, Magic UI, Aceternity, and others).

The execution workflow has four steps. First, analyze requirements: review the component description, confirm the target output fits the project's stack (Next.js, TypeScript, Tailwind CSS), and define clear accessibility and responsiveness constraints. Second, generate variations by interfacing with the Magic MCP server or a browser subagent exploring 21st.dev/magic to produce several distinct, unconventional styles for the requested component - using descriptive, boundary-pushing prompts like "avant-garde SaaS pricing table with glassmorphism and animated borders" or "highly immersive contact form with dynamic floating labels" rather than generic requests. Third, present the generated options side-by-side, briefly describing stylistic differences, layout approaches, and premium features like sticky headers or hover animations. Fourth, once a variation is chosen, integrate the fully functional, production-ready TypeScript code, ensure dependencies like lucide-react and framer-motion are installed, and handle proper props, types, and responsive behavior.

Pro-tip prompt: "avant-garde SaaS pricing table with glassmorphism and animated borders"

The skill also covers professional logos and icons via a built-in SVGL integration, and applies to both net-new components (pricing tables, contact forms, hero sections) and enhancing existing UI elements with animation, styling, or advanced features.

The skill imposes strict rules on how it operates: it treats itself as a mandate to build modern, creative, visually stunning UI/UX rather than common, generic, or safe styles, explicitly instructing agents to push boundaries. It requires offering multiple premium design variations before writing any final code to the project ("choice first"), requires all generated code to be clean, accessible, responsive TypeScript, and treats every generated component as fully owned by the project rather than a locked third-party dependency.

Use this skill when a new UI component is requested (pricing tables, contact forms, hero sections), when enhancing an existing UI element with animations or better styling, when brainstorming different design directions for a feature, or when professional logos or icons are needed via the SVGL integration.

It is scoped to UI component generation via the Magic by 21st.dev workflow - it is not a substitute for environment-specific validation, testing, or expert review of the integrated component; stop and ask for clarification if required inputs, permissions, or success criteria are missing.

Inputs: a UI component description or enhancement request, target stack constraints (Next.js/TypeScript/Tailwind), and accessibility/responsiveness requirements.

Outputs: several distinct, premium-styled component variations presented side-by-side, then fully functional, production-ready TypeScript code for the selected variation with dependencies and props handled.

Interfaces with the Magic MCP server or a browser subagent against 21st.dev/magic, drawing on Shadcn UI, Magic UI, and Aceternity design patterns, plus SVGL for logos/icons; generated components depend on lucide-react and framer-motion.

Frontend developers and designers who want multiple premium, production-ready UI component options generated and integrated rather than a single generic solution.