AI Agent Hub
Back to skills
🎨

UI/UX Pro Max Design Intelligence

Design & Media Updated 2026.08.30

Paste the following prompt into your AI chat to install this skill:

Please follow https://skillhub.cn/install/skillhub.md to install @org-02qudk26/ui-ux-pro-max-zh.

About this skill

What It Solves

Front-end work often fails not because the page cannot be built, but because style, palette, typography, and micro-interactions are chosen inconsistently. Landing pages can feel generic, dashboards may pair the wrong chart type with the data, and mobile screens often miss touch targets, focus states, contrast requirements, or responsive behavior. These concerns are scattered and easy to forget. ui-ux-pro-max turns UI/UX decisions into a searchable, prioritized rule set, which is useful before component design, page review, or implementation.

Core Capabilities and Workflow

It targets web and mobile UI, with 50+ styles, 97 palettes, 57 font pairings, 99 UX guidelines, and references for stacks such as html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, and shadcn.

A typical workflow is:

  • Analyze requirements: extract product type, style keywords, industry, and stack, for example SaaS dashboard, minimal dark, and react.
  • Generate the design system: start with --design-system, which searches product, style, color, landing, and typography, then returns patterns, palette, typography, effects, and anti-patterns.
  • Search domains as needed: use --domain for chart, ux, landing, or typography when adding components, charts, or alternate fonts.
  • Apply stack constraints: use stack-specific guidance for aria-label, focus-states, transform animation, and z-index layering.

Boundaries

It is best for design systems, page structure, component review, and pre-delivery checks, especially for accessibility, touch targets, contrast, and responsive layout. It is not an image generator and does not replace business judgment, brand strategy, or real user testing. For strongly branded projects, prioritize existing brand guidelines and use the skill to validate reusable palette, typography, and interaction rules.

Use Cases

  • Choose a dark style, palette, and typography for a marketing landing page, then generate a practical design system.
  • Review frontend components for touch targets, focus states, contrast, and async loading-button feedback.
  • Select chart types and accessible palettes before building dashboards for trend or funnel data.
  • Apply accessibility rules in responsive web projects, including form labels, alt text, keyboard navigation, and motion preferences.

Best For

  • Front-end engineers building marketing pages: need to choose style, palette, and landing-page structure quickly in responsive projects.
  • Product designers building admin dashboards: need to map trend, comparison, and funnel data to suitable charts and accessible palettes.
  • Engineers reviewing mobile UX: need to check 44px touch targets, focus states, error feedback, and keyboard navigation.
  • Designers building SaaS websites: need to select professional or elegant styles, font pairings, and avoid anti-patterns.