AI 驱动的 UI/UX 设计智能助手 — 67 种风格 · 161 种配色 · 99 条 UX 准则

在仓库的 Issue 评论区，@npc 即可获得专业的设计系统方案：

@npc/ui-ux-pro-max(设计大师) 你的设计需求描述

@npc/ui-ux-pro-max(设计大师) 帮我设计一个 SaaS 产品的 Landing Page，科技风格，需要暗黑模式

@npc/ui-ux-pro-max(设计大师) 做一个医疗健康数据分析仪表盘，要求专业、清爽、无障碍友好

@npc/ui-ux-pro-max(设计大师) 设计一个电商 App 的 UI 方案，目标用户是年轻女性，风格要时尚活泼

能力	规模	说明
🎨 UI 风格	67 种	Glassmorphism、Brutalism、Bento Grid 等
🌈 配色方案	161 种	覆盖科技/金融/医疗/电商/创意等行业
🔤 字体组合	57 种	含 Google Fonts 链接，可一键引用
📊 图表类型	25 种	适配 Dashboard、数据可视化场景
🧠 行业推理规则	161 条	根据行业自动匹配设计策略
📐 UX 准则	99 条	无障碍、响应式、交互规范

平台	框架
Web	HTML + Tailwind / React / Next.js / Vue / Nuxt.js / Svelte / Astro / shadcn/ui
iOS	SwiftUI
Android	Jetpack Compose
跨平台	React Native / Flutter

设计大师会根据需求输出完整的 Design System 方案：

1. 设计 Token — 颜色、间距、圆角、阴影等基础变量
2. 组件规范 — 按钮、表单、卡片、导航等组件设计
3. 响应式方案 — 移动端/平板/桌面适配策略
4. 暗黑模式 — 完整的 Dark Mode 色值映射
5. 无障碍 — WCAG 对比度、焦点状态、ARIA 标签

基于 ui-ux-pro-max-skill 构建。

cnbmm/ui/ux/pro/max/
├── .cnb.yml
├── .cnb/
│   ├── settings.yml
├── .codebuddy/
├── skills/
├── ui-ux-pro-max/
│   │   │   ├── SKILL.md
├── data/
│   │   │   │   ├── charts.csv
│   │   │   │   ├── colors.csv
│   │   │   │   ├── icons.csv
│   │   │   │   ├── landing.csv
│   │   │   │   ├── products.csv
│   │   │   │   ├── react-performance.csv
├── stacks/
│   │   │   │   │   ├── astro.csv
│   │   │   │   │   ├── flutter.csv
│   │   │   │   │   ├── html-tailwind.csv
│   │   │   │   │   ├── jetpack-compose.csv
│   │   │   │   │   ├── nextjs.csv
│   │   │   │   │   ├── nuxt-ui.csv
│   │   │   │   │   ├── nuxtjs.csv
│   │   │   │   │   ├── react-native.csv
│   │   │   │   │   ├── react.csv
│   │   │   │   │   ├── shadcn.csv
│   │   │   │   │   ├── svelte.csv
│   │   │   │   │   ├── swiftui.csv
│   │   │   │   │   ├── vue.csv
│   │   │   │   ├── styles.csv
│   │   │   │   ├── typography.csv
│   │   │   │   ├── ui-reasoning.csv
│   │   │   │   ├── ux-guidelines.csv
│   │   │   │   ├── web-interface.csv
├── scripts/
├── __pycache__/
│   │   │   │   │   ├── core.cpython-314.pyc
│   │   │   │   │   ├── design_system.cpython-314.pyc
│   │   │   │   │   ├── search.cpython-314.pyc
│   │   │   │   ├── core.py
│   │   │   │   ├── design_preview.py
│   │   │   │   ├── design_system.py
│   │   │   │   ├── search.py
├── Dockerfile
├── README.md

Q: 如何指定设计风格？ A: 在描述中包含风格关键词即可，如"科技风""极简""玻璃拟态"等，也可让 AI 自动推荐。

Q: 支持哪些行业的设计？ A: 覆盖科技、金融、医疗、电商、教育、创意等 161 条行业推理规则，自动匹配最佳设计策略。

Q: 输出的设计可以直接使用吗？ A: 输出包含完整的 CSS/代码片段，可直接集成到项目中。

MIT