What is Refero Skill
A design methodology that installs into your agent. Instead of jumping straight to code, your agent first researches references, extracts specific patterns, and then designs with craft rules for typography, color, spacing, and motion. Fewer iterations, more intentional results, less time fixing things that looked off from the start. The difference is immediate. Without the Skill, Claude designs from its training data — the same indigo gradients, the same safe layouts, the same generic output every time. With the Skill, Claude studies what Stripe, Linear, Notion, and thousands of other products actually ship, then applies those patterns to your project.What you need
- Refero Pro subscription — refero.design
- Refero MCP installed in Claude Code — see Getting Started
- Claude Code — the skill is a Claude Code slash command
Installation
How it works
Discovery
Claude figures out what you are building: who is the audience, what is the goal, what objections need addressing. If you give a detailed brief, this step is fast. If you just say “pricing page,” Claude will ask follow-up questions to fill in the gaps before moving on.
Research
Claude makes 5+ searches across Refero’s database: broad queries (“pricing page SaaS”), specific patterns (“plan comparison with toggle”), and competitor lookups (“Notion pricing”, “Linear pricing”). It reviews 50+ results and picks the 5-10 best for deep analysis using
refero_get_screen and refero_get_flow.Analyze
Claude synthesizes patterns across all the research. It builds a “Steal List” — at least 5 specific tactics from real products (exact copy patterns, layout techniques, trust signals, conversion tricks). Each tactic has a source screen or flow ID, so nothing is made up. Everything is traceable.
Design & Implement
Claude applies the research. The rule is 80/20: 80% proven patterns from real products, 20% unique identity for your brand. Built-in design knowledge covers typography scales, color systems, spacing, motion timing, and craft details — the things that separate professional output from generic AI generation.
Built-in design knowledge
The skill includes reference guides that Claude follows during implementation:- Typography — type scales, font pairing rules, responsive sizing, letter-spacing by context, line length limits
- Color — palette construction, contrast ratios, semantic color usage, dark mode done right (not just inverted colors)
- Motion — animation timing from 90ms instant feedback to 360ms page transitions, easing curves, micro-interactions
- Icons — icon systems, sizing, consistency rules (one style per product, never mixed)
- Craft details — spacing rhythms, alignment, visual hierarchy, focus states, form best practices, accessibility
- Anti-AI-slop — specific patterns to avoid: perfectly symmetric layouts, generic stock gradients, meaningless decorative elements, overuse of rounded corners, the default indigo/violet that every LLM reaches for, and other telltale signs of AI-generated design
The anti-AI-slop guide is not just a list of “don’ts.” It enforces a standard: every design choice must be traceable to research or brand requirements. “It looked nice” is not a valid reason.
MCP + Skill: how they fit together
Refero MCP = data access. It gives your agent 4 tools to search and retrieve screens and flows from Refero’s database. Refero Skill = methodology. It tells your agent how to use that data: what to search for, how many results to review, how to extract patterns, and how to apply them with professional craft. You can use MCP without the Skill — just search and browse manually. But the Skill makes the process systematic and the output dramatically better. It is the difference between having access to a library and having a researcher who knows exactly what to look for.Tips for better results
- Give detailed briefs. “Design a pricing page” works, but “Design a pricing page for a developer tools SaaS targeting engineering managers who need to justify budget to their CFO” works much better. The more context you provide, the sharper the research and the more relevant the output.
- Let the research run. The agent will make many searches. Do not interrupt — this is where the quality comes from. The Skill is designed to be thorough.
- Check the Steal List. If it has fewer than 5 items, the research was not deep enough. Ask Claude to search more. The Steal List is the backbone of the entire design.
- For quick lookups, skip the Skill. If you just need to see how Stripe does checkout, use the MCP tools directly. The Skill is for when you are actually building something and want the full research-to-implementation pipeline.