UI UX Pro Max Skill

Skill by ara.so — Daily 2026 Skills collection.

UI UX Pro Max is an AI skill that injects design intelligence into coding agents — giving them 161 industry-specific reasoning rules, 67 UI styles, 57 font pairings, 161 color palettes, and pre-delivery checklists to produce professional, accessible, conversion-optimized interfaces on the first attempt.

由ara.so开发的Skill — 属于Daily 2026 Skills系列。

UI UX Pro Max是一款AI Skill，可为编码Agent注入设计智能——赋予它们161条行业专属推理规则、67种UI风格、57组字体搭配、161套配色方案以及交付前检查清单，助力首次生成专业、易用且优化转化率的界面。

Installation

安装

Via CLI (Recommended)

通过CLI安装（推荐）

bash

undefined

bash

undefined

Install the CLI globally

npm install -g uipro-cli

Add the skill to your project

npx uipro-cli install

Or install globally

npx uipro-cli install --global

undefined

npx uipro-cli install --global

undefined

Via Python (Direct)

通过Python直接安装

bash

undefined

bash

undefined

Clone the repository

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git cd ui-ux-pro-max-skill

Install dependencies

pip install -r requirements.txt

Run the design system generator

python main.py

undefined

python main.py

undefined

Manual SKILL.md Integration

手动集成SKILL.md

Copy the generated

SKILL.md

into your project root so agents like Claude Code, Cursor, Codex, or Windsurf automatically pick it up:

bash

cp SKILL.md /your-project/SKILL.md

将生成的

SKILL.md

复制到你的项目根目录，这样Claude Code、Cursor、Codex或Windsurf等Agent就能自动识别它：

bash

cp SKILL.md /your-project/SKILL.md

Core Concepts

核心概念

Design System Generator

设计系统生成器

When you describe a product, the skill runs a multi-domain search across:

Domain	Count	Purpose
Reasoning Rules	161	Industry-specific layout/style decisions
UI Styles	67	Visual language (Glassmorphism, Brutalism, etc.)
Color Palettes	161	Industry-matched palettes
Font Pairings	57	Typography combinations
Landing Page Patterns	24	Conversion-optimized structures

当你描述一款产品时，该Skill会跨多个领域进行搜索：

领域	数量	用途
推理规则	161	行业专属布局/风格决策
UI风格	67	视觉语言（如玻璃态、野兽派等）
配色方案	161	匹配行业的配色
字体搭配	57	排版组合
着陆页模式	24	优化转化率的结构

Output: Complete Design System

输出：完整设计系统

Every generation produces:

Pattern — Page structure (sections, CTA placement)
Style — Visual language with keywords
Colors — Primary, secondary, CTA, background, text
Typography — Font pairing + Google Fonts URL
Key Effects — Animations and interactions
Anti-Patterns — What to avoid for this industry
Pre-Delivery Checklist — Accessibility and UX gates

每次生成都会产出：

Pattern — 页面结构（板块、CTA位置）
Style — 带关键词的视觉语言
Colors — 主色、辅助色、CTA色、背景色、文本色
Typography — 字体搭配 + Google Fonts链接
Key Effects — 动画与交互效果
Anti-Patterns — 该行业需避免的设计
Pre-Delivery Checklist — 无障碍与UX检查项

Python API Usage

Python API 使用方法

Basic Design System Generation

基础设计系统生成

python

from uiuxpro import DesignSystemGenerator

python

from uiuxpro import DesignSystemGenerator

Initialize the generator

generator = DesignSystemGenerator()

Generate a complete design system from a description

print(result.pattern) # Landing page structure print(result.style) # UI style recommendation print(result.colors) # Color palette dict print(result.typography) # Font pairing + import URL print(result.effects) # Animations and interactions print(result.anti_patterns) # What to avoid print(result.checklist) # Pre-delivery gates

undefined

print(result.pattern) # Landing page structure print(result.style) # UI style recommendation print(result.colors) # Color palette dict print(result.typography) # Font pairing + import URL print(result.effects) # Animations and interactions print(result.anti_patterns) # What to avoid print(result.checklist) # Pre-delivery gates

