AgentToolHub
Skill

refero-design

refero-design — a Claude Code skill from referodesign/refero_skill

Features

  • ✓AI-driven design research
  • ✓Access to 150,000+ screens and 6,000+ user flows
  • ✓Rich metadata on components and patterns
  • ✓Semantic search for design patterns
  • ✓Deep guides on design principles
  • ✓Human-centric design anti-slop rules
  • ✓Comprehensive design methodology
  • ✓Visit [GitHub](https://github.com/referodesign/refero_skill) for more

Installation Guide

bash
npx skills add https://github.com/bbssppllvv/refero_skill

Requires [Refero MCP](#setup-refero-mcp) to connect your agent to the design library.

---

<details id="setup-refero-mcp">
<summary>Setup Refero MCP</summary>

1. Get your token

refero.design

2. Connect

Claude Code:

bash
claude mcp add --transport http refero https://api.refero.design/v1/mcp --header "Authorization: <token>"

Gemini CLI:

bash
gemini mcp add --transport http refero https://api.refero.design/v1/mcp --header "Authorization: <token>"

Cursor — add to .cursor/mcp.json:

json
{
  "mcpServers": {
    "refero": {
      "url": "https://api.refero.design/v1/mcp",
      "headers": { "Authorization": "<token>" }
    }
  }
}

Lovable: Settings → Connectors → New MCP server → https://api.refero.design/v1/mcp → Bearer token

Other tools:

text
URL: https://api.refero.design/v1/mcp
Auth: Bearer <token>

</details>

<details>
<summary>Troubleshooting</summary>

bash
npx skills add https://github.com/bbssppllvv/refero_skill --agent cursor

Or clone:

bash
git clone https://github.com/bbssppllvv/refero_skill.git .cursor/skills/refero-design

</details>

<details>
<summary>What's inside</summary>

SKILL.md — Research-First methodology

  • Discovery questions before designing

  • Research strategies and query patterns

  • Analysis frameworks and steal lists

  • Design craft summaries

  • Quality gates and validation

    • Reference guides:

  • typography.md — Scale, pairing, letter-spacing, line-height

  • color.md — Palettes, tokens, dark mode, contrast

  • motion.md — Timing, easing, micro-interactions

  • icons.md — Sizing, optical corrections, libraries

  • craft-details.md — Focus states, forms, accessibility

  • anti-ai-slop.md — Avoiding the generic AI look

  • mcp-tools.md — Refero API reference

  • example-workflow.md — Complete design walkthrough

    • </details>

    Reviews