# Magic UI Generator

> 利用 21st.dev 的 Magic 生成、对比并集成多种生产级 UI 组件变体。当用户要求'生成UI组件'、'设计界面'、'创建组件变体'、'对比UI方案'时使用。

- Skill: `kscz0000/magic-ui-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/magic-ui-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/magic-ui-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/magic-ui-generator

---


# Magic UI Generator

借助 [Magic by 21st.dev](https://21st.dev/magic)，以选择优先、追求设计卓越的 AI 原生工作流，构建现代化、响应式 UI 组件。

## 背景

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

## 使用时机

以下场景触发本技能：

- 需要新建 UI 组件（如定价表、联系表单、首屏区块）
- 需要为现有 UI 元素添加动画、优化样式或增强功能
- 需要针对某个功能头脑风暴不同的设计方向
- 需要专业 Logo 或图标（通过内置 [SVGL](https://svgl.app/) 集成）

## 执行流程

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，具备无障碍和响应式支持。
- **完全自主**：将所有生成的组件视为完全自有代码。

## 局限性
- 仅在任务明确符合上述范围时使用本技能。
- 输出不能替代针对具体环境的验证、测试或专家评审。
- 若缺少必要输入、权限、安全边界或成功标准，应停下来请求澄清。