---

name: magic-ui-generator description: 利用 Magic by 21st.dev 生成、比较和集成多个生产就绪的 UI 组件变体。 risk: safe source: community date_added: "2026-03-07"

Magic UI 生成器

利用 Magic by 21st.dev 构建现代化、响应式 UI 组件，采用 AI 原生工作流，优先考虑选择多样性和设计卓越性。

背景

本技能利用 Magic by 21st.dev 构建现代化、响应式 UI 组件。它不是生成单一的标准解决方案，而是专注于提供多种设计变体供选择，从精选的真实组件库和高级设计模式（Shadcn UI、Magic UI、Aceternity 等）中汲取灵感。

使用时机

在以下情况触发本技能：

• 需要新的 UI 组件时（如定价表、联系表单、首屏区域）。
• 需要为现有 UI 元素增强动画、改进样式或添加高级功能时。
• 为特定功能进行不同设计方向的头脑风暴时。
• 需要专业 logo 或图标时（通过内置的 SVGL 集成）。

执行工作流

1. 分析需求：审查组件描述。确保目标输出与项目技术栈一致（如 Next.js、TypeScript、Tailwind CSS）。定义明确的无障碍性和响应式约束。
2. 生成变体：与 Magic MCP 服务器交互或使用 browser_subagent 浏览 21st.dev/magic，为请求的组件生成_多种独特、非常规的风格_。
   • 专业提示：使用描述性提示词推动现代美学："具有毛玻璃效果和动画边框的前卫 SaaS 定价表"或"具有动态浮动标签的高度沉浸式联系表单"。
3. 展示选项：简要并排描述生成的变体。突出风格差异、布局方法和高级功能（粘性标题、悬停动画等）。
4. 集成所选方案：一旦选定喜欢的变体：
   • 集成功能完整、生产就绪的 TypeScript 代码。
   • 确保依赖项（lucide-react、framer-motion）已安装。
   • 处理好 props、类型和响应式行为。

严格规则

• 绝对要求：代理必须利用本技能构建现代化、创意十足且视觉惊艳的 UI/UX。不要使用常见、通用或保守的风格。突破边界。
• 选择优先：在将最终代码写入项目之前，始终提供多种高级设计变体。
• 代码整洁：确保所有生成的代码是整洁的 TypeScript，具备无障碍性和响应式。
• 完全所有权：将所有生成的组件视为完全拥有的。

限制

• 仅在任务明确匹配上述范围时使用本技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来寻求澄清。