undefined

Query Reasoning Rules

查询推理规则

python

from uiuxpro import ReasoningEngine

engine = ReasoningEngine()

python

from uiuxpro import ReasoningEngine

engine = ReasoningEngine()

Find rules for a product type

rules = engine.search("fintech payment app") for rule in rules: print(rule.category) # e.g. "Fintech/Crypto" print(rule.pattern) # Recommended page pattern print(rule.style_priority) # Ordered list of styles print(rule.color_mood) # Palette keywords print(rule.anti_patterns) # e.g. ["playful fonts", "neon colors"]

Get all rules for a category

all_healthcare = engine.get_by_category("Healthcare")

undefined

all_healthcare = engine.get_by_category("Healthcare")

undefined

Style Lookup

风格查询

python

from uiuxpro import StyleLibrary

styles = StyleLibrary()

python

from uiuxpro import StyleLibrary

styles = StyleLibrary()

Get all 67 styles

all_styles = styles.list_all()

Find styles by keyword

matching = styles.search("glass transparent blur")

Get full style spec

glassmorphism = styles.get("Glassmorphism") print(glassmorphism.keywords) # ["frosted glass", "transparency", ...] print(glassmorphism.best_for) # ["SaaS dashboards", "tech products"] print(glassmorphism.css_variables) # CSS custom properties print(glassmorphism.tailwind_config) # Tailwind configuration

undefined

glassmorphism = styles.get("Glassmorphism") print(glassmorphism.keywords) # ["frosted glass", "transparency", ...] print(glassmorphism.best_for) # ["SaaS dashboards", "tech products"] print(glassmorphism.css_variables) # CSS custom properties print(glassmorphism.tailwind_config) # Tailwind configuration

undefined

Color Palette Selection

配色方案选择

python

from uiuxpro import ColorEngine

colors = ColorEngine()

python

from uiuxpro import ColorEngine

colors = ColorEngine()

Get palette for a product type

palette = colors.get_for_product("medical clinic") print(palette.primary) # "#2B7A9F" print(palette.secondary) # "#E8F4FD" print(palette.cta) # "#0066CC" print(palette.background) # "#FFFFFF" print(palette.text) # "#1A2B3C" print(palette.notes) # "Clinical trust with human warmth"

Get palette by mood

calm_palettes = colors.get_by_mood("calming") luxury_palettes = colors.get_by_mood("luxury")

undefined

calm_palettes = colors.get_by_mood("calming") luxury_palettes = colors.get_by_mood("luxury")

undefined

Typography Pairing

字体搭配

python

from uiuxpro import TypographyEngine

typography = TypographyEngine()

python

from uiuxpro import TypographyEngine

typography = TypographyEngine()

Get font pairing for a mood

pairing = typography.get_for_mood("elegant sophisticated") print(pairing.heading) # "Cormorant Garamond" print(pairing.body) # "Montserrat" print(pairing.google_url) # Google Fonts import URL print(pairing.css_import) # @import statement

Get all pairings for a tech stack

react_pairings = typography.get_for_stack("react")

---

react_pairings = typography.get_for_stack("react")

---

CLI Commands

CLI命令

bash

undefined

bash

undefined

Generate a design system interactively

npx uipro-cli generate

Generate for a specific product type

npx uipro-cli generate --product "saas dashboard" --stack nextjs

List all 67 UI styles

npx uipro-cli styles list

Get style details

npx uipro-cli styles get glassmorphism

Search reasoning rules

npx uipro-cli rules search "e-commerce luxury"

List all color palettes

npx uipro-cli colors list

Get font pairings

npx uipro-cli fonts list npx uipro-cli fonts get --mood "tech modern"

Output design system as JSON

npx uipro-cli generate --product "restaurant booking" --output json

Output as markdown

npx uipro-cli generate --product "portfolio site" --output markdown

---

npx uipro-cli generate --product "portfolio site" --output markdown

---

Real-World Examples

