@webdesignhot/design-md-mcp 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -11
- package/package.json +4 -4
- package/src/server.mjs +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
# @webdesignhot/design-md-mcp
|
|
2
2
|
|
|
3
|
-
> MCP server exposing the [webdesignhot.com](https://www.webdesignhot.com/design.md/) DESIGN.md catalog (
|
|
3
|
+
> MCP server exposing the [webdesignhot.com](https://www.webdesignhot.com/design.md/) DESIGN.md catalog (285+ real-brand design systems) to Claude Code, Claude Desktop, Cursor, Codex, Cline, and any other MCP-aware AI agent.
|
|
4
4
|
|
|
5
5
|
## Why
|
|
6
6
|
|
|
7
|
-
When an AI coding agent picks up a project, it usually has no idea what your visual style is. You can paste tokens into the system prompt, hand it a Figma export, or — best — point it at a single `DESIGN.md` file. This MCP server takes that one step further: agents can browse
|
|
7
|
+
When an AI coding agent picks up a project, it usually has no idea what your visual style is. You can paste tokens into the system prompt, hand it a Figma export, or — best — point it at a single `DESIGN.md` file. This MCP server takes that one step further: agents can browse 285+ real-brand design systems (Linear, Stripe, Vercel, Anthropic, Notion, Apple, Tesla, BMW, …) and install one in your project without you ever leaving the chat.
|
|
8
8
|
|
|
9
9
|
## Tools
|
|
10
10
|
|
|
11
11
|
- **`list_designs`** — list every design (with `featured_only` / `category` / `tag` filters)
|
|
12
|
-
- **`get_design`** — full DESIGN.md/
|
|
12
|
+
- **`get_design`** — full DESIGN.md (webdesignhot/0.1) source for a slug
|
|
13
13
|
- **`search_designs`** — fuzzy search by name, tagline, tags, categories
|
|
14
14
|
- **`diff_designs`** — token-level diff between any two designs
|
|
15
15
|
- **`export_design`** — render tokens to tailwind / css / dtcg / figma
|
|
@@ -17,9 +17,46 @@ When an AI coding agent picks up a project, it usually has no idea what your vis
|
|
|
17
17
|
|
|
18
18
|
## Install
|
|
19
19
|
|
|
20
|
-
### Claude
|
|
20
|
+
### Claude Code (CLI / IDE extension)
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
Easiest — let the `claude` CLI write the config for you. Pick a scope:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# Local (default) — only this project, only you. Written to ~/.claude.json
|
|
26
|
+
# under the project key. Teammates won't see it.
|
|
27
|
+
claude mcp add design-md -- npx -y @webdesignhot/design-md-mcp
|
|
28
|
+
|
|
29
|
+
# Project — committed to the repo's .mcp.json so teammates get it on clone.
|
|
30
|
+
claude mcp add --scope project design-md -- npx -y @webdesignhot/design-md-mcp
|
|
31
|
+
|
|
32
|
+
# User — every project on your machine, written to ~/.claude.json globals.
|
|
33
|
+
claude mcp add --scope user design-md -- npx -y @webdesignhot/design-md-mcp
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Verify with `/mcp` inside Claude Code — `design-md` should be listed with 6 tools (`list_designs`, `get_design`, `search_designs`, `diff_designs`, `export_design`, `install_design`).
|
|
37
|
+
|
|
38
|
+
Manual alternative for `--scope project` — drop `.mcp.json` in the repo root:
|
|
39
|
+
|
|
40
|
+
```json
|
|
41
|
+
{
|
|
42
|
+
"mcpServers": {
|
|
43
|
+
"design-md": {
|
|
44
|
+
"command": "npx",
|
|
45
|
+
"args": ["-y", "@webdesignhot/design-md-mcp"]
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> **Note:** Claude Code does **not** read `claude_desktop_config.json` — that's Claude Desktop's file. Mixing them up is the #1 wrong path.
|
|
52
|
+
|
|
53
|
+
### Claude Desktop
|
|
54
|
+
|
|
55
|
+
Different application, different config file. Edit:
|
|
56
|
+
|
|
57
|
+
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
58
|
+
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
|
|
59
|
+
- Linux: `~/.config/Claude/claude_desktop_config.json`
|
|
23
60
|
|
|
24
61
|
```json
|
|
25
62
|
{
|
|
@@ -32,17 +69,46 @@ Add to your `~/Library/Application Support/Claude/claude_desktop_config.json` (o
|
|
|
32
69
|
}
|
|
33
70
|
```
|
|
34
71
|
|
|
72
|
+
Restart Claude Desktop after editing.
|
|
73
|
+
|
|
35
74
|
### Cursor
|
|
36
75
|
|
|
37
|
-
|
|
76
|
+
Drop a JSON file at one of two paths — same shape as Claude:
|
|
77
|
+
|
|
78
|
+
- Global: `~/.cursor/mcp.json`
|
|
79
|
+
- Project: `.cursor/mcp.json` (in repo root)
|
|
80
|
+
|
|
81
|
+
```json
|
|
82
|
+
{
|
|
83
|
+
"mcpServers": {
|
|
84
|
+
"design-md": {
|
|
85
|
+
"command": "npx",
|
|
86
|
+
"args": ["-y", "@webdesignhot/design-md-mcp"]
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Toggle the server on under **Settings → Features → Model Context Protocol** (or the marketplace at [cursor.directory](https://cursor.directory) for one-click adds on community servers).
|
|
93
|
+
|
|
94
|
+
### Codex (OpenAI CLI / IDE extension)
|
|
95
|
+
|
|
96
|
+
Codex uses **TOML**, not JSON. Edit:
|
|
97
|
+
|
|
98
|
+
- Global: `~/.codex/config.toml`
|
|
99
|
+
- Project: `.codex/config.toml` (for trusted projects only)
|
|
100
|
+
|
|
101
|
+
```toml
|
|
102
|
+
[mcp_servers.design-md]
|
|
103
|
+
command = "npx"
|
|
104
|
+
args = ["-y", "@webdesignhot/design-md-mcp"]
|
|
105
|
+
```
|
|
38
106
|
|
|
39
|
-
|
|
40
|
-
- **Type**: `command`
|
|
41
|
-
- **Command**: `npx -y @webdesignhot/design-md-mcp`
|
|
107
|
+
The CLI and the IDE extension share this config — set it once, both clients see it.
|
|
42
108
|
|
|
43
|
-
### Cline / Roo / etc.
|
|
109
|
+
### Cline / Roo / Continue / etc.
|
|
44
110
|
|
|
45
|
-
Any MCP client supporting stdio transports works. After install the binary is `design-md-mcp`
|
|
111
|
+
Any MCP client supporting stdio transports works. After install the binary is exposed as `design-md-mcp` — run it directly, or invoke via `npx -y @webdesignhot/design-md-mcp`. Most clients accept the same `{ "command": "npx", "args": ["-y", "@webdesignhot/design-md-mcp"] }` JSON shape Claude uses.
|
|
46
112
|
|
|
47
113
|
## Use it
|
|
48
114
|
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webdesignhot/design-md-mcp",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "MCP server exposing the webdesignhot.com DESIGN.md catalog (
|
|
5
|
-
"keywords": ["mcp", "model-context-protocol", "design.md", "design-system", "ai-agents", "claude", "cursor"],
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "MCP server exposing the webdesignhot.com DESIGN.md catalog (285+ real-brand design systems) to Claude Code, Claude Desktop, Cursor, Codex, Cline, and any other MCP-aware AI agent. Tools: list, get, search, diff, export.",
|
|
5
|
+
"keywords": ["mcp", "model-context-protocol", "design.md", "design-system", "ai-agents", "claude", "claude-code", "codex", "cursor"],
|
|
6
6
|
"author": "webdesignhot",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"homepage": "https://www.webdesignhot.com/design.md/",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "https://github.com/WebDesignHot/design-md"
|
|
11
|
+
"url": "git+https://github.com/WebDesignHot/design-md.git"
|
|
12
12
|
},
|
|
13
13
|
"bin": {
|
|
14
14
|
"design-md-mcp": "bin/design-md-mcp.mjs"
|
package/src/server.mjs
CHANGED
|
@@ -52,7 +52,7 @@ const TOOLS = [
|
|
|
52
52
|
{
|
|
53
53
|
name: 'get_design',
|
|
54
54
|
description:
|
|
55
|
-
'Fetch the full DESIGN.md/
|
|
55
|
+
'Fetch the full DESIGN.md (webdesignhot/0.1) source for a specific design (YAML frontmatter + markdown body). The response is the exact file an agent should read as its style source of truth. Use the agent-prompt header from the file to anchor every component decision.',
|
|
56
56
|
inputSchema: {
|
|
57
57
|
type: 'object',
|
|
58
58
|
required: ['slug'],
|