ui-ux-pro-max

Generate UI/UX design systems with stack-specific implementation guidelines.

Updated Apr 23, 2025
One-click install
npx skills add https://github.com/ripgraphics/authorsinfo --skill ui-ux-pro-max-ripgraphics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ripgraphics/authorsinfo/tree/main/.cursor/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ripgraphics/authorsinfo --skill ui-ux-pro-max-ripgraphics

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 comprehensive, data-driven recommendations for product design, style, color palettes, typography, and user experience best practices.

Core Features & Use Cases

  • Design System Generation: Creates a complete design system based on project requirements, including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers implementation advice for various frontend technologies like React, Next.js, Vue, and HTML/Tailwind.
  • UX Best Practices: Provides guidance on accessibility, interaction design, and common pitfalls to avoid.
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a cohesive design system, ensuring a professional and user-friendly interface from the outset.

Quick Start

Generate a design system for a 'fintech crypto dashboard' project.

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 UI/UX design system for a new web application?

To generate a UI/UX design system, you provide your project requirements and product type. The system then outputs comprehensive recommendations for styles, color palettes, typography, and landing page patterns tailored to your specific application.

Can I get frontend implementation guidelines for my design system using React or Vue?

Yes, you can get stack-specific implementation guidelines for frameworks like React, Next.js, Vue, and HTML/Tailwind. This ensures your generated design system translates directly into functional frontend code components.

What's the best way to ensure my SaaS dashboard follows UX best practices and accessibility standards?

The best way to ensure SaaS dashboard UX best practices is to use an AI design assistant that evaluates product type and applies reasoning rules. It provides guidance on interaction design, accessibility, and common pitfalls to avoid.

Does this design system generator support saving master files and page-specific overrides?

Yes, the design system generator supports persistence by creating master design system files alongside page-specific override files. This allows you to maintain a cohesive base system while customizing individual pages.

How do chart recommendations work when designing a fintech crypto dashboard?

Chart recommendations work by analyzing your stated product type, such as a fintech crypto dashboard, and outputting data visualization patterns suited for that context. This ensures your charts align with user expectations and data clarity.

Why use an AI design assistant instead of manually picking colors and typography for a product?

Using an AI design assistant accelerates the process by leveraging a search engine and reasoning rules to provide data-driven recommendations. This ensures cohesive style, color, and typography choices based on proven UX patterns rather than guesswork.