A community-driven registry for the Claude Code ecosystem. Not affiliated with Anthropic.
Are you the author? Sign in to claim
AI spairings, 150+ reasoning rules, CLI, and 18 platform templates. Works with Claude, Cursor, Windsurf, Copilot, Antigr
A senior-level AI skill that provides data-driven design intelligence for building premium, production-grade UI/UX across multiple platforms and frameworks. Powered by a blazing fast Bun CLI, Orama Search Engine, 16 tech stacks, and 1,875+ data rows.
For best results, use GPT-5.3 Codex xhigh or Gemini 3.0 Pro.
| Requirement | Version | Purpose |
|---|---|---|
| Bun | 1.0+ | Required runtime for the CLI and Orama search engine |
# macOS / Linux / WSL
curl -fsSL https://bun.sh/install | bash
# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"
npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro
# Clone the repository
git clone https://github.com/saifyxpro/ui-ux-design-pro-skill.git
cd ui-ux-design-pro-skill
# Install dependencies
cd skills/ui-ux-design-pro/cli
bun install
See the difference the skill makes — same prompt, with and without UI/UX Design Pro:
| Without Skill | With Skill |
|---|---|
 |  |
| Generic layout, basic colors, default spacing | Premium typography, refined palette, professional hierarchy |
Generated in a single prompt using the skill's design system CLI + "Warmth & Approachability" direction:
Prompt: "Generate a Warm Creative SaaS landing page using the design CLI"
Design Direction: Warmth & Approachability · Primary:
#FF6B35(Coral) · Fonts: Fraunces + Plus Jakarta Sans · Radius: 24-32px
Prompt: "Generate a Finance Command Center dashboard"
Design Direction: Precision & Density · Primary:
#C2E045(Lime) · Font: Inter · Radius: 16-24px
The flagship feature is the Design System Generator — an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in Beautiful Markdown.
# Design System: SaaS Launch
> **Query**: "Modern SaaS Platform" | **Tech Stack**: Next.js | **Generated**: 2/18/2026
## 1. Brand Identity
- **Primary Color**: `#7C3AED` (Violet)
- **Typography**: **Inter** (Headings & Body)
## 2. Component Library
### Primary Button
**Usage:** Main call-to-action actions
**Variants:** Default, Hover, Active, Disabled
**CSS Variable:** `--radius-md`
> [!TIP]
> **Best Practice**: Use only one primary button per screen to maintain clear hierarchy.
> [!NOTE]
> **Accessibility**: Ensure 4.5:1 contrast. Use `aria-label` if icon-only.
```tsx
<button className="bg-violet-600 hover:bg-violet-700 text-white px-6 py-2 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-violet-300">
Get Started
</button>
Usage: Top of landing page Variants: Centered, Split, With Image
Description: A high-conversion hero with clear value proposition and social proof.
### How It Works
```text
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a fintech analytics dashboard" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. ORAMA SEARCH ENGINE (Sub-50ms) │
│ • Product type matching (96 categories) │
│ • Style recommendations (107 styles) │
│ • Color palette selection (127 palettes) │
│ • Typography pairing (107 font combinations) │
│ • Industry reasoning (131 rules) │
│ • UX guidelines (129 guidelines) │
│ • Tech stack guidelines (16 frameworks) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. MARKDOWN OUTPUT │
│ Brand Identity + Architectural Color Palettes (50-950) │
│ + Typography Scale (px/rem) + Tech Stack Guidelines │
└─────────────────────────────────────────────────────────────────┘
All features are accessible via the bun run command:
| Command | Purpose |
|---|---|
search | Orama fuzzy search across all 11 design databases |
generate | Full design system generator (Markdown/JSON output) |
icons | Search popular icon libraries and get CDN links |
audit | UI code quality and accessibility auditor (12 rules) |
| # | Style | Best For |
|---|---|---|
| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation |
| 2 | Neumorphism | Health/wellness apps, meditation platforms |
| 3 | Glassmorphism | Modern SaaS, financial dashboards |
| 4 | Brutalism | Design portfolios, artistic projects |
| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive |
| 6 | Vibrant & Block-based | Startups, creative agencies, gaming |
| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms |
| 8 | Accessible & Ethical | Government, healthcare, education |
| 9 | Claymorphism | Educational apps, children's apps, SaaS |
| 10 | Aurora UI | Modern SaaS, creative agencies |
| ... | + 97 more styles | See data/styles.csv for full list |
Includes: Liquid Glass, Aurora Borealis, Data Brutalism, Cyberpunk UI, Organic Biophilic, AI-Native UI, Spatial UI (VisionOS), Chromatic Aberration, Interactive Cursor Design, Voice-First Multimodal, and 30+ more.
All scripts are accessible via the generated CLI.
# Search across all design databases
bun run skills/ui-ux-design-pro/cli/index.ts search "SaaS dashboard" --domain style
# Search for icons
bun run skills/ui-ux-design-pro/cli/index.ts icons "arrow"
# Generate full design system (Markdown)
bun run skills/ui-ux-design-pro/cli/index.ts generate "fintech dashboard" --stack nextjs --output design.md
# Audit UI code quality
bun run skills/ui-ux-design-pro/cli/index.ts audit src/App.tsx
To verify the audit command detects modern AI hallucinations, run the included test suite:
bun run skills/ui-ux-design-pro/cli/index.ts audit test/audit_fail.tsx (Expect errors) -> See Reportbun run skills/ui-ux-design-pro/cli/index.ts audit test/audit_pass.tsx (Expect success) -> See Report🔴 L5 [AI001] Tailwind interpolation detected
🟡 L9 [AI005] Hallucinated utility "text-shadow"
🟡 L12 [AI008] Low contrast pseudo-transparency
🟡 L18 [AI013] h-screen causes layout shifts
🟡 L21 [AI015] target="_blank" validation missing
Included in the generation logic:
| Preset | Primary | Font | Radius |
|---|---|---|---|
fintech | #2563EB | Inter | 8px |
healthcare | #059669 | Source Sans Pro | 12px |
ecommerce | #DC2626 | Poppins | 8px |
saas | #7C3AED | Inter | 12px |
education | #2563EB | Nunito | 16px |
gaming | #EF4444 | Orbitron | 4px |
luxury | #1E293B | Playfair Display | 0px |
startup | #8B5CF6 | DM Sans | 12px |
ui-ux-design-pro-skill/
├── skills/ # AI Skill Definitions
│ └── ui-ux-design-pro/
│ ├── cli/ # Unified CLI (Bun/TypeScript)
│ │ ├── index.ts # Entry point
│ │ ├── commands/ # Search, Generate, Audit, Icons
│ │ ├── lib/ # Orama search, formatters
│ │ └── data/ # 27 CSV databases (1,875+ rows)
│ ├── SKILL.md # Main prompt instructions
│ └── references/ # 11 design methodology docs
├── test/ # Verification tests
├── examples/ # Before/After examples
├── public/ # Static assets
├── .gitignore
├── LICENSE
└── README.md
This project is licensed under the MIT License.
1000+ skills curated from Anthropic, Vercel, Stripe, and other engineering teams
@user_bdd01887CommunityDesign enforcement with memory — keeps your UI consistent across a project
Universal SEO skill for Claude Code. 25 sub-skills + 18 sub-agents covering technical SEO, E-E-A-T, schema, GEO/AEO, bac
Route Claude Code traffic to any of 17 provider backends including free or local models
