Refero Design Styles

refero-styles-mcp-server

プロジェクトのアイデア、ニーズ、スタイルに合ったデザインシステムを styles.refero.design で検索し、そのまま使える design.md ドキュメントを返す MCP サーバーです。

ツール

ツール	説明
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 からすべてのスタイルを取得します（3 ページにわたる約 60 種類のスタイル）
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