ui-ux-pro-max-skill by aradotso/trending-skills
npx skills add https://github.com/aradotso/trending-skills --skill ui-ux-pro-max-skillSkill by ara.so — Daily 2026 Skills collection.
UI UX Pro Max 是一个 AI 技能,它将设计智能注入编码智能体——为它们提供 161 条行业特定推理规则、67 种 UI 样式、57 种字体配对、161 种配色方案以及交付前检查清单,以便首次尝试就能产出专业、无障碍、转化率优化的界面。
# 全局安装 CLI
npm install -g uipro-cli
# 将技能添加到你的项目
npx uipro-cli install
# 或者全局安装
npx uipro-cli install --global
# 克隆仓库
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
# 安装依赖
pip install -r requirements.txt
# 运行设计系统生成器
python main.py
将生成的 SKILL.md 复制到你的项目根目录,以便像 Claude Code、Cursor、Codex 或 Windsurf 这样的智能体能够自动识别:
cp SKILL.md /your-project/SKILL.md
当你描述一个产品时,该技能会在以下领域进行多域搜索:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 领域 | 数量 | 用途 |
|---|---|---|
| 推理规则 | 161 | 行业特定的布局/样式决策 |
| UI 样式 | 67 | 视觉语言(玻璃态、粗野主义等) |
| 配色方案 | 161 | 行业匹配的调色板 |
| 字体配对 | 57 | 字体组合 |
| 落地页模式 | 24 | 转化率优化的结构 |
每次生成都会产出:
from uiuxpro import DesignSystemGenerator
# 初始化生成器
generator = DesignSystemGenerator()
# 根据描述生成完整的设计系统
result = generator.generate(
description="A landing page for a luxury beauty spa",
stack="react", # react | nextjs | astro | vue | html
mode="light" # light | dark | auto
)
print(result.pattern) # 落地页结构
print(result.style) # UI 样式推荐
print(result.colors) # 调色板字典
print(result.typography) # 字体配对 + 导入 URL
print(result.effects) # 动画和交互
print(result.anti_patterns) # 应避免的事项
print(result.checklist) # 交付前检查点
from uiuxpro import ReasoningEngine
engine = ReasoningEngine()
# 查找特定产品类型的规则
rules = engine.search("fintech payment app")
for rule in rules:
print(rule.category) # 例如 "Fintech/Crypto"
print(rule.pattern) # 推荐的页面模式
print(rule.style_priority) # 样式优先级列表
print(rule.color_mood) # 调色板关键词
print(rule.anti_patterns) # 例如 ["playful fonts", "neon colors"]
# 获取某个类别的所有规则
all_healthcare = engine.get_by_category("Healthcare")
from uiuxpro import StyleLibrary
styles = StyleLibrary()
# 获取所有 67 种样式
all_styles = styles.list_all()
# 通过关键词查找样式
matching = styles.search("glass transparent blur")
# 获取完整的样式规格
glassmorphism = styles.get("Glassmorphism")
print(glassmorphism.keywords) # ["frosted glass", "transparency", ...]
print(glassmorphism.best_for) # ["SaaS dashboards", "tech products"]
print(glassmorphism.css_variables) # CSS 自定义属性
print(glassmorphism.tailwind_config) # Tailwind 配置
from uiuxpro import ColorEngine
colors = ColorEngine()
# 获取特定产品类型的调色板
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"
# 根据氛围获取调色板
calm_palettes = colors.get_by_mood("calming")
luxury_palettes = colors.get_by_mood("luxury")
from uiuxpro import TypographyEngine
typography = TypographyEngine()
# 根据氛围获取字体配对
pairing = typography.get_for_mood("elegant sophisticated")
print(pairing.heading) # "Cormorant Garamond"
print(pairing.body) # "Montserrat"
print(pairing.google_url) # Google Fonts 导入 URL
print(pairing.css_import) # @import 语句
# 获取特定技术栈的所有配对
react_pairings = typography.get_for_stack("react")
# 交互式生成设计系统
npx uipro-cli generate
# 为特定产品类型生成
npx uipro-cli generate --product "saas dashboard" --stack nextjs
# 列出所有 67 种 UI 样式
npx uipro-cli styles list
# 获取样式详情
npx uipro-cli styles get glassmorphism
# 搜索推理规则
npx uipro-cli rules search "e-commerce luxury"
# 列出所有配色方案
npx uipro-cli colors list
# 获取字体配对
npx uipro-cli fonts list
npx uipro-cli fonts get --mood "tech modern"
# 以 JSON 格式输出设计系统
npx uipro-cli generate --product "restaurant booking" --output json
# 以 markdown 格式输出
npx uipro-cli generate --product "portfolio site" --output markdown
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"}
)
# 结果:
# 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
从 ds.tailwind_config 生成的 Tailwind 配置:
// 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 = gen.generate(
description="Luxury wellness spa booking and services landing page",
stack="html",
tech_details={"css": "tailwindcss"}
)
# 自动生成完整的 CSS 变量块:
print(ds.css_variables)
输出 ds.css_variables:
: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;
}
ds = gen.generate(
description="Personal finance tracker with budgeting and investment tracking",
stack="react-native",
)
# 金融领域自动标记的反模式:
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",
# ]
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"
}
)
# 导出为 Next.js 就绪的文件
exporter = StackExporter(ds, stack="nextjs")
exporter.write_all(output_dir="./src/design-system/")
# 生成:
# ./src/design-system/tokens.css — CSS 自定义属性
# ./src/design-system/tailwind.config.js — Tailwind 配置
# ./src/design-system/typography.ts — 字体配置
# ./src/design-system/colors.ts — 颜色标记(TypeScript)
# ./src/design-system/README.md — 设计决策 + 原理说明
| 技术栈 | 键值 | 备注 |
|---|---|---|
| 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 | 小部件树模式 |
| HTML + Tailwind | html | 独立的 CSS 输出 |
| shadcn/ui | shadcn | 主题标记覆盖 |
| Jetpack Compose | jetpack | Android Material3 |
该技能对每个生成的设计强制执行以下检查点:
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
# 确保 npm 全局 bin 目录在 PATH 中
export PATH="$(npm bin -g):$PATH"
# 或者直接使用 npx
npx uipro-cli generate
# 确保你在项目目录中且虚拟环境已激活
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
pip install -r requirements.txt
python main.py
"一个网站" → ✓ "一个面向远程工程团队的 B2B 项目管理工具的 SaaS 落地页"# 引擎会回退到最接近的类别匹配
# 检查匹配分数以验证
result = engine.search("autonomous drone delivery fleet")
print(result[0].score) # BM25 相关性分数
print(result[0].category) # 匹配的类别
print(result[0].fallback) # 如果是近似匹配则为 True
# 仅获取主题扩展,而不是完整配置
theme_extension = ds.tailwind_theme_extension # dict, not full config
# 手动合并到你现有的 tailwind.config.js 中
import json
print(json.dumps(theme_extension, indent=2))
每周安装数
345
仓库
GitHub 星标数
10
首次出现
7 天前
安全审计
安装于
kimi-cli343
gemini-cli343
codex343
amp343
cline343
opencode343
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.
# 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
# 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
Copy the generated SKILL.md into your project root so agents like Claude Code, Cursor, Codex, or Windsurf automatically pick it up:
cp SKILL.md /your-project/SKILL.md
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 |
Every generation produces:
from uiuxpro import DesignSystemGenerator
# Initialize the generator
generator = DesignSystemGenerator()
# Generate a complete design system from a description
result = generator.generate(
description="A landing page for a luxury beauty spa",
stack="react", # react | nextjs | astro | vue | html
mode="light" # light | dark | auto
)
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
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")
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
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")
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")
# 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
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:
// 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 = gen.generate(
description="Luxury wellness spa booking and services landing page",
stack="html",
tech_details={"css": "tailwindcss"}
)
# Auto-generates the full CSS variables block:
print(ds.css_variables)
Output ds.css_variables:
: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;
}
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",
# ]
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
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/tailwind.config.js — Tailwind configuration
# ./src/design-system/typography.ts — Font configuration
# ./src/design-system/colors.ts — Color tokens as TypeScript
# ./src/design-system/README.md — Design decisions + rationale
| 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 |
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
# Ensure npm global bin is in PATH
export PATH="$(npm bin -g):$PATH"
# Or use npx directly
npx uipro-cli generate
# 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
"a website" → ✓ "a SaaS landing page for a B2B project management tool targeting remote engineering teams"# 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
# 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
import json
print(json.dumps(theme_extension, indent=2))
Weekly Installs
345
Repository
GitHub Stars
10
First Seen
7 days ago
Security Audits
Gen Agent Trust HubPassSocketWarnSnykWarn
Installed on
kimi-cli343
gemini-cli343
codex343
amp343
cline343
opencode343
AI Elements:基于shadcn/ui的AI原生应用组件库,快速构建对话界面
56,200 周安装
| 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 |