Install Open DS. Then take a scheme.

Path A

Connect your AI (MCP)

1. 1

   Add the server to your AI

   The server is at https://open-ds.dev/mcp. Add it the way your client takes MCP servers:

   Claude Code

   In a terminal. --scope user makes it available in every folder.

   claude mcp add --transport http --scope user open-ds https://open-ds.dev/mcp

   Copy

   Claude (desktop and claude.ai)

   Settings, Connectors, Add custom connector. Name it Open DS and paste the URL:

   https://open-ds.dev/mcp

   Copy

   Cursor

   In ~/.cursor/mcp.json (every project) or .cursor/mcp.json (one project):

   {
     "mcpServers": {
       "open-ds": {
         "url": "https://open-ds.dev/mcp"
       }
     }
   }

   Copy

   VS Code

   In .vscode/mcp.json in your project:

   {
     "servers": {
       "open-ds": {
         "type": "http",
         "url": "https://open-ds.dev/mcp"
       }
     }
   }

   Copy

   Windsurf

   In ~/.codeium/windsurf/mcp_config.json:

   {
     "mcpServers": {
       "open-ds": {
         "serverUrl": "https://open-ds.dev/mcp"
       }
     }
   }

   Copy

   Any other client

   If it takes a URL, use the one above. If it only runs local servers, run Open DS from npm (Node.js 22 or later):

   {
     "mcpServers": {
       "open-ds": {
         "command": "npx",
         "args": [
           "-y",
           "open-ds",
           "mcp"
         ]
       }
     }
   }

   Copy
2. 2

   Ask your AI

   Open your AI in an empty project folder and ask, for example:

   • “Which Open DS scheme fits an order management tool, and why?”
   • “Deploy it into this project.”
   • “In this scheme, what do I use for a number in a table?”
   • “Why does this scheme set line height that way?”

   The server only reads: it answers with the schemes’ answers and reasons, and when you ask to set one up, it gives your AI the exact npx open-ds command and the files it will write. Your AI runs the command in your project.

Path B

Run the CLI yourself

The CLI needs Node.js 22 or later.

1. 1

   Install the CLI

   npm install -g open-ds

   Copy

   open-ds --help

   Copy

   Or skip installing: npx open-ds runs the latest version each time, which is what the commands below use. Installed? Drop the npx. In a project, add it as a dev dependency with npm install -D open-ds.

2. 2

   See the schemes

   npx open-ds list

   Copy

   Schemes: accessible-first, brand-expressive, content-first, dense-data, multi-brand.

3. 3

   Take a whole design system

   npx open-ds create my-design-system --scheme dense-data

   Copy

   cd my-design-system
   npm install
   npm run storybook
   npm run docs

   Copy

   Its own components, tokens, Storybook and docs, built from the scheme’s answers. For Multi-brand, add --brand aster, birch or coral.

4. 4

   Or add a scheme to an app you have

   npx open-ds init dense-data

   Copy

   Run it in your app’s folder. It lists the component packages to install with npm install; then import src/styles/open-ds.css after Tailwind. Add --docs to also write the design system’s docs pages to docs/.

5. 5

   Ask why, and add more components

   npx open-ds why dense-data typography.definition

   Copy

   npx open-ds when dense-data "a number in a table"

   Copy

   npx open-ds add tooltip

   Copy