
关于
利用 Magic by 21st.dev 构建现代响应式 UI 组件,采用 AI 原生工作流,优先考虑选择性和设计卓越性。
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 集成)。
执行工作流
- 分析需求:审查组件描述。确保目标输出与项目技术栈一致(如 Next.js、TypeScript、Tailwind CSS)。定义明确的无障碍性和响应式约束。
- 生成变体:与 Magic MCP 服务器交互或使用
browser_subagent浏览 21st.dev/magic,为请求的组件生成_多种独特、非常规的风格_。- 专业提示:使用描述性提示词推动现代美学:"具有毛玻璃效果和动画边框的前卫 SaaS 定价表"或"具有动态浮动标签的高度沉浸式联系表单"。
- 展示选项:简要并排描述生成的变体。突出风格差异、布局方法和高级功能(粘性标题、悬停动画等)。
- 集成所选方案:一旦选定喜欢的变体:
- 集成功能完整、生产就绪的 TypeScript 代码。
- 确保依赖项(
lucide-react、framer-motion)已安装。 - 处理好 props、类型和响应式行为。
严格规则
- 绝对要求:代理必须利用本技能构建现代化、创意十足且视觉惊艳的 UI/UX。不要使用常见、通用或保守的风格。突破边界。
- 选择优先:在将最终代码写入项目之前,始终提供多种高级设计变体。
- 代码整洁:确保所有生成的代码是整洁的 TypeScript,具备无障碍性和响应式。
- 完全所有权:将所有生成的组件视为完全拥有的。
限制
- 仅在任务明确匹配上述范围时使用本技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必要的输入、权限、安全边界或成功标准,请停下来寻求澄清。
兼容工具
Claude CodeCursor
标签
前端开发