UI/UX Design Pro Skill plugin
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
- 100 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- Reads reference data and checks interface files, no network access is needed
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/ui-ux-design-pro-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Reads reference data and checks interface files, no network access is needed
This is third-party code. Review the repository files before installing.
What it does
UI/UX Design Pro Skill gives an agent a reference library for interface design plus Bun commands to query it. The data covers 107 UI styles (glassmorphism to data brutalism), 127 industry color palettes, 107 font pairings, 150 selection rules and 150 UX guidelines, with notes for 16 stacks including React, Next.js, Vue, Nuxt, Angular, Svelte and Astro. Search runs on the Orama engine. The `generate` command turns a project description into a Markdown design system: brand colors, 50–950 shade scales, typography, components with React and Tailwind snippets and accessibility notes. `search` looks up styles, palettes and fonts, `icons` finds icons, and `audit` checks an interface file against 12 quality and accessibility rules, including typical mistakes in AI-generated code. The skill makes the agent read the reference documents before designing. It defaults to a light theme and uses a dark one only on request.
Who it is for. Designers and frontend developers who ask Claude Code or Cursor for a landing page, dashboard or SaaS interface and want a systematic design instead of a template.
Good fit when
- A fintech dashboard needs a palette, fonts and density chosen by industry
- The project wants a design system in one Markdown file with tokens and component examples
- A finished React component should be checked for accessibility and signs of AI-generated code with `audit`
- A landing page calls for browsing styles (liquid glass, bento grid, brutalism) and comparing them
Not a fit when
- An environment without Bun: the CLI runs only on it
- You need a ready Figma mockup: the skill outputs Markdown and code, not design files
- The project already follows a strict corporate design system and there is nothing new to choose
Example request
Build a design system for a fintech dashboard on Next.js with ui-ux-design-pro and check src/App.tsx with the audit commandLimitations
- The CLI needs Bun 1.0 or newer; without it `search`, `generate`, `icons` and `audit` do not run.
- The author recommends GPT-5.3 Codex or Gemini 3.0 Pro, and other models are not covered by the README.
- Style and palette data sit in CSV files in the repository and are updated only by its author.
- The audit uses 12 rules and finds common problems; it does not replace a manual accessibility review.
How to disable. Delete the `ui-ux-design-pro` skill folder from the agent's skills directory. If you installed it as a Claude Code plugin, disable it with `/plugin`.
FAQ
How do I install UI/UX Design Pro in Claude Code?
Run `npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro`. The CLI commands also need Bun: after cloning, run `bun install` in `skills/ui-ux-design-pro/cli`.
Which commands does the CLI have?
Four: `search` finds styles, palettes and fonts, `icons` finds icons, `generate` builds a Markdown design system and `audit` checks an interface file. Run it as `bun run skills/ui-ux-design-pro/cli/index.ts search "SaaS dashboard" --domain style`.
How is it different from UI UX Pro Max?
Both give an agent a library of styles and palettes and can build a design system. This one is built around a TypeScript CLI on Bun with Orama search, and `audit` checks code against 12 rules.
Which frameworks are covered?
16 stacks: React, Next.js, Vue, Nuxt, Angular, Remix, SolidJS, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose and Nuxt UI. Pass the stack to `generate` with `--stack`.
Which theme does it use by default?
Light. The skill switches to dark only when the user asks for it explicitly.
Discussion
No questions or reviews yet.
Related
PluginsA skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
45 enterprise UX skills for agents: palettes, typography, forms, WCAG accessibility and usability review of an interface.
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| UI/UX Design Pro Skill (this card) | no | 100 | |
| UI UX Pro Max | no | 148,331 | a similar skill with a style and palette library, while this one adds a Bun CLI and a 12-rule code audit |
| k-style-ui-ux | no | 400 | a plugin that drafts mobile screens in a Korean app style from a PRD |
README in short
The README opens with highlights: 107 styles, 127 palettes, 107 font pairings, 16 stacks. It continues with requirements (Bun), installation with `npx skills add`, before-and-after examples with a landing page and a dashboard, a diagram of the search engine and a table of CLI commands.
README badge
Original SKILL.md
--- name: ui-ux-design-pro description: > Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details ---