ux
Blog · Zed · 2026-05-28

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

Zed is the new high-performance Rust IDE. Built by the team behind Atom, designed around multiplayer-by-default editing, GPU-accelerated rendering, and a first-class MCP client called the Agent Panel. Zed is excellent at code. It has nothing native for design rules. ux-skill plugs into Zed three ways and adds a deterministic design constraint layer to every AI generation.

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

Why Zed users hit the design problem differently

Zed's Agent Panel is one of the cleanest MCP host implementations available. The IDE was designed from the start to call Model Context Protocol tools, not bolted on afterward. That makes Zed unusually well-suited to ux-skill: the same MCP server that runs in Claude Desktop runs in Zed with no adaptation.

But Zed inherits the same model defaults that every other AI surface does. When you ask Zed's agent to "build a landing page," the output reverts to Inter at 90px, the canonical purple-to-blue AI gradient, three identical cards, and "Click here" CTAs. These are not Zed's choices; they are the underlying model's defaults, which Zed inherits along with the rest of its agent capabilities.

Fixing that means feeding constraints in alongside the prompt. ux-skill exposes a recommender, a generator, and a linter, all reachable from Zed through three install paths.

Three install paths in Zed

01

The MCP server path (recommended)

Zed's Agent Panel reads its MCP server list from ~/.config/zed/settings.json under the context_servers key. Add ux-skill as a stdio server pointing at the ux-mcp entry point and the 14 tools become available to the agent.

// ~/.config/zed/settings.json
{
  "context_servers": {
    "uxskill": {
      "command": "ux-mcp",
      "args": [],
      "env": {}
    }
  }
}

Best for: Zed users who already work through the Agent Panel and want the full 14-tool surface (recommender, linter, brand library, persist layer).

02

The CLI path (works in Zed's terminal pane)

Zed ships a native terminal pane. Install ux-skill with pip or npx and call the CLI directly from there. Useful when you want the linter as a pre-push gate or as a one-off pass against a directory.

$ pip install uxskill
$ ux discover # 10-field interactive brief
$ ux recommend # 5-parallel-search merge
$ ux lint ./src --threshold high # exit 1 on fingerprints

Best for: actively designing inside Zed's terminal, or running the linter as a CI step independent of the Agent Panel.

03

The pre-commit hook path (CI-grade gate)

If your Zed project already uses pre-commit, ux-skill registers as a hook that runs against staged files. The linter scans only what is about to be committed, so the average run stays under 200 milliseconds.

# .pre-commit-config.yaml
repos:
  - repo: local
    hooks:
      - id: uxskill-lint
        entry: uxskill lint --threshold high
        language: python

Best for: production projects where the linter must run on every commit, independent of which IDE the author used.

What changes when ux-skill runs in Zed

Same prompt to Zed's Agent Panel: "design a landing page for a payments platform targeting MENA SMBs." Zed alone versus Zed plus ux-skill loaded as an MCP server.

Zed alone

The fingerprints arrive on schedule.

  • Hero with Inter at 96px and line-height 1.0
  • Default purple-to-blue gradient behind the hero
  • Three identical pricing cards in equal-height grid
  • "Beautiful payments, seamlessly" hero copy
  • "Get started" and "Learn more" button pair
  • fade-in-up motion on every direct child
  • Placeholder names like Maya Iqbal not provided; model uses generic Western names instead
Zed plus ux-skill

The recommender forces a system first.

  • Recommender returns: editorial-precise plus cool-neutral plus warm accent plus Fraunces/Inter pair plus restrained motion
  • Brand spec reference: Stripe (payments) and Linear (precision)
  • Hero with Fraunces at 56-72px italic, Inter 18px body
  • Cool surface canvas, one accent color, no gradient
  • Asymmetric layout, not three identical cards
  • Hierarchy-aware motion: hero opens, supporting content cascades
  • Linter exits 1 if any of 68 regex fingerprints sneak through

The difference is not taste-by-magic. It is constraint by structure. Zed's Agent Panel still generates the code; ux-skill defines the rails it cannot drift off.

Why Zed pairs well with the MCP path specifically

Other IDEs have project-rule files (Cursor's .cursorrules, Windsurf's .windsurfrules, Copilot's .copilotrules). Zed does not lean on a project-rule file the same way. It leans on the Agent Panel's MCP client, which means the cleanest design extension is the MCP server, not a static rules file.

ux-skill v2 publishes 14 MCP tools. The Agent Panel sees all 14 the moment Zed starts. The recommender (ux_recommend) and the linter (ux_lint) are the two most commonly invoked; the rest cover catalog reads and persistence.

What ux-skill ships

For Zed users, the relevant numbers are:

How Zed differs from VS Code design extensions

VS Code has a deep extension marketplace with several design-token managers and theme builders. None of them carry the same architecture as ux-skill, but it is worth being explicit about the difference.

Zed's strength is that it understands MCP natively. That makes the engine-as-subprocess pattern feel native instead of bolted on.

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

What it does not do

Be specific about the limits:

Honesty card

About the 14-star claim

ux-skill v2 is new (v2.0.0-alpha.1 shipped recently) and solo-maintained. We do not have the install base ui-ux-pro-max-skill has. The case for installing in Zed is architecture — an MCP server with 14 tools, a 120-rule deterministic linter, 131 brand specs, cross-IDE distribution — not awareness.

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

Five minutes to working

End to end from a fresh Zed project:

  1. pipx install uxskill in Zed's terminal pane.
  2. Verify which ux-mcp returns a path.
  3. Open ~/.config/zed/settings.json, add the context_servers block from earlier.
  4. Restart Zed.
  5. In the Agent Panel, ask the agent to "use ux_recommend to pick a design system for X." The tool call fires; the recommendation lands.
  6. Ask the agent to "use ux_persist_save to write MASTER.md to the project root." The design system materializes as files.

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

Install in Zed

One MCP block. No extension required.

Zed's Agent Panel is one of the cleanest MCP host implementations available. ux-skill ships an MCP server with 14 tools; one paste into ~/.config/zed/settings.json and the engine is live.

$ pipx install uxskill
$ which ux-mcp
— then paste into ~/.config/zed/settings.json —
"context_servers": { "uxskill": { "command": "ux-mcp" } }
— or as a Claude Code plugin —
$ /plugin install ux@ux-skill