skills.rest
4asaanAI
4asaanAICOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems, components, and visual assets for web and mobile products.

Updated Aug 23, 2026
Search Tags:#branding#accessibility#tailwind#ui-ux#design-system#shadcn#logo
One-click install
npx skills add https://github.com/4asaanAI/Claude-patches --skill ui-ux-pro-max-4asaanai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/4asaanAI/Claude-patches/tree/main/framework-foundry/Claude%20Plugins/ui-ux-pro-max-skill-main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/4asaanAI/Claude-patches --skill ui-ux-pro-max-4asaanai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, pillow, and includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the time, guesswork, and inconsistency of designing and implementing accessible, responsive, and brand-consistent user interfaces across web and mobile by producing complete design systems, component code, and visual assets.

Core Features & Use Cases

  • Design system generation: semantic tokens, Tailwind config, component token mappings, and persistent MASTER/page-level overrides for project-specific rules.
  • Component library & implementation: shadcn/ui + Tailwind-ready accessible components, responsive layouts, dark mode, and code examples for React ecosystems.
  • Accessibility & UX audits: prioritized checklists for contrast, keyboard navigation, forms, focus management, and performance-driven recommendations.
  • AI asset generation: logo, icon, banner, and CIP mockup generation with scripts and exportable deliverables (requires optional Gemini API).
  • Marketing & presentation assets: platform-optimized banners, HTML slide decks with Chart.js, and multi-format exports for social or print.
  • Use case example: generate a complete fintech SaaS design system, implement a responsive landing page with accessible components, and produce a logo and social banners for launch.

Quick Start

Generate a complete design system, responsive landing page components, and a brand palette for a fintech SaaS including accessibility checks and exportable assets.

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 with Tailwind and shadcn/ui?▼

Generate a complete design system by producing semantic tokens, Tailwind configurations, and shadcn/ui component mappings. This creates accessible, responsive UI components with persistent overrides for project-specific rules.

How do I run an accessibility audit on my web or mobile UI components?▼

Run an accessibility audit to receive prioritized checklists for contrast, keyboard navigation, forms, and focus management. This identifies UX issues and provides performance-driven recommendations for your components.

Can I generate logos and marketing banners using Python scripts?▼

Yes, you can generate logos, icons, and banners using Python scripts. This requires Python 3.8+ and an optional Gemini API key to produce exportable visual assets for marketing campaigns.

Does this UI/UX design tool work for both web dashboards and mobile apps?▼

Yes, this UI/UX design tool works for web dashboards, admin panels, e-commerce sites, and mobile apps. It generates responsive layouts, dark mode support, and accessible component code for both platforms.

What is the best way to create a tokenized design system for a SaaS product?▼

The best way to create a tokenized design system is to define semantic tokens and component mappings. This ensures brand consistency across your SaaS product by applying persistent page-level overrides.

Do I need a Gemini API key to generate UI components and design systems?▼

No, a Gemini API key is only required for AI asset generation like logos and banners. You can generate complete design systems and accessible UI components without needing the API key.

Related Skills

Explore More Design & Creative Skills→
12valor12valor
1

imagen

Generate images from text prompts using the Google Gemini API.

Community
Basic
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
wachawowachawo

ckm:slides

Generate responsive HTML presentation decks with Chart.js visualizations.

Community
Intermediate
CJ-1981CJ-1981

moai-design-tools

Fetch Figma design context and export Pencil designs to React and Tailwind CSS code.

Community
Advanced