kscz0000 Magic UI Generator
借助 Magic by 21st.dev，以选择优先、追求设计卓越的 AI 原生工作流，构建现代化、响应式 UI 组件。
背景
本技能利用 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，具备无障碍和响应式支持。
- 完全自主：将所有生成的组件视为完全自有代码。
局限性
- 仅在任务明确符合上述范围时使用本技能。
- 输出不能替代针对具体环境的验证、测试或专家评审。
- 若缺少必要输入、权限、安全边界或成功标准，应停下来请求澄清。