Refero Design Skill

Design with data, not defaults.

AI agents design from training data averages. Generic layouts, safe colors, patterns you've seen a thousand times. This skill gives your agent something it never had: access to real design research.

Real-time design research

Before creating anything, your agent searches Refero: 150,000+ screens and 6,000+ user flows from Stripe, Linear, Notion, Figma, Vercel, and thousands of the best products ever built.

Not just screenshots. Every screen has rich metadata: components, patterns, typography, colors, layout structures. Your agent doesn't just see designs, it understands them. User flows are broken down step by step: what each screen does, what content it shows, how users move through the experience.

Semantic search that finds anything. Pricing page with annual toggle? Fintech onboarding? Dark mode dashboard? Cancellation flow that reduces churn? If the pattern exists, your agent will find it. Research that takes designers hours, done in seconds.

Without this data, AI agents guess. They produce "safe" designs that look like everything else. With Refero, your agent researches first, then designs with confidence.

Also in this skill:

Craft knowledge. Deep guides on typography, color, spacing, motion, and icons. Letter-spacing rules, color token systems, animation timing curves. The details that separate polished products from rough prototypes.

Anti-slop rules. Explicit guidance to avoid the generic AI look: no default indigo, no blob backgrounds, no hero-features-pricing-FAQ templates. What makes design feel human versus generated.

Methodology. A complete workflow from discovery questions through research, analysis, and implementation. Quality gates and side-by-side validation against real products.

Install

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

Requires Refero MCP to connect your agent to the design library.

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

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

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

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

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

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

License

MIT