What is the ui-ux-design-pro skill?
The ui-ux-design-pro skill is a SKILL.md in the saifyxpro repository that pushes an AI coding agent to design from intent instead of defaults. It requires reading twelve reference files first, and ships a Bun CLI that searches design data, generates a design system and audits UI code.
The ui-ux-design-pro skill opens with a blunt warning to the agent: you will generate generic output. Its SKILL.md then lists twelve reference files, from design directions to a critique protocol, that must be read before any UI is proposed or built.
The skill sits at skills/ui-ux-design-pro in the saifyxpro repository. Beside the prompt it carries a Bun and TypeScript CLI with CSV design data, so the agent can look up styles and palettes instead of improvising them.
The intent gate before any code
The skill asks three questions out loud before anything is built: who is this human, what must they accomplish, and what should it feel like. If the agent cannot answer with specifics, it is told to ask you.
- Explore the domain: at least five concepts from the product's world, plus five or more colors that exist naturally there.
- Name one signature element that could only exist for this product.
- List three obvious defaults for this interface type and say what replaces each.
- Propose a direction that references all four outputs, then confirm it with you before building.
- State a component checkpoint covering intent, palette, depth, surfaces, typography and spacing every time UI code is written.
The CLI and its data
Everything runs through one Bun entry point. The README describes data on styles, palettes, fonts, products, icons and 16 tech stacks, searched with Orama.
| Command | What it does |
|---|---|
| search | Searches the design databases, for example by style domain |
| generate | Builds a design system for a query and tech stack, as Markdown or JSON |
| icons | Searches icon libraries and returns CDN links |
| audit | Checks UI code quality and accessibility against 12 rules |
The README counts 107+ UI styles, 127+ color palettes, 107+ font pairings and 150+ reasoning rules. Treat those as the project's own figures, since the page also gives slightly different counts in other places.
Design rules it enforces
- Light mode is the default. Dark mode appears only if you ask for it, and pure black backgrounds are avoided in favor of #0a0a0a or #121212.
- Tokens trace to primitives: four text levels and four border levels, with names that sound like the product, such as an ink token and not a gray-700.
- Choose one depth strategy and commit: borders only, subtle shadows, layered shadows or surface shifts. Do not mix them.
- Every interactive element needs default, hover, active, focus and disabled states, and data needs loading, empty and error states.
- Motion stays fast, 150ms for micro-interactions and 250ms for modals, uses transform and opacity, and respects prefers-reduced-motion.
- Accessibility means WCAG 2.2 AA, 4.5:1 text contrast, keyboard access for every action and 44pt touch targets.
For deeper color and token work, see color-system and design-token. After finishing, the agent runs swap, squint, signature and token tests on its own output.
Who the ui-ux-design-pro skill is for
Best for
- Dashboards, SaaS apps, settings pages and landing pages where generic AI output is the main risk.
- Generating a first design system from a product description, then refining it by hand.
- Auditing UI code with the CLI for hallucinated utilities and accessibility slips.
- Teams happy to run Bun, since the CLI needs version 1.0 or later.
Not for
- Quick one-off tweaks. The skill insists on reading all references first, which is heavy for a small edit. For a lighter route, see ui-ux-pro-max.
- Machines without Bun, because the CLI and search engine depend on it.
- Formal accessibility certification. The audit has 12 rules and is not a full compliance review. See accessibility-audit.
Use it with UiChemy
This skill produces design direction and React and Tailwind snippets, not WordPress pages. Use it to settle palette, type and layout in Figma, then convert the frames with UiChemy Figma to WordPress.
You can also paste the generated design system into UiChemy Composer as the brief, since Composer writes real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install UI/UX Design Pro Skill: Intent-First Design for AI Agents
git clone https://github.com/saifyxpro/ui-ux-design-pro-skill.gitInstall Bun
The CLI needs Bun 1.0 or later. The README gives
curl -fsSL https://bun.sh/install | bashfor macOS, Linux and WSL, and a PowerShell command for Windows.Clone the repository
Run
git clone https://github.com/saifyxpro/ui-ux-design-pro-skill.git. The skill sits in the skills/ui-ux-design-pro folder.Install CLI dependencies
Run
cd ui-ux-design-pro-skill/skills/ui-ux-design-pro/cli, thenbun install.Copy the skill folder
Copy skills/ui-ux-design-pro, with its cli and references folders, to wherever your AI coding agent loads skills from. Then ask for a dashboard, a landing page or a design system.
Check that it loaded
Run bun run skills/ui-ux-design-pro/cli/index.ts search "SaaS dashboard" --domain style from the repository root. Then ask the agent for a dashboard. It should state its intent and signature element before writing code.
Key features
- Mandatory reference readingSKILL.md lists twelve reference files covering directions, tokens, color, typography, spacing, depth, components, motion, patterns, accessibility, cognitive principles and critique.
- Intent first workflowThe agent answers who the person is, what they must do and how it should feel, then explores domain, color world, signature and rejected defaults.
- Component checkpointEach time UI code is written, the agent states intent, palette, depth, surfaces, typography and spacing with a reason for each choice.
- Token architectureColors trace to foreground, background, border, brand and semantic primitives, with four text levels and four border levels.
- Design system generatorThe generate command builds a Markdown or JSON design system from a query and a tech stack, with tokens, components and accessibility notes.
- Searchable design dataThe README lists 107+ styles, 127+ palettes, 107+ font pairings and 150+ reasoning rules, searched through an Orama based command.
- Code audit commandThe audit command checks UI code for issues such as Tailwind interpolation, hallucinated utilities and low contrast pseudo-transparency, using 12 rules.
- Sixteen tech stacksStack guidance covers frameworks such as React, Next.js, Vue, Nuxt.js, Angular, Remix, SolidJS, Svelte and Astro.
- Self critique checksSwap, squint, signature and token tests run before the agent shows its work, and any failed check means another iteration.
- Real world patternsA reference documents 10 patterns from shipped landing pages, including frosted nav, bento grid, staggered entry and brand shadows.
Frequently asked questions
What is the ui-ux-design-pro skill?
It is a skill in the saifyxpro/ui-ux-design-pro-skill repository for premium, data-driven UI and UX work. A SKILL.md sets an intent-first process and design rules, and a Bun CLI adds search, design system generation, icon lookup and a code audit.
How do I install the ui-ux-design-pro skill?
Install Bun 1.0 or later, clone the repository, run bun install inside skills/ui-ux-design-pro/cli, and copy the skill folder into your agent's skills location. The README also lists a one-line skills CLI route, but the manual route is documented step by step.
Which AI coding agents can use the ui-ux-design-pro skill?
The repository topics mention claude, copilot and cursor, and the README recommends GPT-5.3 Codex or Gemini 3.0 Pro for best results. It does not publish a tested list per tool, so try the folder in your own agent and check the CLI runs.
Does the skill require Bun?
Yes for the CLI. The README lists Bun 1.0 or later as the required runtime for the CLI and the search engine. The SKILL.md rules and reference files are plain text, but the search, generate and audit commands depend on Bun.
What does the audit command check?
It checks UI code quality and accessibility against 12 rules. The README shows sample findings for Tailwind interpolation, a hallucinated text-shadow utility, low contrast pseudo-transparency, h-screen layout shifts and a missing target blank check. It is a quick lint, not a full audit.
Does it default to dark mode?
No. SKILL.md says to prefer Light Mode by default and use Dark Mode only when you explicitly ask. For dark designs it advises against pure black backgrounds, suggesting #0a0a0a or #121212, with higher surfaces slightly lighter. See also dark-mode-design.
Why does it read so many reference files first?
The SKILL.md argues that generic output comes from habit, so it requires reading every reference file before proposing any UI. This adds time on each task, which is why it suits full pages and systems more than tiny edits.
What license does the ui-ux-design-pro skill use?
GitHub lists the saifyxpro/ui-ux-design-pro-skill repository as MIT, and the README says the project is licensed under the MIT License with a LICENSE file. Read that file before you redistribute the skill folder inside a product.