How to Install the Designer Claude Plugin (Cowork & Code)

Don't want to install anything? You don't have to. The Claude Cowork playbook for designers hosts all four workflows as Claude-native prompts you can paste directly into a Claude Project. Same outputs, more typing. The plugin just makes them slash commands.

The Designer Claude plugin from The AI Career Lab is the fastest way to turn Claude into a design-aware co-worker. It bundles 4 pre-built slash commands and 2 auto-activating skills that already know what working designers actually do — DESIGN.md capture, WCAG 2.2 critique, locked iteration, and dev handoff spec generation — so you stop writing prompts from scratch every time you need to ship a routine design artifact.

The plugin works in both runtimes Claude offers:

• Claude Cowork — the chat product at claude.ai. The easiest path. No terminal, no install of anything else. Requires a paid Claude plan (Pro, Max, Team, or Enterprise) to access plugins.
• Claude Code — the terminal CLI for power users and developers. Requires Node.js + npm. Free or paid Claude account both work.

This guide walks through the install in five minutes for whichever runtime you prefer. No coding background required either way.

What this plugin gives you

A normal Claude session is a blank chat window. You type what you want, Claude responds. That works, but it puts the burden of prompt engineering on you, and the output quality varies based on how much detail you remember to include.

A plugin replaces that loop with slash commands — pre-built shortcuts that already contain the structure, formatting rules, and design conventions for a specific task. Instead of remembering how to ask for an accessibility critique, you type one command and answer the questions Claude asks.

In this plugin you get:

• /design-system — captures brand colors, typography, spacing, and component patterns into a complete DESIGN.md ready for Claude Design and other AI design sessions
• /design-critique — evaluates a design against WCAG 2.2 accessibility, brand consistency, and layout principles with SC-level citations
• /design-iterate — plans token-efficient batch iterations: which slots to lock, what to vary, target outputs
• /design-export — generates dev-handoff specs: component inventory, design tokens, interaction states, redlines, ARIA spec

Which runtime should you use?

Use Claude Cowork if:

• You already use claude.ai for chat work
• You prefer a graphical interface to a terminal
• You don't want to install anything else on your machine
• You have a paid Claude plan (Pro, Max, Team, or Enterprise)

Use Claude Code if:

• You're already comfortable in a terminal
• You want to use Claude alongside other developer tools (especially if you're collaborating with engineers on the same machine)
• You're on a free Claude account (Claude Code plugin install does not require a paid plan)
• You want the option to script and automate workflows around the plugin

The plugin commands and skills are identical across both runtimes. The choice is purely about which interface fits your workflow.

Path A: Install in Claude Cowork (easiest, no command lines)

Claude Cowork is entirely UI-based. You don't type any slash commands to install plugins — you click.

1. Open claude.ai in your browser and sign in.
2. Make sure you're on a paid plan (Pro, Max, Team, or Enterprise). The plugin marketplace is gated to paid plans.
3. Open the plugin settings and click Add marketplace.
4. In the modal, paste this into the URL field:

alexclowe/awesome-claude-cowork-plugins

5. Click Sync. Claude Cowork pulls the marketplace catalog from the public alexclowe/awesome-claude-cowork-plugins repo.
6. Browse the marketplace. Find the Designer plugin in the list and click Install next to it.

That's it. The commands and skills are now available in your Cowork chats. No terminal, no Node.js, no slash commands to type.

Path B: Install in Claude Code (terminal CLI, two commands)

Claude Code is the terminal CLI for Claude. It's free (no paid plan required for plugin install) but requires a one-time setup if you've never used it before.

One-time Claude Code setup

1. Install Claude Code. Open a terminal and run:

npm install -g @anthropic-ai/claude-code

If you don't have npm, install Node.js first (download the LTS version, run the installer).

2. Sign in once. Run claude in your terminal and follow the sign-in flow.

Install the plugin

Inside Claude Code, run these two commands:

/plugin marketplace add alexclowe/awesome-claude-cowork-plugins
/plugin install designer@awesome-claude-cowork-plugins

The first command registers the marketplace catalog; the second installs the Designer plugin by name from it. You only need to run marketplace add once — after that, installing additional plugins from the same marketplace is a single install command.

To verify, type /help and you should see the new commands listed alongside Claude Code's built-ins.

Your first command

After install, the most useful command to try first is the one that unblocks every other workflow:

/design-system

When you run it, Claude will ask for your brand context — adjectives the brand must feel, adjectives it must never feel, current state (existing style guide, Figma file, or starting from scratch), and the design system base (Material 3, Radix, custom). It returns a complete DESIGN.md you upload to your Claude Project so every subsequent design session starts with that brand loaded.

This is the artifact that turns Claude Design output from "generic AI layout" into "something that actually looks like your brand."

First 4 workflows to try after install

Once the plugin is installed, these are the workflows worth running this week — each one maps to a real design artifact you produce regularly.

1. Brand-system capture — /design-system in the plugin. Browse the DESIGN.md library for production-ready templates by project type.
2. WCAG 2.2 accessibility critique — /design-critique in the plugin. Catches contrast, focus-visible, and ARIA gaps before handoff.
3. Token-efficient iteration — /design-iterate in the plugin. Locks what's decided and varies only the dimension you're exploring.
4. Dev handoff spec — /design-export in the plugin. Component anatomy, token map, interaction states, ARIA APG references.

The full prompt structure for each workflow is documented in the Claude Cowork playbook for designers — useful for understanding what the slash commands do and customizing them for your team's conventions.

Skills you get for free

This plugin also includes Claude Skills that activate automatically when you're working on relevant tasks — no command required, no extra prompting:

• Brand Voice Design — maintains consistent visual + verbal tone across outputs and resists generic Claude Design defaults
• Accessibility Audit — WCAG 2.2 contrast, focus states, keyboard nav, screen reader semantics — flagged before you ship the design to engineering

Skills are the part of the plugin that makes Claude feel like a co-worker who already knows your job. The first time the accessibility skill auto-activates while you're iterating on a layout and flags a 1.4.11 non-text contrast failure on an icon button, you'll understand the difference between using Claude generically and using Claude as a designer's co-worker.

Where to go from here

Once the plugin is installed and you've run your first command, the next thing to do is set up Claude as a real co-worker — not just a one-off command runner. That means giving it your DESIGN.md, your component inventory, and the references it should cite.

• Claude Cowork playbook for designers — the full setup guide for using Claude as your daily design co-worker, including five high-leverage workflow prompts. This is the document that turns the plugin from a shortcut into a sustained workflow.
• Designers profession hub — pain points, AI use cases, and weekly newsletter for working designers.
• Best AI Tools for Designers in 2026 — the broader landscape of AI tools that make sense for designers in 2026, including Claude Design, Figma's native AI, and the accessibility toolchain.
• Designers After AI hub — the survival guide for working designers in the Claude Design era.

Common issues

I don't see the "Add marketplace" option in Claude Cowork. You need to be on a paid plan (Pro, Max, Team, or Enterprise). Plugin install is gated to paid plans in Cowork. If you're on a free plan, install via Claude Code instead — it's free.

The marketplace sync failed in Claude Cowork. Double-check the URL field has exactly alexclowe/awesome-claude-cowork-plugins — a GitHub owner/repo format, no https://, no trailing slash. Click Sync again.

The Claude Code marketplace add command failed. Make sure Claude Code is updated to the latest version (npm install -g @anthropic-ai/claude-code will update it). The plugin marketplace feature is built into recent versions; older versions don't have it.

The slash commands aren't showing up after install. Start a new chat (Cowork) or type /help (Claude Code). If you see the built-in commands but not the new ones, the install didn't complete — re-run the install and watch for error output.

I want to use this without installing anything. Use the Claude Cowork playbook for designers directly — it hosts the same prompt structures as Claude-native prompts you can paste into any Claude Project.

Try it without installing

If neither install path is appealing for a first try, the Claude Cowork playbook for designers hosts all four workflow prompts in full. Paste them into a Claude Project with your DESIGN.md loaded and you get the same outputs the plugin produces — just more typing.

Create your free AI Career Lab account to access the playbook, the DESIGN.md library, and the weekly designer AI digest. No credit card required.

---

This article is general guidance for designers. Accessibility standards (WCAG 2.2) evolve over time; the W3C WCAG 2.2 Understanding Docs are the authoritative reference for current success criteria.