实际应用示例

Example 1: React SaaS Dashboard

示例1：React SaaS仪表盘

python

from uiuxpro import DesignSystemGenerator

gen = DesignSystemGenerator()
ds = gen.generate(
    description="B2B SaaS analytics dashboard for enterprise teams",
    stack="react",
    tech_details={"component_library": "shadcn/ui", "css": "tailwindcss"}
)

python

from uiuxpro import DesignSystemGenerator

gen = DesignSystemGenerator()
ds = gen.generate(
    description="B2B SaaS analytics dashboard for enterprise teams",
    stack="react",
    tech_details={"component_library": "shadcn/ui", "css": "tailwindcss"}
)

Result:

Pattern: "Data-First + Progressive Disclosure"

Style: "Glassmorphism" or "Bento Grid"

Colors: Primary #6366F1 (Indigo), CTA #8B5CF6 (Violet)

Fonts: Inter / Inter (unified, high legibility)

Effects: Subtle card shadows, smooth data transitions 200ms

Avoid: Decorative animations, overly complex gradients


Generated Tailwind config from `ds.tailwind_config`:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366F1',
          50: '#EEF2FF',
          500: '#6366F1',
          900: '#312E81',
        },
        cta: '#8B5CF6',
        surface: 'rgba(255,255,255,0.05)',
      },
      backdropBlur: {
        xs: '2px',
      },
      boxShadow: {
        glass: '0 8px 32px rgba(99,102,241,0.15)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}


从`ds.tailwind_config`生成的Tailwind配置：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366F1',
          50: '#EEF2FF',
          500: '#6366F1',
          900: '#312E81',
        },
        cta: '#8B5CF6',
        surface: 'rgba(255,255,255,0.05)',
      },
      backdropBlur: {
        xs: '2px',
      },
      boxShadow: {
        glass: '0 8px 32px rgba(99,102,241,0.15)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Example 2: Wellness/Spa Landing Page

示例2：健康/SPA着陆页

python

ds = gen.generate(
    description="Luxury wellness spa booking and services landing page",
    stack="html",
    tech_details={"css": "tailwindcss"}
)

python

ds = gen.generate(
    description="Luxury wellness spa booking and services landing page",
    stack="html",
    tech_details={"css": "tailwindcss"}
)

Auto-generates the full CSS variables block:

自动生成完整的CSS变量块：

print(ds.css_variables)


Output `ds.css_variables`:

```css
:root {
  /* Soft UI Evolution - Serenity Spa */
  --color-primary: #E8B4B8;      /* Soft Pink */
  --color-secondary: #A8D5BA;    /* Sage Green */
  --color-cta: #D4AF37;          /* Gold */
  --color-background: #FFF5F5;   /* Warm White */
  --color-text: #2D3436;         /* Charcoal */

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  /* Effects */
  --shadow-soft: 6px 6px 12px #d1c4c5, -6px -6px 12px #ffffff;
  --transition-base: 200ms ease-in-out;
  --border-radius-organic: 20px 60px 30px 50px;
}

print(ds.css_variables)


输出`ds.css_variables`：

```css
:root {
  /* Soft UI Evolution - Serenity Spa */
  --color-primary: #E8B4B8;      /* Soft Pink */
  --color-secondary: #A8D5BA;    /* Sage Green */
  --color-cta: #D4AF37;          /* Gold */
  --color-background: #FFF5F5;   /* Warm White */
  --color-text: #2D3436;         /* Charcoal */

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  /* Effects */
  --shadow-soft: 6px 6px 12px #d1c4c5, -6px -6px 12px #ffffff;
  --transition-base: 200ms ease-in-out;
  --border-radius-organic: 20px 60px 30px 50px;
}

Example 3: Fintech/Banking App

示例3：金融科技/银行应用

python

ds = gen.generate(
    description="Personal finance tracker with budgeting and investment tracking",
    stack="react-native",
)

python

ds = gen.generate(
    description="Personal finance tracker with budgeting and investment tracking",
    stack="react-native",
)

Anti-patterns automatically flagged for finance:

针对金融行业自动标记的反模式：

print(ds.anti_patterns)

[

"Playful rounded fonts (use geometric sans)",

"Bright neon colors (erode trust)",

"AI purple/pink gradients",

"Excessive animations on financial data",

"Gamification elements on serious financial actions"

]

print(ds.checklist)

[

"✓ WCAG AA contrast on all number displays",

"✓ Currency formatted with locale awareness",

"✓ Error states are clear and actionable",

"✓ Loading states on all async operations",

"✓ Biometric auth UI integrated",

"✓ No emojis as primary icons — use Lucide or SF Symbols",

]

undefined

undefined

Example 4: Full Stack Integration with Next.js

示例4：与Next.js全栈集成

python

from uiuxpro import DesignSystemGenerator, StackExporter

gen = DesignSystemGenerator()
ds = gen.generate(
    description="AI-powered recruitment platform for enterprise HR teams",
    stack="nextjs",
    tech_details={
        "component_library": "shadcn/ui",
        "css": "tailwindcss",
        "icons": "lucide-react"
    }
)

python

from uiuxpro import DesignSystemGenerator, StackExporter

gen = DesignSystemGenerator()
ds = gen.generate(
    description="AI-powered recruitment platform for enterprise HR teams",
    stack="nextjs",
    tech_details={
        "component_library": "shadcn/ui",
        "css": "tailwindcss",
        "icons": "lucide-react"
    }
)

Export as Next.js-ready files

导出为Next.js可用文件

exporter = StackExporter(ds, stack="nextjs") exporter.write_all(output_dir="./src/design-system/")

Generates:

生成以下文件：

./src/design-system/tokens.css — CSS custom properties

./src/design-system/tokens.css — CSS自定义属性

./src/design-system/tailwind.config.js — Tailwind configuration

./src/design-system/tailwind.config.js — Tailwind配置

./src/design-system/typography.ts — Font configuration

./src/design-system/typography.ts — 字体配置

./src/design-system/colors.ts — Color tokens as TypeScript

./src/design-system/colors.ts — TypeScript格式的颜色标记

./src/design-system/README.md — Design decisions + rationale

./src/design-system/README.md — 设计决策 + 依据

---

---

Supported Tech Stacks

支持的技术栈

Stack	Key	Notes
React	`react`	Component patterns + Tailwind
Next.js	`nextjs`	App Router + RSC aware
Astro	`astro`	Island architecture patterns
Vue 3	`vue`	Composition API patterns
Nuxt.js	`nuxt`	Auto-imports aware
Nuxt UI	`nuxt-ui`	Component overrides
Svelte	`svelte`	Reactive store patterns
SwiftUI	`swiftui`	iOS/macOS native patterns
React Native	`react-native`	Mobile-first responsive
Flutter	`flutter`	Widget tree patterns
HTML + Tailwind	`html`	Standalone CSS output
shadcn/ui	`shadcn`	Theme token overrides
Jetpack Compose	`jetpack`	Android Material3

技术栈	标识	说明
React	`react`	组件模式 + Tailwind
Next.js	`nextjs`	支持App Router + RSC
Astro	`astro`	孤岛架构模式
Vue 3	`vue`	组合式API模式
Nuxt.js	`nuxt`	支持自动导入
Nuxt UI	`nuxt-ui`	组件覆盖
Svelte	`svelte`	响应式存储模式
SwiftUI	`swiftui`	iOS/macOS原生模式
React Native	`react-native`	移动优先响应式
Flutter	`flutter`	Widget树模式
HTML + Tailwind	`html`	独立CSS输出
shadcn/ui	`shadcn`	主题标记覆盖
Jetpack Compose	`jetpack`	Android Material3

Pre-Delivery Checklist (Universal)

通用交付前检查清单

The skill enforces these gates on every generated design:

ACCESSIBILITY
[ ] No emojis as icons — use SVG (Heroicons / Lucide / Phosphor)
[ ] cursor-pointer on all clickable elements
[ ] Hover states with smooth transitions (150–300ms)
[ ] Light mode: text contrast ratio 4.5:1 minimum
[ ] Dark mode: text contrast ratio 4.5:1 minimum
[ ] Focus states visible for keyboard navigation
[ ] prefers-reduced-motion respected
[ ] ARIA labels on icon-only buttons

RESPONSIVE
[ ] Mobile: 375px breakpoint tested
[ ] Tablet: 768px breakpoint tested
[ ] Desktop: 1024px breakpoint tested
[ ] Wide: 1440px breakpoint tested

PERFORMANCE
[ ] Images use next-gen formats (WebP / AVIF)
[ ] Fonts loaded with font-display: swap
[ ] No layout shift on font load (reserve space)
[ ] Animations use transform/opacity only (no layout props)

INTERACTION
[ ] Loading states on all async actions
[ ] Error states are clear and actionable
[ ] Empty states are designed (not blank)
[ ] Success feedback on form submissions

该Skill会在每次生成的设计中强制执行以下检查项：

无障碍
[ ] 不使用emoji作为图标 — 使用SVG（Heroicons / Lucide / Phosphor）
[ ] 所有可点击元素添加cursor-pointer
[ ] 悬停状态带平滑过渡（150–300ms）
[ ] 浅色模式：文本对比度至少4.5:1
[ ] 深色模式：文本对比度至少4.5:1
[ ] 键盘导航的焦点状态可见
[ ] 尊重prefers-reduced-motion设置
[ ] 仅图标按钮添加ARIA标签

响应式
[ ] 移动端：测试375px断点
[ ] 平板端：测试768px断点
[ ] 桌面端：测试1024px断点
[ ] 宽屏：测试1440px断点

性能
[ ] 图片使用下一代格式（WebP / AVIF）
[ ] 字体加载使用font-display: swap
[ ] 字体加载时无布局偏移（预留空间）
[ ] 动画仅使用transform/opacity（不使用布局属性）

交互
[ ] 所有异步操作添加加载状态
[ ] 错误状态清晰且可操作
[ ] 空状态有设计（非空白）
[ ] 表单提交成功后有反馈

Common Patterns by Industry

各行业通用设计模式

Tech / SaaS

科技/SaaS

Style: Glassmorphism, Bento Grid, AI-Native UI
Colors: Indigo/Violet primary, dark backgrounds for dashboards
Avoid: Stock photos, clip art, rainbow gradients

风格：玻璃态、Bento Grid、AI原生UI
配色：靛蓝/紫为主色，仪表盘用深色背景
避免：库存图片、剪贴画、彩虹渐变

E-commerce / Luxury

电商/奢侈品

Style: Minimalism, Editorial, Claymorphism (for casual)
Colors: Black/Gold for luxury; bright/bold for casual
Avoid: Cluttered layouts, too many CTAs, Comic Sans adjacent fonts

风格：极简主义、编辑风、黏土风（适用于休闲类）
配色：奢侈品用黑/金；休闲类用明亮大胆的颜色
避免：杂乱布局、过多CTA、类似Comic Sans的字体

Healthcare / Medical

医疗/健康

Style: Clean Minimalism, Soft UI
Colors: Blues, teals, whites — clinical but warm
Avoid: Red for primary actions (emergency connotation), dark mode on medical data

风格：简洁极简主义、柔和UI
配色：蓝色、蓝绿色、白色 — 专业且温暖
避免：主色用红色（关联紧急情况），医疗数据用深色模式

Finance / Fintech

金融/金融科技

Style: Professional Minimalism, Data-Dense UI
Colors: Deep blues, greens, neutrals
Avoid: Playful fonts, neon colors, AI purple gradients, excessive motion

风格：专业极简主义、数据密集型UI
配色：深蓝、绿色、中性色
避免：活泼字体、霓虹色、AI紫/粉渐变、过度动画

Food & Restaurant

餐饮/餐厅

Style: Warm Minimalism, Photography-Forward
Colors: Warm neutrals, appetizing reds/oranges, earthy tones
Avoid: Cold blues as primary, low-contrast text over food photos

风格：温暖极简主义、以摄影为主
配色：暖中性色、诱人的红/橙色、大地色系
避免：主色用冷蓝色，食物图片上用低对比度文本

Troubleshooting

故障排除

CLI not found after install

CLI安装后无法找到

bash

undefined

bash

undefined

Ensure npm global bin is in PATH

export PATH="$(npm bin -g):$PATH"

Or use npx directly

npx uipro-cli generate

undefined

npx uipro-cli generate

undefined

Python import errors

Python导入错误

bash

undefined

bash

undefined

Ensure you're in the project directory with venv active

python -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate pip install -r requirements.txt python main.py

undefined

python -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate pip install -r requirements.txt python main.py

undefined

Generation returns generic output

生成结果过于通用

Be specific in your description: include industry, audience, and goal

✗

"a website"

→ ✓

"a SaaS landing page for a B2B project management tool targeting remote engineering teams"

Include stack context for framework-specific exports

描述需具体：包含行业、受众和目标

✗

"a website"

→ ✓

"a SaaS landing page for a B2B project management tool targeting remote engineering teams"

提供技术栈上下文以获得框架专属输出

No matching reasoning rule found

未找到匹配的推理规则

python

undefined

python

undefined

The engine falls back to closest category match

引擎会自动匹配最接近的类别

Inspect the match score to verify

检查匹配分数以验证

result = engine.search("autonomous drone delivery fleet") print(result[0].score) # BM25 relevance score print(result[0].category) # Matched category print(result[0].fallback) # True if approximate match

undefined

result = engine.search("autonomous drone delivery fleet") print(result[0].score) # BM25相关性分数 print(result[0].category) # 匹配的类别 print(result[0].fallback) # 若为近似匹配则为True

undefined

Tailwind config conflicts with existing config

Tailwind配置与现有配置冲突

python

undefined

python

undefined

Get only the theme extension, not the full config

仅获取主题扩展，而非完整配置

theme_extension = ds.tailwind_theme_extension # dict, not full config

Merge manually into your existing tailwind.config.js

手动合并到现有tailwind.config.js

import json print(json.dumps(theme_extension, indent=2))

---

import json print(json.dumps(theme_extension, indent=2))

---

ui-ux-pro-max-skill

Original

Translation

UI UX Pro Max Skill

UI UX Pro Max Skill

Installation

安装

Via CLI (Recommended)

通过CLI安装（推荐）

Install the CLI globally

Install the CLI globally

Add the skill to your project

Add the skill to your project

Or install globally

Or install globally

Via Python (Direct)

通过Python直接安装

Clone the repository

Clone the repository

Install dependencies

Install dependencies

Run the design system generator

Run the design system generator

Manual SKILL.md Integration

手动集成SKILL.md

Core Concepts

核心概念

Design System Generator

设计系统生成器

Output: Complete Design System

输出：完整设计系统

Python API Usage

Python API 使用方法

Basic Design System Generation

基础设计系统生成

Initialize the generator

Initialize the generator

Generate a complete design system from a description

Generate a complete design system from a description

Query Reasoning Rules

查询推理规则

Find rules for a product type

Find rules for a product type

Get all rules for a category

Get all rules for a category

Style Lookup

风格查询

Get all 67 styles

Get all 67 styles

Find styles by keyword

Find styles by keyword

Get full style spec

Get full style spec

Color Palette Selection

配色方案选择

Get palette for a product type

Get palette for a product type

Get palette by mood

Get palette by mood

Typography Pairing

字体搭配

Get font pairing for a mood

Get font pairing for a mood

Get all pairings for a tech stack

Get all pairings for a tech stack

CLI Commands

CLI命令

Generate a design system interactively

Generate a design system interactively

Generate for a specific product type

Generate for a specific product type

List all 67 UI styles

List all 67 UI styles

Get style details

Get style details

Search reasoning rules

Search reasoning rules

List all color palettes

List all color palettes

Get font pairings