skills.rest
decoutkhanqindev
decoutkhanqindevCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

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

Updated May 31, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#tailwind#ux guidelines
One-click install
npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill ui-ux-pro-max-decoutkhanqindev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill ui-ux-pro-max-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and layout pattern for a new UI project is time-consuming and inconsistent. This Skill provides a searchable design intelligence database that returns concrete, priority-ranked recommendations for web and mobile interfaces. ## Core Features & Use Cases - Design System Generation: Run a single query to get a complete design system with pattern, style, hex colors, font pairings, effects, and anti-patterns, optionally persisted as a MASTER.md file with page-level overrides. - Domain-Specific Search: Query 10 domains (style, color, typography, chart, landing, product, UX, icons, React, web) using a BM25 ranking engine over CSV datasets covering 67 styles, 96 palettes, and 57 font pairings. - Stack Guidelines: Retrieve implementation best practices for 13 stacks including React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Use Case: When asked to build a landing page for a beauty spa, generate a full design system with elegant typography, soft color palette, and section structure, then verify the result against the pre-delivery accessibility and contrast checklist. ## Quick Start Ask the AI to generate a design system for your project, for example: create a landing page design system for a fintech SaaS dashboard 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 landing page?▼

Run the search script with the --design-system flag and a query describing your product, such as "beauty spa wellness service". It returns a complete recommendation with pattern, style, hex colors, font pairings, effects, and anti-patterns to avoid.

What UI styles and color palettes does the database include?▼

The database contains 67 styles including glassmorphism, minimalism, brutalism, and neumorphism, plus 96 color palettes organized by product type like SaaS, e-commerce, healthcare, and fintech. It also includes 57 font pairings with Google Fonts URLs.

Does it support React, Next.js, and Tailwind projects?▼

Yes, it provides stack-specific guidelines for 13 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and Jetpack Compose. Use the --stack flag with your search query to get implementation best practices.

How do I save the design system for use across multiple pages?▼

Add the --persist flag to create a design-system folder with a MASTER.md file as the global source of truth. Use --page to create page-specific override files that take precedence over the master rules when building that page.

What are the requirements to run the search tool?▼

Python 3 is required to execute the search scripts. The tool uses only standard library modules like csv, re, and math, so no additional package installation is needed beyond a Python installation.

Related Skills

Explore More Design & Creative Skills→
wpankwpank
11

ui-ux-pro-max

Generate UI/UX design systems from natural language queries.

Community
Advanced
xiaoquqixiaoquqi

popular-web-designs

Generate HTML/CSS boilerplate from design-system templates and CSS patterns.

Community
Advanced
loveconnorloveconnor

typography

Define and validate typographic systems with WCAG 2.2 contrast compliance.

Community
Advanced
yigitkonuryigitkonur
11

build-daisyui-mcp

Convert Figma designs and screenshots into daisyUI 5 code.

Community
Advanced