Go to article
uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Home Compare Blog GitHub
Blog · Cursor · 2026-05-28

# Cursor design plugin: install ux-skill to stop generic AI design output.

Cursor users hit the same wall as Claude Code users. AI defaults produce a recognizable look. Most "Cursor design tooling" means installing a component library or paying for an AI service. ux-skill is a different shape: a Python engine that runs inside Cursor and adds design constraints to every generation.

By the ux-skill team · 7 min read · MIT-licensed open source

## How Cursor handles design today

Cursor doesn't ship native design rules. The product is excellent at code, deliberately neutral on aesthetics. When you ask Cursor to "build a landing page" or "design a dashboard," the output reverts to the model's defaults: Inter at 90px, indigo-to-blue gradient, three identical cards, placeholder testimonials like "Maya Iqbal, CEO," fade-in-up motion on everything.

These aren't Cursor's defaults. They're the underlying model's defaults, which Cursor inherits along with the rest of the model's capabilities. Fixing them means feeding constraints in alongside the prompt: either rules in `.cursorrules`, a referenced design system, or a tool that runs alongside Cursor's generation.

ux-skill takes the third path. It's a Python package (`uxskill` on PyPI, also on npm as `uxskill`) that exposes a recommender, a generator, and a linter. Cursor calls it through one of three integration paths.

## Three install paths in Cursor

01

### The .cursorrules path (fastest)

Add ux-skill's rule pack to your project's `.cursorrules` file. The 152 anti-pattern rules and the brand-spec instructions get loaded into every Cursor prompt as system instructions. No runtime dependency.

# From your project root
$ npx uxskill@alpha init --target cursor
# Generates .cursorrules with the 35 rules + brand spec references

Best for: existing Cursor projects where you want design rules without changing your toolchain.

02

### The npx wrapper path (most powerful)

Run ux-skill commands directly from Cursor's terminal pane or an integrated task. The full Python engine is wrapped behind npx, so you don't need a separate Python install. All 25 slash commands work: `discover`, `recommend`, `design`, `lint`, `fix`, `polish`.

$ npx uxskill@alpha recommend # interactive design system pick
$ npx uxskill@alpha lint ./src # 145-rule anti-slop pass
$ npx uxskill@alpha fix ./src/components # apply lint fixes

Best for: actively designing inside Cursor with the recommendation, generation, and lint lanes all available.

03

### The pip install path (CI-ready)

If your Cursor project already has Python tooling, install ux-skill as a dev dependency. The Python API is the most direct path; the `ux` CLI runs as a normal entry point. Add `ux lint --threshold high` to your pre-commit hook or CI pipeline for slop defense at commit time.

$ pip install uxskill
$ ux lint ./src --threshold high # exit 1 on high-sev fingerprints
# In .pre-commit-config.yaml or .github/workflows/*.yml

Best for: production projects with a CI pipeline. The 35 regex rules become a non-zero exit code gate.

## What changes when ux-skill runs in Cursor

Same prompt: "design a landing page for a fintech neobank." Cursor without ux-skill vs Cursor with ux-skill loaded.

Without ux-skill

The fingerprints arrive on schedule.

- Hero with Inter at 96px / line-height 1.0
- Indigo-to-blue hero gradient (the recognizable AI default)
- Three identical pricing cards, equal heights, icon-top-left
- "Beautiful banking, seamlessly" hero copy
- "Get started" + "Learn more" button pair
- fade-in-up 0.3s ease-out on every section
- Generic placeholder identities throughout the page

With ux-skill

The recommender forces a system first.

- Recommender returns: editorial-modern + a constrained palette + Bricolage/Inter pair + restrained motion
- Brand spec reference: Linear (if fintech-trust matches) or Stripe (if payments-focused)
- Hero with Bricolage at 56-72px, Inter 18px body
- Dark or warm surface, one accent color, no rainbow gradients
- Asymmetric content layout, not three identical cards
- Hierarchy-aware motion: hero opens, supporting content cascades
- Linter pass: 35 rules check the output, exit 1 if a fingerprint sneaks through

