ui-ux-pro-max

Create comprehensive design systems from scattered UI/UX guidance.

1|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/leonanpereirapinto/ai-utils --skill ui-ux-pro-max-leonanpereirapinto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/leonanpereirapinto/ai-utils/tree/main/skills/typescript/ui-ux-pro-max
Command: npx skills add https://github.com/leonanpereirapinto/ai-utils --skill ui-ux-pro-max-leonanpereirapinto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires csv, json, os, datetime, pathlib, re, collections, and includes scripts (resource) components.

What problem does it solve?

Design teams struggle to assemble cohesive UI systems from scattered guidelines and ad-hoc notes, leading to inconsistent interfaces and slower delivery.

Core Features & Use Cases

  • Aggregates color, typography, layout, and accessibility guidelines into a unified design system.
  • Generates patterns, style rules, and component specs tailored to web and mobile stacks.
  • Supports page-specific overrides via a Master+Overrides structure for scalable governance.

Quick Start

Generate a complete design system for the given product concept.

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 create a comprehensive design system from scattered UI guidelines?

Create a comprehensive design system by aggregating scattered UI guidelines into a unified structure. The system generates color palettes, typography rules, and layout patterns, applying reasoning to surface cohesive design patterns across web and mobile stacks.

Can I apply page-specific overrides to a master design system for web and mobile apps?

Yes, you can apply page-specific overrides to a master design system using a Master+Overrides structure. This architecture allows scalable governance, maintaining a core design system while enabling tailored component specs and style rules for individual web and mobile pages.

What is the best way to consolidate color palette and typography rules for multiple stacks?

The best way to consolidate color palette and typography rules is using an aggregation workflow that supports multi-domain searches. It applies reasoning rules to extract and unify scattered accessibility and layout guidelines into a single, scalable design system.

Does this design system workflow support accessibility rules for both web and mobile stacks?

Yes, the design system workflow supports accessibility rules for both web and mobile stacks. It aggregates accessibility guidelines alongside color and typography patterns, ensuring consistent component specs and inclusive design across multi-domain product environments.

How do I generate component specs and style rules from existing product design notes?

Generate component specs and style rules by feeding existing product design notes into the workflow. It aggregates scattered guidance, applies reasoning to identify patterns, and outputs tailored component specifications and style rules suitable for web and mobile applications.

Why do design teams struggle to assemble cohesive UI systems from ad-hoc notes?

Design teams struggle to assemble cohesive UI systems from ad-hoc notes because scattered guidelines lead to inconsistent interfaces and slower delivery. Aggregating these notes into a unified design system with a Master+Overrides structure ensures scalable governance and consistency.