内容
# refero-styles-mcp-server
一个MCP服务器，用于在 [styles.refero.design](https://styles.refero.design) 中搜索与您的项目理念、需求和样式相匹配的设计系统，并返回可立即使用的 `design.md` 文档。
## 工具
| 工具 | 描述 |
|------|-------------|
| `refero_list_styles` | 浏览带有分页功能的精选目录 |
| `refero_search_styles` | 按关键词、情绪、品牌或颜色搜索 |
| `refero_get_design_md` | 获取特定样式的完整 design.md |
| `refero_match_style` | **主要工具** — 将样式与您的项目描述进行匹配 |
## 快速开始
```bash
npm install
npm run build
node dist/index.js
```
## 与 Claude Desktop 结合使用
添加到 `~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"refero-styles": {
"command": "node",
"args": ["/path/to/refero-styles-mcp-server/dist/index.js"]
}
}
}
```
## 示例提示
```
为我的针对开发者的暗色SaaS仪表盘找到一种设计风格。
```
```
为干净的金融科技移动应用、浅色主题匹配 design.md。
```
```
获取 Linear 设计系统的完整 design.md。
```
## 工作原理
1. **`refero_match_style`** 从 Refero API 获取所有样式（~60 种样式，分布在 3 页中）
2. 使用情绪检测、关键词匹配和颜色方案对齐，根据您的描述为每种样式评分
3. 返回按得分排名的前 N 个匹配结果及其原因
4. 获取并返回顶部匹配结果的完整 design.md — 准备好粘贴到您的 AI 编码提示中
## 项目结构
```
src/
├── index.ts # 服务器入口点
├── constants.ts # API URL 和限制
├── types.ts # TypeScript 接口
├── services/
│ └── referoApi.ts # styles.refero.design 的 API 客户端
├── tools/
│ ├── listStyles.ts # refero_list_styles
│ ├── searchStyles.ts # refero_search_styles
│ ├── getDesignMd.ts # refero_get_design_md
│ └── matchStyle.ts # refero_match_style
└── utils/
├── designMd.ts # 从 JSON 数据生成 design.md
└── errors.ts # API 错误处理
```
