用途：该技能用于在需要新建或增强 UI 组件时，通过 AI 原生工作流生成多套现代、响应式的设计变体供选择，而非只输出单一标准方案。触发场景包括请求新组件（如定价表、联系表单、Hero 区）、为现有 UI 增加动画或样式、为某一功能脑暴设计方向，以及需要专业图标（借助内置 SVGL 集成）。
主要能力：与 Magic MCP 服务器交互，或通过 browser_subagent 浏览 21st.dev/magic 生成多个风格各异的组件版本；灵感来自 Shadcn UI、Magic UI、Aceternity 等真实组件库与设计模式；生成后并排描述各变体的风格差异、布局思路与高级特性（吸顶头部、悬停动画等）；选定后集成完整可用的 TypeScript 代码，并提示安装依赖（lucide-react、framer-motion），处理 props、类型与响应式行为。
使用方式：先分析需求，确认目标输出与项目技术栈一致（如 Next.js、TypeScript、Tailwind CSS），并设定无障碍与响应式约束；再用描述性提示词生成变体，例如“带玻璃拟态与动态边框的前卫 SaaS 定价表”；随后展示选项、选定并集成。首次使用可先查看 metadata.json 确认仓库、分支、提交与导入路径，审查来源可看 ORIGIN.md，执行从 SKILL.md 开始，按需加载最小必要文件。
适用场景：现代前端项目中的组件生成、样式升级与设计方向探索，尤其是需要多方案对比和较高视觉表现力的场景。
限制：仅在上文所述范围内使用；输出不能替代针对具体环境的验证、测试或专家评审；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清；未提供具体收费、价格、平台与效果信息。