Refero MCP

Search styles.refero.design in plain English and drop a DESIGN.md into any project.

Quick Navigation

What this is

Refero Styles is a beta catalog of about 200 curated sites where someone has done the painful work of pulling out the colors, typography, spacing, and per-style do/don't guidance. Each entry ships with a designSystem block that's basically a DESIGN.md waiting to happen.

This MCP wraps that catalog so Claude Code can search it in natural language and drop a generated DESIGN.md straight into whatever project you're scaffolding. No browser-tab JSON copy-paste, no hand-rolled token tables.

It's for anyone using Claude Code to spin up a new app, deck, or client project who wants the design language locked down before the first component renders.

Quick install

One line:

claude mcp add refero -- npx -y fidgetcoding-refero-mcp

Restart Claude Code and start describing the look you want.

If you want vibe search (semantic ranking against each style's poetic northStar summary), pass an OpenAI key:

claude mcp add refero --env OPENAI_API_KEY=sk-... -- npx -y fidgetcoding-refero-mcp

Without it, search falls back to keyword scoring. Works fine, just less magical.

For claude_desktop_config.json users:

{
  "mcpServers": {
    "refero": {
      "command": "npx",
      "args": ["-y", "fidgetcoding-refero-mcp"],
      "env": {
        "OPENAI_API_KEY": "sk-...",
        "REFERO_MCP_VAULT_DIR": "/absolute/path/to/your/vault"
      }
    }
  }
}

Usage

A few prompts that route cleanly:

"Find me a dark editorial style with a serif and a warm accent."

"Pull the full breakdown for Linear."

"What's similar to Vercel in the Refero catalog?"

"Render Cursor's DESIGN.md — don't save it yet, just show me."

"Save Cursor's DESIGN.md into my PARZVL project."

"Show me only dark-mode brutalist styles, top five."

"Refresh the Refero catalog before we start the design pass."

More worked recipes in docs/USAGE.md.

Tools

Configuration

Everything is optional. Defaults are picked so the MCP just runs.

A copy-paste .env.example ships in the repo root.

There's no default for REFERO_MCP_VAULT_DIR. The previous draft hardcoded my laptop path, which worked great for exactly one machine on Earth. The reviewer caught it. Now if you don't set it, the tool just refuses to write — rude, but better than dropping files into a folder that doesn't exist on your computer.

How it works

There is no public Refero API doc as of writing — the shape was mapped empirically against the live site. The full breakdown is in docs/api-surface.md so future-me doesn't re-discover it.

• Local catalog mirror. Refero exposes ?page=N pagination but silently ignores ?search=, ?q=, and ?colorScheme=. So this MCP walks the pages once, mirrors them locally under REFERO_CACHE_DIR, and runs all filtering and ranking client-side.

• Vibe search via northStar. Every Refero style ships with a one-line poetic summary called northStar. With OPENAI_API_KEY set, the MCP embeds those summaries with text-embedding-3-small and ranks by cosine similarity to your query. Without a key, it falls back to keyword scoring on northStar + tags + site name.

• DESIGN.md generated locally. Refero does not expose a /design.md endpoint. The MCP synthesizes one from style.fullResult.designSystem (dos, donts, tags, theme, role-tagged colors). Output is compatible with the /stitch-design-taste and /design-taste-frontend skills.

Troubleshooting

"No styles found" / catalog feels empty. First-run hits a cold cache. Ask Claude to "refresh the Refero catalog" once — it walks the ~10 pages with a polite 250ms gap and writes them to REFERO_CACHE_DIR. After that, search is instant.

Search results feel keyword-y rather than semantic. You probably don't have OPENAI_API_KEY set. Add it to your MCP config and restart, or lean harder on the catalog's vocabulary (industries plus tags like editorial, brutalist, glass).

refero_design_md returns markdown but won't write to disk. REFERO_MCP_VAULT_DIR is unset. Set it to your vault root (absolute path) and the tool will write to <vault>/05-Projects/<NAME>/DESIGN.md. Without it, you get the markdown back in conversation and can paste it wherever.

License

MIT — see LICENSE for details.

Author

Built by Nate Davidovich / Lorecraft LLC.

• GitHub: lorecraft-io

• npm: lorecraft

• Sister projects: morgen-mcp, motion-mcp

⤴ back to top

Security: gitleaks scan

This repo ships with a .gitleaks.toml config and a scripts/security-scan.sh helper that scans the working tree for secrets (GitHub tokens, API keys, JWTs, private keys, Anthropic keys, etc.).

bash scripts/security-scan.sh

A .husky/pre-commit hook also runs gitleaks protect --staged on every commit and warn-no-ops if gitleaks isn't installed locally.

If you don't have it yet:

• macOS: brew install gitleaks

• Linux: https://github.com/gitleaks/gitleaks/releases