UI/UX Pro Max Design Intelligence
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, andreact. - Generate the design system: start with
--design-system, which searchesproduct,style,color,landing, andtypography, then returns patterns, palette, typography, effects, and anti-patterns. - Search domains as needed: use
--domainforchart,ux,landing, ortypographywhen adding components, charts, or alternate fonts. - Apply stack constraints: use stack-specific guidance for
aria-label,focus-states,transformanimation, andz-indexlayering.
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.
Related Skills
Generate an interactive HTML product detail page from images and copy, with multi-product carousel, inline text editing, design controls, and PDF/JPG/PSD export support.
Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.
Generate and validate JianYing drafts from storyboard JSON with narrated commentary, original-sound preservation, timing checks, and draft inspection.
Restyle a short video into a new visual style while preserving core elements such as characters, actions, and composition, suitable for various creative conversions like anime, illustration, ink wash, etc.