Refero Design Styles

refero-styles-mcp-server

一个 MCP 服务，可在 styles.refero.design 中搜索符合项目构想、需求和风格的设计系统，并返回可直接使用的 design.md 文档。

工具

工具	描述
refero_list_styles	分页浏览精选目录
refero_search_styles	按关键词、氛围、品牌或颜色搜索
refero_get_design_md	获取特定风格的完整 design.md
refero_match_style	主要工具 — 根据项目描述匹配风格

快速开始

npm install
npm run build
node dist/index.js

在 Claude Desktop 中使用

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "refero-styles": {
      "command": "node",
      "args": ["/path/to/refero-styles-mcp-server/dist/index.js"]
    }
  }
}

示例提示词

Find a design style for my dark SaaS dashboard targeting developers.

Match a design.md for a clean fintech mobile app, light theme.

Get the full design.md for Linear's design system.

工作原理

1. refero_match_style 从 Refero API 获取所有风格（约 60 种，分为 3 页）
2. 使用氛围检测、关键词匹配和配色方案匹配，根据你的描述为每种风格评分
3. 按分数排序，返回排名靠前的 N 个匹配结果及其原因
4. 获取并返回排名第一的匹配结果的完整 design.md，可直接粘贴到 AI 编码提示词中

项目结构

src/
├── index.ts              # Server entry point
├── constants.ts          # API URLs and limits
├── types.ts              # TypeScript interfaces
├── services/
│   └── referoApi.ts      # API client for styles.refero.design
├── 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       # Generates design.md from JSON data
    └── errors.ts         # API error handling