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".