skills.rest
Clay-HHK
Clay-HHKCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates UI/UX design systems with styles, palettes, typography, and stack guidelines via a searchable CLI database.

1|Updated Mar 5, 2026
Search Tags:#typography#landing page#design system#color palette#ui design#tailwind#ux guidelines
One-click install
npx skills add https://github.com/Clay-HHK/claude-skills --skill ui-ux-pro-max-clay-hhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Clay-HHK/claude-skills/tree/main/ui-ux-pro-max
Command: npx skills add https://github.com/Clay-HHK/claude-skills --skill ui-ux-pro-max-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Designing consistent, professional UI requires choosing the right style, color palette, typography, and layout patterns, which is time-consuming and error-prone without a structured reference. This Skill provides a searchable design database that outputs complete design systems with reasoning-based recommendations. ## Core Features & Use Cases - Design System Generation: Run a single CLI query to get a complete design system (pattern, style, colors, typography, effects, anti-patterns) matched to your product type and industry. - Domain-Specific Searches: Query 10 domains including style, color, typography, charts, UX guidelines, and landing page structure, plus stack-specific guidelines for React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Persistent Design Rules: Save a MASTER.md design file with per-page overrides so design decisions stay consistent across sessions. - Use Case: When asked to build a landing page for a beauty spa, generate a design system with elegant styling, serif font pairings, and a soft color palette, then implement it with Tailwind best practices. ## Quick Start Ask the AI to design a landing page for your product and it will run the search script with --design-system to produce a complete style, color, and typography recommendation before writing the code.

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 design system for a landing page?▼

Run the search.py script with your product keywords and the --design-system flag, for example with a query like 'beauty spa wellness service'. It returns a complete recommendation covering pattern, style, colors, typography, effects, and anti-patterns to avoid.

What frameworks and stacks does this UI design tool support?▼

It provides stack-specific guidelines for html-tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui, and Jetpack Compose. Use the --stack flag with your search to get implementation-specific best practices.

How do I search for color palettes or font pairings?▼

Use the --domain flag with 'color' or 'typography' plus descriptive keywords like 'elegant luxury' or 'fintech'. The color domain covers palettes by product type such as SaaS, healthcare, and e-commerce, while typography returns Google Fonts pairings.

Does the design system persist across sessions?▼

Yes, adding --persist to the design system command creates a design-system/MASTER.md file as the global source of truth. You can also create page-specific override files under design-system/pages/ that take priority over the master rules.

What are the requirements to run the search script?▼

Python 3 is the only requirement, installed via brew on macOS, apt on Ubuntu/Debian, or winget on Windows. The script searches local CSV data files, so no external API keys or network access are needed.

When should I use detailed domain searches instead of the design system?▼

Always start with --design-system for the core recommendation, then use domain searches for supplementary needs like chart type selection, alternative fonts, landing page structure, or specific UX guidelines on animation and accessibility.

Related Skills

Explore More Design & Creative Skills→
Nir-BhayNir-Bhay
19

script-writer

Generate complete YouTube video scripts from user-defined topics and preferences.

Community
Advanced
mfang0126mfang0126

frontend-design

Guides React teams to design and implement production-grade UI with Tailwind v4 and shadcn/ui.

Community
Intermediate
sabahattinksabahattink
27

web-design-guidelines

Audit UI components for accessibility and responsive design standards.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate