ui-ux-pro-maxUI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Install via ClawdBot CLI:
clawdbot install xobi667/ui-ux-pro-maxFollow these steps to deliver high-quality UI/UX output with minimal back-and-forth.
Ask only what you must to avoid wrong work:
If the user says "全部都要" (design + UX + code + design system), treat it as four deliverables and ship in that order.
Always be concrete: name components, states, spacing, typography, and interactions.
This skill bundles data you can cite for inspiration/standards.
skills/ui-ux-pro-max/assets/data/ when you need palettes, patterns, or UI/UX heuristics.skills/ui-ux-pro-max/references/upstream-skill-content.md.If you need to quickly generate tokens and page-specific overrides, use the bundled script:
python3 skills/ui-ux-pro-max/scripts/design_system.py --helpPrefer running it when the user wants a structured token output (ASCII-friendly).
Generated Mar 1, 2026
Redesigning an e-commerce website to improve conversion rates and user experience, focusing on product discovery, checkout flow, and mobile responsiveness. The skill helps generate UI layouts, UX flows for cart and payment, and implement design tokens for consistency across platforms.
Enhancing a SaaS application dashboard to increase user engagement and data visualization clarity. This involves refining information architecture, creating accessible component specs, and providing code changes for React or Vue-based interfaces with Tailwind CSS.
Conducting an accessibility audit for a mobile banking app to ensure WCAG AA compliance, focusing on keyboard navigation, contrast ratios, and error states. The skill guides the production of design system tokens and concrete implementation plans for iOS and Android.
Mapping user journeys for a healthcare patient portal to streamline appointment booking and medical record access. The skill assists in creating UX flows, improving existing UI with visual style direction, and generating component guidelines for web and desktop platforms.
Building a design system from scratch for an educational platform to ensure brand consistency and scalability. This includes generating color and typography tokens, defining component rules, and providing implementation plans for Next.js or Svelte frameworks.
Offering UI/UX design services on a project basis, using this skill to deliver high-quality deliverables like UI concepts and implementation plans. Revenue is generated through hourly rates or fixed project fees, targeting small to medium businesses.
Integrating this skill into a SaaS tool that automates UI/UX design recommendations and code generation for developers. Revenue comes from subscription tiers, with additional income from enterprise customization and support services.
Providing ongoing UI/UX support as part of a retainer agreement with clients, using the skill for continuous improvement and design system maintenance. Revenue is stable through monthly retainers, often supplemented by one-off project work.
💬 Integration Tip
Integrate this skill by first triaging user needs to avoid scope creep, then leveraging bundled assets for inspiration and using the optional script for quick design system generation in ASCII format.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.