Design inspiration skills compared: Mobbin, Refero

Ask a coding agent for a pricing page "with some inspiration" and it usually describes references from memory, or searches the web and comes back with a list article. The real resources are galleries and registries that people curate by hand: saaspo.com for SaaS pages, navbar.gallery for headers, Mobbin for mobile flows, shadcn/ui for code. The skills and servers below help an agent reach them. design-inspiration-index from molveau/skills is the free one I use: a map from a need to the right public source, with no account and nothing to configure. It holds no references itself. If you design app flows every week and already pay for Mobbin or Refero, their own servers will serve you better, and the sections below say when.

The contenders

Tool	Author	Licence	Best at	Lacks
Mobbin skills and MCP	Mobbin	MIT	Searching real app and web screens, flows and sections from the agent, with skills that write better queries	Free access: it needs a Pro, Team or Enterprise plan
Refero MCP	Refero	Hosted service, no public repo	Real product screens for UI patterns and flows for journey logic	Free access: it needs a Pro, Team or Lifetime plan
shadcn MCP	shadcn	MIT	Searching and installing components from shadcn/ui and any registry listed in components.json	Visual references; it returns code to install
21st MCP	21st.dev	Hosted service; the older Magic MCP package is ISC	Searching a large catalog of React components, themes and templates, and generating variants	Free code: search is free, fetching code and generating are paid, and it needs an API key
awesome-design-md	VoltAgent	MIT	DESIGN.md files that describe well-known brands' design systems	Screens and components; it is reading material
A bookmarks folder	You	Not applicable	References you chose yourself, for reasons you remember	Any way for the agent to use them until you write them down
design-inspiration-index	Molveau Studio	MIT	Routing 26 needs to the right public gallery or registry, free	The references themselves; it cannot search a gallery for you

Each one, fairly

Mobbin's skills and MCP server

Mobbin publishes an official hosted MCP server and a plugin that bundles it with four skills: search, best-practices, redesign-screen and plain-writing. The search skill teaches the agent to query by meaning ("paywall with a free trial") rather than by keywords, and to check which app a result came from before citing it. On first use the agent opens a browser to sign in. If you design app flows often and already pay for Mobbin, install its plugin: it does far more than my index, which only tells the agent that mobile flows live there.

Refero's MCP server

Refero's hosted server returns screens for concrete UI patterns (structure, hierarchy, copy, states) and flows for journey logic (steps, decisions, friction, recovery). It works with Claude Code, Cursor, Codex and other clients that support remote MCP servers, and it needs a paid plan. If you work on product flows such as onboarding or checkout often enough to pay for it, connect it. Browsing refero.design by hand covers the occasional look.

The shadcn MCP server

Part of the shadcn CLI, it lets the agent browse, search and install items from the shadcn/ui registry, from any third-party registry that follows the registry spec, and from private ones, all configured in components.json. It answers "is there already a component for this?" with code you can install. It shows no live sites and no flows. If your project uses shadcn/ui, set it up whatever else you choose: npx shadcn@latest mcp init --client claude.

The 21st MCP

Formerly Magic MCP, it connects the agent to 21st.dev's catalog of React components, themes and templates. Search is free and returns metadata. Fetching a component's code and generating new UI cost money, and you need an API key from 21st.dev. It suits a project that already buys components or wants generated variants as a starting point. Treat what it returns as a draft and adapt it to the project's tokens.

awesome-design-md, by VoltAgent

A repo of DESIGN.md files, each describing a well-known brand's design system, written to drop into a project so an agent builds a matching UI. My index sends the agent there to read two or three before you define a design language of your own. Copying one wholesale gives you a clone of that brand, so read them for structure and take the decisions yourself.

A bookmarks folder

The galleries are the real resource, and a folder of links you collected over years is often better taste input than any index, including mine. The catch is that your agent cannot read it. If you keep one, write the ten best links into the project's DESIGN.md or a references file, with a line on why each one is there, and the agent can work from them.

What the index adds

• A routing table. 26 needs, each with a source: a navbar to navbar.gallery, a CTA or newsletter block to cta.gallery, a SaaS pricing page to saaspo.com, a motion idea to 60fps.design and designspells.com, a rebrand to rebrand.gallery, mobile flows to Mobbin.
• Per-site detail. 18 galleries have their own entry with access, format, filters and a retrieval tip, last checked on 1 November 2026. Saaspo, for example, can be sliced by page type and by industry.
• Code sources in the same map. shadcn/ui and free registries such as blocks.so, kibo-ui.com and tailark.com sit next to the galleries, with the rule to start from what the project already uses and to adapt anything imported to its tokens and accessibility rules.
• An access cheat sheet. Which sites are free, which are freemium, which need a login, and which (saaspo.com, component.gallery, landing.love, designspells.com) block automated fetches but open in a browser, so the agent does not report a working site as down.
• People worth studying. A short table of design engineers whose sites and open-source work repay a close look, among them Emil Kowalski, Rauno Freiberg and Paco Coursey.
• No account and no setup. It is a Markdown file. Mobbin and Refero appear as optional MCP servers, worth wiring up only if you use them often.
• Honest limits. It is an index, not a design authority. It holds no screenshots and searches nothing. Once you have references, the ui skill builds the screen and anti-slop checks it.

Install

The skill alone, with the skills CLI:

npx skills add molveau/skills -s design-inspiration-index

The design bundle:

npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-index

In Claude Code, all eleven skills as one plugin:

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Every skill and bundle is on the skills page, and the source is at github.com/molveau/skills. Related reading: the sites I use for components and inspiration, UI skills, anti-slop skills.

Checklist

• The need is named (navbar, pricing page, onboarding flow) before any gallery opens.
• References come from a real gallery or product, never from the agent's memory.
• A paid MCP server is connected only if you use it often enough to justify the plan.
• Code from a registry is adapted to the project's tokens and accessibility rules.
• The brief keeps two or three references, each with what to take from it.
• The result still fails the anti-slop swap test with a competitor's name.