DS Manager

ClaudeCommunityby ShadcnDesign

DS Manager is a web editor for shadcn/ui design systems: theme tokens, fonts, radius, shadows, component styles, ProBlocks and Lint locks. This connector lets Claude work on the design systems in your DS Manager account while you watch the changes land in the editor. Claude can: - Create a design system or change its look: light and dark colour tokens (oklch or hex), fonts, radius, spacing, shadows, the type scale, control heights and focus. - Restyle kit components and ProBlocks by their Tailwind utilities, and add, rename or remove a variant or size. - Build a custom component the kit does not ship, in React and TypeScript. DS Manager checks it before it saves it. - Check its own work: a text view of any page, with the contrast of each text and fill pair, failing pairs first. - Import the theme of the shadcn/ui project you are working in. It reads components.json, the global stylesheet, the Tailwind config, the root layout and the components/ui files, and never runs your code. - Bring in a design system from another Figma file, or sync a system with the shadcndesign Figma kit (pull, push, undo the last push). Both go through your own Figma connection in Claude. - Give you the shadcn CLI commands that install a published system and ProBlocks, and explain the system's Lint locks so app code follows them. You stay in charge. Every change shows in the editor, and one Undo there reverts a whole run of Claude's edits. Imports, conversions into an existing system and Figma syncs wait on a review page until you apply them. Claude cannot publish, delete a system or a component, apply a review or change a Lint lock: it gives you a link and you do those in DS Manager. You need a DS Manager account. When you connect, DS Manager shows an Allow screen that lists what Claude will be able to do.