The difference isn't taste-by-magic. It's constraint by structure. Cursor still generates the code; ux-skill defines the rails it can't drift off.

## What ux-skill ships

For Cursor users, the relevant numbers are:

- 1,243 structured entries across 12 JSON manifests: styles, palettes, type pairings, motion presets, components, industry rules, chart types, tech stacks, anti-patterns, brand specs, UX laws.
- 145 deterministic regex rules in the anti-slop linter. No LLM judgment in the audit lane.
- 160 brand DESIGN.md specs. Apple, Stripe, Linear, Figma, Tesla, BMW, Notion, Spotify, and 84 more.
- 25 slash commands covering discovery, recommendation, generation, audit, polish, and handoff.
- 5 specialized sub-agents for parallel role work.
- 17 IDEs supported. Cursor is one of them. Windsurf, GitHub Copilot, Gemini Code Assist, Aider, Continue, Cline, Roo Code, Codex are others.

## Pairs well with shadcn/ui MCP and Tailwind

ux-skill doesn't ship its own component library. It's a recommender + linter, not a UI kit. In Cursor, the natural pairing is:

1. ux-skill picks the design system (style + palette + type + motion).
2. shadcn/ui MCP or Tailwind UI provides the actual component snippets in that system.
3. ux-skill's linter catches drift from the system in the generated code.

ux-skill is the brain; shadcn/Tailwind are the hands. The recommender produces a tokens file you can feed straight into `tailwind.config.js`, so the component library inherits the chosen palette and type ramp without manual wiring.

> Cursor is excellent at code. ux-skill is the constraint layer that turns "design something" into "design within these specific rules."

## What it doesn't do

Be specific about the limits:

- No live preview. ux-skill is a recommender + linter. For preview, use Cursor's normal preview workflow or pair with v0.dev / Bolt.new.
- No Figma sync in v2 (planned for v2.2). For Figma integration, use the Figma MCP and feed ux-skill's tokens.css back into the Figma file.
- Not a component library. 148 components in the catalog are descriptions of what to build, not finished snippets. Pair with shadcn/ui MCP or Tailwind UI for actual implementations.
- Not branded. ux-skill is 14 stars on GitHub. ui-ux-pro-max is 84k. If you need community momentum, install both and compose them.

Honesty card

#### About the 14-star claim

ux-skill v2 is new (v2.0.0-alpha.1 shipped a few weeks ago) and solo-maintained. We don't have the install base ui-ux-pro-max or hallmark have. The case for installing is architecture (Python engine, 1,243 entries, 145-rule deterministic linter, 160 brand specs, cross-IDE distribution), not awareness.

Install it for the linter and the brand specs. If you only need a prompt-only taste primer, taste-skill (25k stars) is also reasonable. Both are MIT.

## Five minutes to working

End to end from a fresh Cursor project:

1. `cd` into your project directory in Cursor's terminal.
2. `npx uxskill@alpha init --target cursor`: writes `.cursorrules` and seeds the brand spec references.
3. `npx uxskill@alpha discover`: answers the 10-field discovery, writes `.ux/last-discover.json`.
4. `npx uxskill@alpha recommend`: reads discovery, returns style + palette + type + motion + components, writes `tokens.css`.
5. Ask Cursor to generate inside that system. The recommendation is in `.cursorrules`; the model can't drift to defaults.
6. `npx uxskill@alpha lint ./src`: 145-rule pass. Fix any flagged lines with `ux fix`.

Total install + first generation: under five minutes. Total cost: zero. License: MIT. If you also use Claude Code, the same engine and commands work there without any extra config. See the full walkthrough at how to add a design system to Claude Code and Cursor.

Install in Cursor

## One npx command. No Python required.

The full ux-skill engine wraps behind npx, so Cursor users without a Python environment still get the recommender, 145-rule linter, and 160 brand specs.

$ npx uxskill@alpha init --target cursor
or if Python is available
$ pip install uxskill
$ ux lint ./src --threshold high
or as a Claude Code skill (if you also use Claude Code)
$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill

## Related reads

- Windsurf design rules
- Best Claude Code marketplace plugins
- Anti-AI-slop tools for Claude Code
- Python design system generator