Uwarp

uwarp-mcp

适用于 Uwarp 的 MCP 服务——一个收录了 500 多款免费浏览器 UI 工具的目录。

此软件包提供 三个本地工具，可在 Cursor 或 Claude Desktop 中使用。无需付费 API 密钥。Uwarp 中的大多数条目都是第三方嵌入内容；此服务不会抓取或封装这些内容。对比度和调色板计算完全在设备本地运行；search_tools 会读取随包提供的本地目录（data/tools.json）。

工具	用途
check_contrast	WCAG 2.x 对比度 + AA/AAA 标记
generate_palette	HSL 和谐调色板 + :root CSS
search_tools	搜索本地 Uwarp 工具目录

作者 / 背景：Sherotree · https://uwarp.design · MIT

---

通过 npx 安装

无需克隆。将其添加到 MCP 客户端配置中（Cursor mcp.json、Claude Desktop 等）：

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

---

要求

• Node.js 18+

安装与构建

cd /path/to/uwarp-mcp
npm install
npm run build

测试

npm test

其中包括一项检查，用于验证黑色文字在白色背景上的对比度约为 21。

本地运行（stdio）

npm start
# or during development:
npm run dev

该进程通过 stdio 提供 MCP 服务（在 stdin/stdout 上使用 JSON-RPC）。日志信息会输出到 stderr。

可选环境变量占位项

变量	备注
UWARP_API_KEY	为未来的 Uwarp API 预留。目前会被忽略——无需付费密钥。

---

Cursor（mcp.json）

将其添加到 Cursor MCP 配置中（例如 ~/.cursor/mcp.json 或项目的 .cursor/mcp.json）。运行 npm run build 后，将 args 指向构建完成的入口文件：

{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/uwarp-mcp/dist/index.js"]
    }
  }
}

如果项目位于 ~/code/uwarp-mcp，示例如下（使用绝对路径）：

{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/Users/you/code/uwarp-mcp/dist/index.js"]
    }
  }
}

保存后重启 Cursor（或重新加载 MCP 服务）。

---

Claude Desktop

编辑 Claude Desktop 配置：

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/uwarp-mcp/dist/index.js"]
    }
  }
}

保存后重启 Claude Desktop。

---

工具参考

check_contrast

输入

字段	类型	描述
foreground	string	十六进制 #RGB / #RRGGBB
background	string	十六进制 #RGB / #RRGGBB

输出

{
  "ratio": 21,
  "aa_normal": true,
  "aa_large": true,
  "aaa_normal": true,
  "aaa_large": true
}

采用 WCAG 2.x 相对亮度和对比度阈值（AA 普通文本 ≥ 4.5，AA 大文本 ≥ 3，AAA 普通文本 ≥ 7，AAA 大文本 ≥ 4.5）。

generate_palette

输入

字段	类型	默认值	描述
seed	string	—	种子十六进制颜色
harmony	analogous | complementary | triadic | mono	analogous	和谐模式
count	number	6	颜色数量，3–12

输出

{
  "colors": [{ "name": "Mid Blue", "hex": "#3b82f6" }],
  "css": ":root {\n  --color-1: #3b82f6; /* Mid Blue */\n}"
}

search_tools

输入

字段	类型	默认值	描述
query	string	—	搜索文本
category	string	—	可选筛选条件（例如 color、svg-generators）
limit	number	8	最大结果数，1–20

输出

{
  "tools": [
    {
      "name": "Contrast Checker",
      "summary": "…",
      "url": "https://uwarp.design/tools/contrast-checker",
      "category": "color"
    }
  ]
}

注意： search_tools 使用 data/tools.json 中的本地目录（开发用示例条目）。它不会在运行时抓取 uwarp.design。

---

项目结构

uwarp-mcp/
├── data/tools.json          # Local Uwarp catalog (~28 samples)
├── src/
│   ├── index.ts             # MCP stdio entry
│   └── tools/
│       ├── check_contrast.ts
│       ├── generate_palette.ts
│       └── search_tools.ts
├── tests/
├── dist/                    # After npm run build
├── package.json
├── tsconfig.json
├── LICENSE
└── README.md

许可证

MIT © Sherotree / Uwarp