ui-ux-pro-max

Generate design systems with patterns, colors, typography, and anti-patterns.

1|Updated Nov 26, 2025
One-click install
npx skills add https://github.com/shengyanlei/blog --skill ui-ux-pro-max-shengyanlei
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/shengyanlei/blog/tree/main/.codex/skills/ui-ux-pro-max
Command: npx skills add https://github.com/shengyanlei/blog --skill ui-ux-pro-max-shengyanlei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the tedious manual research of UI/UX design guidelines by providing instant access to a comprehensive database of styles, colors, typography, and best practices.

Core Features & Use Cases

  • Comprehensive Design Database: Access 50+ styles, 96 color palettes, 57 font pairings, and 99 UX guidelines across 13 technology stacks
  • Intelligent Search: Find design recommendations by domain (style, color, typography) and technology stack (React, Vue, Tailwind)
  • Design System Generation: Create complete design systems with patterns, colors, typography, and anti-patterns
  • Use Case: A designer building a fintech dashboard can generate a complete design system including glassmorphism style, blue color palette, and accessible typography in minutes

Quick Start

Use the skill to generate a design system for a fintech landing page.

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 web application?

To generate a complete UI design system, specify your project type and technology stack. The Skill outputs comprehensive design patterns, color palettes, typography pairings, and anti-patterns for web and mobile applications instantly.

Can I find color palettes and typography pairings for a specific technology stack like React or Tailwind?

Yes, you can search design recommendations by technology stack. It supports 13 stacks including React, Vue, and Tailwind, providing mapped color palettes, typography pairings, and accessible UX guidelines.

What is the best way to design an accessible fintech dashboard?

The best way to design an accessible fintech dashboard is to query the database for domain-specific styles like glassmorphism, apply blue color palettes, and use accessible typography pairings tailored to your technology stack.

How many UI styles and UX guidelines are available for mobile app design?

For mobile app design, the database includes over 50 UI styles, 96 color palettes, 57 font pairings, and 99 UX guidelines to ensure comprehensive design coverage across different platforms.

Does this tool provide anti-patterns to avoid during UI styling?

Yes, when generating a design system, it provides specific anti-patterns to avoid. This ensures your UI styling remains accessible and follows established best practices across the selected technology stack.