ui-ux-pro-max

Generate UI design systems and UX guidelines from multi-domain search results.

4|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/Xueheng-Li/ai-tools-installation --skill ui-ux-pro-max-xueheng-li
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Xueheng-Li/ai-tools-installation/tree/main/recommended_skills/ui-ux-pro-max
Command: npx skills add https://github.com/Xueheng-Li/ai-tools-installation --skill ui-ux-pro-max-xueheng-li

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Visual design teams and developers struggle to align UI patterns, typography, and color systems across projects. This guide automates the creation of cohesive design systems and UX guidelines from diverse sources, reducing manual guesswork and rework.

Core Features & Use Cases

  • Multi-domain design guidance: product strategy, style, color, typography, and landing patterns are aggregated into a single design system.
  • Prioritized recommendations: style priority and reasoning tailor patterns for SaaS dashboards, marketing sites, portfolios, and mobile apps.
  • Architecture for reuse: Master + Overrides (design-system/master and per-page overrides) enable global standards with page-level customization.

Quick Start

Use the design-system generator with a query like 'SaaS dashboard' to generate a complete design system for your project.

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 complete UI design system for a SaaS dashboard?

Generate a UI design system by querying with your project type, such as 'SaaS dashboard', to automatically aggregate product, style, color, and typography data into cohesive, prioritized guidelines. This reduces manual guesswork by applying multi-domain search results tailored for your specific application.

Can I use this design system generator with React and Next.js projects?

Yes, the design system generator supports web and mobile projects across multiple stacks, including html-tailwind, React, and Next.js. It provides scalable style guides and typography settings tailored for these frameworks to ensure seamless integration.

What is the best way to handle global design standards with page-level customizations?

Handle global design standards with page-level customizations using the Master and Overrides architecture. This establishes a global design-system/master baseline while enabling per-page overrides, ensuring global standards remain intact while allowing specific page-level styling adjustments.

How does a multi-domain search improve UX guidelines and style guides?

Multi-domain search improves UX guidelines by using a BM25-based search over product, color, typography, and landing data. This mechanism aggregates diverse sources into a single prioritized design system, providing tailored recommendations that reduce manual rework and align UI patterns.

Does this design system generator support accessibility and typography standards?

Yes, the design system generator explicitly supports accessibility and typography standards. It aggregates typography and color palette data into cohesive style guides, ensuring that the generated UX guidelines meet accessibility requirements while maintaining visual consistency across web and mobile projects.

What are the limitations of automating a design system from multi-domain search?

Limitations include relying on the quality of underlying product, style, and color data for accurate BM25-based search results. While it automates cohesive UX guidelines and prioritized recommendations, complex bespoke visual designs may still require manual adjustments beyond the generated Master and Override architecture.