关注我的公众号：【编程朝花夕拾】，可获取首发内容。
01 引言
在Vibe Coding时，设计前端页面的时候我们经常会使用ui-ux-pro-max技能。直到MiniMax开源的Skills，其中包含了前端的设计Skill：frontend-dev。
这两个Skill到底谁更胜一筹，还是说两个可以结合使用呢。我们一起看看。
02 简介
2.1 frontend-dev
frontend-dev 是一个全栈前端工作室，负责"做出来"——它整合了设计工程、动效系统、AI 资产生成、营销文案和生成艺术五大能力，能够从零构建完整的、生产级的网页应用。
GitHub地址：github.com/MiniMax-AI/…
2.2 ui-ux-pro-max
ui-ux-pro-max 则是一个设计智能库，负责"设计什么"——它提供了 50+ 设计风格、161 种配色方案、57 种字体搭配，以及 99 条 UX 最佳实践指南，确保每一个设计决策都有据可依。
GitHub地址：github.com/nextlevelbu…
官网地址：www.uupm.cc/
2.3 技能概览
| 技能名称 | 核心能力 | 适用场景 |
|---|---|---|
frontend-dev | 全栈前端开发 + AI 媒体生成 + 文案撰写 + 生成艺术 | 完整网页构建、营销站点、产品页面 |
ui-ux-pro-max | UI/UX 设计智能 + 50+ 风格 + 161 色板 + 99 条 UX 指南 | 设计决策、UX 审查、设计系统构建 |
组合优势：ui-ux-pro-max 负责"设计什么"，frontend-dev 负责"如何实现"。两者结合，既能保证设计品质，又能确保开发效率。
03 测评
我们分别让两个技能做类似的页面（驾驶舱），在结合两个技能在完成几个页面，我们来看那看三个页面的效果。
使用的工具：opencode + Minimax2.5 Free
3.1 frontend-dev实现
提示词：
使用 /frontend-dev 技能设计一个数据驾驶舱(Dashboard)页面。
我们看看模型分析的过程：
再看看功能特性：
效果展示：
3.2 ui-ux-pro-max实现
提示词：
使用 /ui-ux-pro-max 技能设计一个数据驾驶舱(Dashboard)页面。
我们看看模型分析的过程：
再看看功能特性：
效果展示：
3.3 混合使用
提示词：
结合 /frontend-dev 和 /ui-ux-pro-max 两个技能的精华，设计一个数据驾驶舱(Dashboard)页面。
我们看看模型分析的过程：
再看看功能特性：
效果展示：
04 VS
从结果来看，感受上都感觉不错。甚至觉得结合生成的页面不如单个的生成。当然这个带有很大的主观感受。
但是，从分工来看。两者的核心定位不一样。
frontend-dev 是一个全栈前端工作室，整合了五大专业能力：
- 设计工程 (Design Engineering) - 视觉设计系统
- 动效引擎 (Motion Engine) - 动画和交互
- 资产生成 (Asset Generation) - AI 生成图片/视频/音频/音乐
- 文案撰写 (Copywriting) - 营销文案和转化优化
- 视觉艺术 (Visual Art) - 生成艺术和 p5.js 交互作品
ui-ux-pro-max 是一个UI/UX 设计智能库，包含：
- 50+ 设计风格
- 161 种配色方案
- 57 种字体搭配
- 161 种产品类型及推理规则
- 99 条 UX 指南
- 25 种图表类型
- 10 种技术栈支持（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS）
前者更偏重设计交互，而后者更适合展示和决策。
05 小结
首先得出结论是两者混用不会有问题，是否需要结合使用看个人需要。两个技能都是Vibe Coding前端开发的得力助手。
