ui-ux-pro-max

Generate design systems with patterns, colors, typography, and accessibility rules.

18|2|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/yuanyuekejiJN/AivoClaw --skill ui-ux-pro-max-yuanyuekejijn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/yuanyuekejiJN/AivoClaw/tree/main/extraSkills/ui-ux-pro-max-0.1.0
Command: npx skills add https://github.com/yuanyuekejiJN/AivoClaw --skill ui-ux-pro-max-yuanyuekejijn

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps you avoid guesswork and inconsistent UI/UX by generating structured design system guidance that’s usable for real frontend implementation.

Core Features & Use Cases

Design-system generation: produces a complete recommendation including pattern/sections, style direction, color palette, typography pairing, key effects, anti-patterns, and a pre-delivery checklist.
UX flow & improvement guidance: improves existing interfaces by turning UX principles into concrete component rules and accessibility considerations (keyboard navigation, focus states, reduced motion, contrast).
Implementation-ready outputs: supports design-system generation plus component/state guidance, and can emit ASCII or Markdown for easier iteration and review.

Quick Start

Ask for UI/UX work and request a design-system output for your product, for example: "Build a design system for a SaaS dashboard with a modern, accessible UI, and include tokens and component guidance."

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 SaaS dashboard with accessible UI tokens?

To generate a design system for a SaaS dashboard, provide structured triage inputs specifying your product needs. The system outputs pattern directions, color palettes, typography pairings, effects, anti-patterns, and accessibility-compliant tokens for UI implementation.

What is included in a complete UI design system for frontend implementation?

A complete UI design system includes pattern sections, style direction, color palettes, typography pairings, key visual effects, anti-patterns to avoid, and a pre-delivery checklist. It also provides concrete component rules, state guidance, and accessibility considerations like keyboard navigation.

How do I ensure my UI components meet accessibility standards for contrast and keyboard navigation?

Ensure UI components meet accessibility standards by applying generated component rules that satisfy implementation constraints. The system specifies focus states, keyboard navigation, contrast ratios, and reduced motion considerations directly within the design system guidance.

Can I use this to improve UX flows for existing app interfaces instead of starting from scratch?

Yes, you can improve UX flows for existing app interfaces by turning UX principles into concrete component rules. The system evaluates current interfaces and generates actionable state guidance, accessibility considerations, and anti-patterns to refine cross-framework UI workflows.

What format is the design system output in for easier iteration and review?

The design system output is available in ASCII or Markdown formats to facilitate easier iteration and review. This implementation-ready format supports design-system generation alongside component and state guidance for direct frontend integration.

What inputs do I need to provide for cross-framework UI design system generation?

You need to provide structured triage inputs detailing your product interface requirements, such as landing page or SaaS dashboard specifications. These inputs drive the generation of consistent UI/UX guidance, patterns, and tokens across various workflows and states.