Connect your coding agent to your design system

DS Manager is now an MCP server. Connect Claude Code, Cursor, Codex, Claude.ai or Claude desktop to it, and your agent can read and change your shadcn design system while you watch the editor update. It stops at your Lint locks. It brings in project themes and Figma design systems as reviews you apply, it pushes and pulls values with the shadcndesign Figma kit, and it installs the published system into your project.

The MCP server is part of Pro and Lifetime, and Free accounts can try it with 50 edits.

Restyle a system from your agent

Ask for a change in plain words, for example "make the brand orange and round the corners more". The agent reads your system, then changes tokens, fonts, radius, spacing and component styles. It also checks contrast on the pages it touched, with failing pairs listed first. Each change lands in the editor as it happens. The whole run shows as one banner, "Claude changed 24 values" for example, with an Undo button that takes back the run in one step.

Lint locks still apply. When you've locked a style, the agent gets the same message the in-app agent does, such as "Locked. Agents can't change Color on Button.", and tells you. Only you can change or remove a lock, in DS Manager. Agents also can't delete components.

Push to and pull from the shadcndesign Figma kit

If you use the shadcndesign Figma kit 3.0 or newer, your agent can keep the kit and DS Manager in step:

• Pull brings changes from the kit's variables into DS Manager as a review you apply.
• Push writes your DS Manager values into the kit's variables after you confirm them on a review page.
• Undo puts back what the last push overwrote.

The agent does this through Figma's own MCP server, so DS Manager never connects to your Figma account. Pushing needs a paid Figma plan with a Full seat; pulling works on a Dev seat. A push changes the kit's existing variables only. Tablet and Mobile values, added variants and custom components stay in DS Manager, and the review page lists them under "Not in the kit".

Run the sync from the file that holds the kit's variables. A product file that only uses the kit as a library is refused.

Convert another Figma design system

If your design system lives in a different Figma file, such as Untitled UI or your company's library, give the agent the file's link and ask it to convert it. It reads the theme colors, extra colors, fonts, radius, shadows, spacing and the components that match a shadcn component. Converting into a new system creates it right away. Converting into an existing one opens a review page first. Components with no shadcn match are listed as left out, so you know what still needs building.

Start from a website or your own project

Ask the agent to build a system from a site you like, and it sets the colors, fonts and radius in a new system you keep editing by hand.

If you already have a shadcn/ui project, ask the agent to import it. It reads components.json, globals.css, your Tailwind config, the fonts in your root layout and your components/ui files. DS Manager shows every change on a review page before anything is saved. Your code is read, never run.

Build the components shadcn/ui doesn't ship

Describe a component the kit doesn't have, like a pricing table or a rating. The agent writes it in React and TypeScript, and DS Manager checks it before saving. It then sits in your system next to the built-in components, styled by your tokens, and you can restyle it in the editor like any other. The agent can also add or rename variants and sizes, for example a soft Button.

Install it into your project

When the system looks right, press Publish in DS Manager. The agent never publishes for you. It then gets the shadcn CLI commands for your system and any ProBlocks, in the right order and for your package manager. Before running them, it lists the files they will overwrite and asks you, and afterwards it runs typecheck, lint and build.

Connect your agent

Open Settings from the account menu and go to the MCP tab. It has the server address, a guide for each client and a Copy setup prompt button. The address is https://manager.shadcndesign.com/api/mcp.

• Claude Code: run claude mcp add --transport http ds-manager https://manager.shadcndesign.com/api/mcp, then /mcp, pick ds-manager and choose Authenticate.
• Cursor: add the entry from the MCP tab to mcp.json, then Connect.
• Codex: run codex mcp add ds-manager --url https://manager.shadcndesign.com/api/mcp, then codex mcp login ds-manager.
• Claude.ai and Claude desktop: go to Settings, Connectors, Add custom connector. Name it DS Manager, paste the address and Connect.

Each one opens DS Manager in your browser. Check the agent's name and click Allow. You don't paste any tokens. The same tab lists your connected agents and their recent calls, and Revoke all disconnects them. An agent left unused for 30 days is disconnected on its own.

The full setup for each client is in the MCP server docs.

Limits

Pro and Lifetime accounts can make 3,000 requests and 1,000 edits a day, 20 imports or Figma conversions a day, and 100 page views a day. The daily limits reset at midnight UTC. A Free account gets 50 edits and 500 reads once, to try it. The agent itself runs on your Claude, Cursor or Codex plan.

Plans

Free accounts can try the MCP server with 50 edits and 500 reads, once. After that it's part of Pro, which is $19 a month or $180 a year. Pro also gives you 30 systems, 10 published registries, all 337 ProBlocks, custom components and your own AI keys. Lifetime accounts get MCP too. Lifetime is no longer on sale. Free keeps 3 systems, 1 published registry and 48 ProBlocks.

Changelog

Added

• MCP server at https://manager.shadcndesign.com/api/mcp for Claude Code, Cursor, Codex, Claude.ai and Claude desktop, with sign-in through an Allow screen.
• MCP tab in Settings with setup guides, connected agents, linked Figma kit files and recent calls.
• Figma kit pull, push and undo of the last push, each through a review page.
• Conversion of other Figma design systems into DS Manager.
• Project theme import from your agent.

Open DS Manager