ui-ux-pro-max

Generates design system recommendations by searching UI/UX style, color, and typography databases.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill ui-ux-pro-max-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/surfingalien/FinSurfing/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill ui-ux-pro-max-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and layout for a new UI project requires extensive design knowledge, and inconsistent choices lead to unprofessional-looking interfaces. ## Core Features & Use Cases - Design System Generation: Runs multi-domain BM25 searches across style, color, typography, landing page, and product CSV databases, then applies reasoning rules to output a complete design system with anti-patterns to avoid. - Domain & Stack Search: Queries 10 domains (style, color, chart, typography, UX, icons, React, web, landing, product) and 13 stack guideline sets including React, Next.js, Vue, Svelte, SwiftUI, Flutter, and Tailwind. - Design System Persistence: Saves a MASTER.md source of truth plus per-page override files for hierarchical retrieval across sessions. - Use Case: When asked to build a fintech dashboard, run the design-system command to receive a recommended pattern, style, hex color palette, font pairing, effects, and a pre-delivery checklist before writing any code. ## Quick Start Ask the AI to generate a design system for your project, for example: create a landing page design system for a beauty spa 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 web project?▼

Run the search.py script with the --design-system flag and a query describing your product, such as "fintech dashboard". It searches product, style, color, landing, and typography domains, applies reasoning rules, and returns a complete recommendation with colors, fonts, and anti-patterns.

What UI styles and stacks does the search database cover?▼

The database includes 67 styles such as glassmorphism, minimalism, and brutalism, plus 13 stack guideline sets covering html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui, and Jetpack Compose.

Does the design system search require external Python packages?▼

No external packages are required. The scripts use only Python standard library modules like csv, re, math, and argparse, so any Python 3 installation works without pip installs.

How do I save and reuse a design system across pages?▼

Add the --persist flag to write a design-system/MASTER.md file as the global source of truth, and use --page to create page-specific override files under design-system/pages/. Page files override the Master when both exist.

Why does a search return no results for my query?▼

The BM25 engine only returns rows with a positive relevance score, and tokens shorter than three characters are ignored. Try more specific keywords like "healthcare SaaS dashboard" instead of a generic term like "app".