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

The .cursorrules path (fastest)

Add ux-skill's rule pack to your project's .cursorrules file. The 120 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.

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 22 slash commands work: discover, recommend, design, lint, fix, polish.

$ npx uxskill@alpha recommend # interactive design system pick
$ npx uxskill@alpha lint ./src # 120-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.

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,182 structured entries across 11 JSON manifests — styles, palettes, type pairings, motion presets, components, industry rules, chart types, tech stacks, anti-patterns, brand specs, UX laws.
120 deterministic regex rules in the anti-slop linter. No LLM judgment in the audit lane.
131 brand DESIGN.md specs. Apple, Stripe, Linear, Figma, Tesla, BMW, Notion, Spotify, and 84 more.
22 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:

ux-skill picks the design system (style + palette + type + motion).
shadcn/ui MCP or Tailwind UI provides the actual component snippets in that system.
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,182 entries, 120-rule deterministic linter, 131 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:

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

Total install + first generation: under five minutes. Total cost: zero. License: MIT.