🎨 UI/UX Design Pro Skill (2026 Edition)
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.
Highlights
- 107+ UI Styles — Glassmorphism, Liquid Glass, Data Brutalism, Spatial UI, Cyberpunk, AI-Native, and 100+ more
- Architectural Palettes — 11-step (50-950) color scales with semantic variations (Neutral, Success, Warning, Error)
- 107+ Font Pairings — Curated typography combinations with Google Fonts imports and mood keywords
- 127+ Color Palettes — Industry-specific palettes for SaaS, Fintech, Healthcare, E-commerce, Beauty, and more
- 150+ Reasoning Rules — Industry-specific design system generation with anti-patterns
- 150+ UX Guidelines — Best practices covering accessibility, animation, forms, and more
- Developer-Ready Output — Generates React/Tailwind code snippets and WCAG accessibility notes
- 16 Tech Stacks — React, Next.js, Vue, Nuxt.js, Angular, Remix, SolidJS, Svelte, Astro, and more
- Unified CLI — Search, audit, icons, and generation tools in a single TypeScript application
- 11 Reference Docs — Intent-first design methodology
Recommended Models
For best results, use GPT-5.3 Codex xhigh or Gemini 3.0 Pro.
Prerequisites
| Requirement | Version | Purpose |
|---|---|---|
| Bun | 1.0+ | Required runtime for the CLI and Orama search engine |
Install Bun
# macOS / Linux / WSL
curl -fsSL https://bun.sh/install | bash
# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"
Installation
Quick Install (Recommended)
npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro
Manual Installation
# 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
Before & After
See the difference the skill makes — same prompt, with and without UI/UX Design Pro:
Landing Page (Example 01)
| Without Skill | With Skill |
|---|---|
 |  |
| Generic layout, basic colors, default spacing | Premium typography, refined palette, professional hierarchy |
SaaS Landing Page (Example 02) — One-Shotted with Skill
Generated in a single prompt using the skill's design system CLI + "Warmth & Approachability" direction:
View Generated Result (One-Shot)
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
Finance Command Center (Example 03)
View Generated Result
Prompt: "Generate a Finance Command Center dashboard"
Design Direction: Precision & Density · Primary:
#C2E045(Lime) · Font: Inter · Radius: 16-24px
Features
Intelligent Design System Generation
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`