Use the component library

The component library has 82 parts built only on your design tokens. You can take one in three ways: copy a prompt from its page, fetch the file with one command, or let your AI browse the library through a small server on your computer. All three give you the same file.

Take one file

Every component has a fixed address. This downloads the approval panel into the folder you are in:

curl -fsSLo approval-panel.html https://opendesigner.dev/library/approval-panel.html

With OpenDesigner installed, this copies it into your project and lists any token your system doesn't have yet:

python3 path/to/skills/opendesigner/scripts/library.py add approval-panel --from https://opendesigner.dev

Put the folder where OpenDesigner is in place of path/to; if your AI installed it, it knows the folder.

Leave out --from to use the copy that came with the skill.

The file is plain HTML with one <style> block. Its colours, type and spacing come from --ds-* variables, so in a project with an OpenDesigner system it works as it is. Your AI turns it into a React, Vue or Svelte component in your own style.

Read what a component holds

Each component also has a catalog entry in JSON. It says what the part is for and when not to use it, its parts, how much text and how many items it holds, which states it has, the tokens it reads and how it works with a keyboard.

The six hard states are always listed: empty, loading, error, disabled, too many items, and long text. Each says whether the file shows it, copes with it, or leaves it for you to build, with one line on how. Many are left for you, and the entry says so rather than guessing.

Browse it from your AI (MCP)

MCP is the way AI apps such as Claude Desktop call tools on your computer. OpenDesigner has a small MCP server for the library. It only reads: it never writes to your project, and the server itself never goes online. Previews in the gallery load the parts' sample photos from Unsplash.

In the chat it starts as a short card; Open the gallery shows every part with search and filters. Use this puts one line in the chat, for example OD:add library.approval-panel. Your AI reads it, asks you, and then adds the file. Where the gallery can't send it, the line stays on screen to copy.

To add it to Claude Desktop, clone the repository, then add this to claude_desktop_config.json (Settings, Developer, Edit Config) with your own path, and restart Claude:

{
  "mcpServers": {
    "opendesigner-library": {
      "command": "python3",
      "args": ["/path/to/OpenDesigner/server/mcp/server.py"]
    }
  }
}

Claude Code takes the same server with one command:

claude mcp add opendesigner-library -- python3 /path/to/OpenDesigner/server/mcp/server.py

In Cursor, put the same mcpServers entry in .cursor/mcp.json in your project. Any app that runs local MCP servers takes the same command. It needs Python 3.10 or newer and nothing else.