ui-ux-pro-max

Generate complete design systems with UI/UX patterns and stack-specific guidelines.

3|Updated Jan 3, 2026
One-click install
npx skills add https://github.com/sayandedotcom/chat-automation --skill ui-ux-pro-max-sayandedotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/sayandedotcom/chat-automation/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/sayandedotcom/chat-automation --skill ui-ux-pro-max-sayandedotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the UI/UX design process by providing intelligent, data-driven recommendations for product design, style, color, typography, and user experience best practices.

Core Features & Use Cases

  • Comprehensive Design System Generation: Automatically creates a complete design system based on project requirements, including patterns, styles, color palettes, and typography.
  • Domain-Specific Search: Access a searchable database for UI styles, color palettes, chart types, landing page structures, UX guidelines, and font pairings.
  • Stack-Specific Guidelines: Provides implementation best practices for various technology stacks like React, Next.js, and HTML/Tailwind.
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a professional and user-friendly design system, ensuring consistency and adherence to best practices from the outset.

Quick Start

Generate a design system for a new beauty spa wellness service 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 design system for a new SaaS dashboard?

To generate a design system for a SaaS dashboard, you input your project requirements to automatically receive data-driven recommendations for UI styles, color palettes, typography, and landing page structures. This ensures consistency and adherence to UX best practices from the outset.

What is the best way to find UX guidelines and font pairings for specific product types?

The best way to find UX guidelines and font pairings is by querying a searchable database tailored to your product type. This approach provides intelligent, data-driven recommendations for styles, typography, and user experience best practices across multiple technology stacks.

Can I get stack-specific UI implementation guidelines for React and Next.js?

Yes, you can get stack-specific UI implementation guidelines for React, Next.js, and HTML/Tailwind. The system provides implementation best practices for these technology stacks to ensure your design system translates accurately into code.

How does color palette and typography selection work for landing page design?

Color palette and typography selection works by accessing a searchable database that provides intelligent recommendations based on your specific landing page requirements. It automatically matches styles, colors, and font pairings to generate a cohesive design system with reasoning.

Do I need existing design assets to create a UI style guide?

No, you do not need existing design assets to create a UI style guide. The system generates a complete design system from scratch based solely on your project requirements, automatically producing patterns, color palettes, and typography with persistence for master and page-specific overrides.