ui-ux-pro-max

Generate a reusable design system with color palettes, typography, and component patterns.

Updated Feb 8, 2026
One-click install
npx skills add https://github.com/wellsgz/SonarScope --skill ui-ux-pro-max-wellsgz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/wellsgz/SonarScope/tree/main/.codex/skills/ui-ux-pro-max
Command: npx skills add https://github.com/wellsgz/SonarScope --skill ui-ux-pro-max-wellsgz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Streamlines UI/UX design work by generating a structured design system and action-oriented guidance from multi-domain searches, reducing time-to-delivery for product interfaces.

Core Features & Use Cases

  • Multi-domain design guidance across color, typography, patterns, and layout, tailored to your product type (SaaS, e-commerce, dashboard, mobile apps).
  • Design system generation that combines style, color, typography, and components into a single, reusable framework suitable for engineering handoff.
  • Persistence & overrides with Master + Page overrides to ensure consistent branding while enabling page-specific adjustments.
  • Example: A fintech dashboard requests a cohesive UI system, then the skill returns color palette, typography, and pattern recommendations ready for implementation.

Quick Start

Provide a complete design-system recommendation for a UI/UX project based on user input.

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 cohesive design system for a SaaS or e-commerce project?

To generate a design system, you provide your product type and design goals. The skill aggregates UI/UX guidance from multi-domain searches and consolidates color palettes, typography, and component patterns into a reusable framework for immediate developer handoff.

Can I maintain consistent branding while allowing page-specific UI adjustments?

Yes, you can maintain consistent branding with page-specific adjustments. The skill uses a persistence model with a Master file for global branding and optional page overrides to accommodate specific layout or component variations.

What is the best way to document a UI system for developer handoff?

The best way to document a UI system for handoff is to output the generated design rules as structured text. This skill generates documentation in either ASCII-box or Markdown format, ensuring developers can easily parse the color, typography, and layout guidelines.

How do I get color and typography recommendations for a fintech dashboard?

You get color and typography recommendations by inputting your dashboard requirements. The skill searches across multiple domains to return tailored UI system suggestions, including specific color palettes and typography options ready for implementation.

Does this design system generator support mobile app layouts?

Yes, the design system generator supports mobile app layouts. It provides multi-domain design guidance across color, typography, patterns, and layout tailored to various product types, including SaaS, e-commerce, dashboards, and mobile apps.