ui-ux-pro-max

Generates design system recommendations and searchable UI/UX guidelines from CSV databases.

Updated Apr 15, 2026
One-click install
npx skills add https://github.com/BING0116-gif/math-AI-assistant --skill ui-ux-pro-max-bing0116-gif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/BING0116-gif/math-AI-assistant/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/BING0116-gif/math-AI-assistant --skill ui-ux-pro-max-bing0116-gif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for web and mobile interfaces requires extensive design knowledge, and this Skill provides a searchable design intelligence database with reasoning-based recommendations. ## Core Features & Use Cases - Design System Generation: Produces complete design systems (pattern, style, colors, typography, effects, anti-patterns) from a product description, with optional persistence as MASTER.md plus per-page override files. - Multi-Domain Search: BM25-based search across 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types. - Stack-Specific Guidelines: Searches best-practice rules for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. - Use Case: When building a fintech dashboard, run the design-system command to receive a recommended landing pattern, color tokens with CSS variables, font pairing, and a pre-delivery accessibility checklist. ## Quick Start Ask the assistant to generate a design system for your product type, for example: create a design system for a beauty spa landing page using the ui-ux-pro-max skill.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system for a new project?▼

Run the search script with the --design-system flag and a product description, for example a query like 'beauty spa wellness service'. The tool searches product, style, color, landing, and typography domains, applies reasoning rules, and returns a complete recommendation with pattern, colors, fonts, and anti-patterns.

What design resources are included in the database?▼

The database contains over 50 UI styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types. It also includes stack-specific guideline files for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.

How does the design system persistence feature work?▼

Adding the --persist flag creates a design-system folder with a MASTER.md file holding global rules and a pages subfolder for page-specific overrides. When building a page, the page file overrides the Master file if it exists, otherwise the Master rules apply.

Does the search tool require external Python packages?▼

No external packages are required. The search engine implements BM25 ranking using only the Python standard library (csv, re, math, pathlib), so any Python 3 installation can run it directly.

Can I search guidelines for a specific framework like React or SwiftUI?▼

Yes, use the --stack option with values such as react, nextjs, vue, svelte, swiftui, react-native, flutter, or shadcn. Each stack has a dedicated CSV of guidelines with do/don't rules, code examples, severity levels, and documentation links.

When should this design skill not be used?▼

Skip it for pure backend logic, API or database design, non-visual performance optimization, infrastructure work, and non-visual automation scripts. It applies only when a task changes how an interface looks, feels, moves, or is interacted with.