ui-ux-pro-max

Generate design systems and UI/UX recommendations for web and mobile applications.

Updated Jun 5, 2025
One-click install
npx skills add https://github.com/wangzitian0/finance_report --skill ui-ux-pro-max-wangzitian0
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/wangzitian0/finance_report/tree/main/.opencode/skills/professional/ui-ux-design
Command: npx skills add https://github.com/wangzitian0/finance_report --skill ui-ux-pro-max-wangzitian0

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the UI/UX design process by providing comprehensive, context-aware recommendations for styles, colors, typography, and UX best practices, ensuring professional and accessible designs.

Core Features & Use Cases

  • Design System Generation: Creates a complete design system based on project type, industry, and desired style.
  • Component-Specific Guidance: Offers detailed advice on elements like buttons, cards, and forms.
  • Stack-Specific Best Practices: Provides tailored recommendations for various development stacks (React, Vue, Tailwind, etc.).
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a cohesive design system, including color palettes, font pairings, and layout suggestions, ensuring a professional and user-friendly interface.

Quick Start

Generate a design system for a 'fintech mobile app' with a 'minimalist dark mode' style.

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

To generate a design system for a web application, you provide the project type, industry, and desired style. The system then outputs comprehensive recommendations for color palettes, font pairings, and UX guidelines tailored to your stack.

Can I get UI component design guidance for Tailwind CSS and React?

Yes, you can get detailed component design guidance for Tailwind CSS, React, and other frontend development stacks. It provides specific advice on styling and structuring elements like buttons, cards, and forms for these frameworks.

What is the best way to ensure UI accessibility during frontend development?

The best way to ensure UI accessibility during frontend development is by performing an automated code review. This process evaluates your component design against established UX guidelines and accessibility standards to identify issues.

Does this design intelligence tool support mobile app UX guidelines?

Yes, this design intelligence tool supports mobile app UX guidelines. It provides context-aware recommendations for both web and mobile applications, including styles, typography, and chart types.

How do I choose the right color palettes and font pairings for a SaaS dashboard?

To choose the right color palettes and font pairings for a SaaS dashboard, you input your project parameters. The tool generates a cohesive design system ensuring a professional and user-friendly interface.

Do I need Python installed to use this UI/UX design tool?

Yes, you need Python installed as it is a required dependency for this UI/UX design tool. The Python environment supports the underlying scripts that generate the design intelligence and component recommendations.