Refero Design

A research-first design methodology that forces you to ground every visual and UI decision in real product patterns before you implement. It's built around three Refero research layers: styles for visual direction, screens for concrete UI patterns, and flows for multi-step journeys. The workflow is strict: you search references, retrieve full details, synthesize a direction from multiple examples without averaging them into generic mush, lock the dominant traits, then build. Works as a standalone methodology with bundled craft knowledge, but gets sharper when you connect the Refero MCP tools for live research. This is meant to replace generic AI design instincts with evidence from actual shipping products.

skills.sh installs: 13.2K
GitHub stars: 347
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add referodesign/refero_skill --skill refero-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Refero Design

Refero gives agents taste and product evidence. Use it before design work instead of relying on generic model knowledge.

Refero has three research layers:

Styles - visual direction and taste.
Screens - concrete UI patterns and product-screen decisions.
Flows - multi-step journey logic.

Best results come from combining layers: visual direction from styles, concrete UI patterns from screens, and sequencing from flows when the task has multiple steps.