https://github.com/referodesign/refero_skill
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
https://github.com/referodesign/refero_skill
agent agent-skills claude cursor design figma mcp refero skill ui-design
Last synced: 11 days ago
JSON representation
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
- Host: GitHub
- URL: https://github.com/referodesign/refero_skill
- Owner: referodesign
- License: mit
- Created: 2026-02-05T07:51:31.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-05-14T16:38:44.000Z (about 1 month ago)
- Last Synced: 2026-05-14T18:40:18.904Z (about 1 month ago)
- Topics: agent, agent-skills, claude, cursor, design, figma, mcp, refero, skill, ui-design
- Size: 1.7 MB
- Stars: 63
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome - referodesign/refero_skill - Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP. (Others)
README
# Refero Skill
An agent skill that makes design research mandatory before implementation: styles-first visual research, real-screen pattern research, flow reasoning, reference locks, decision ledgers, anti-AI-slop checks, and craft knowledge on typography, color, spacing, motion, icons, and copywriting. When Refero MCP is available, it can use curated visual styles, 150,000+ real app screens, and 6,000+ user flows from Stripe, Linear, Notion, Figma, and the best-designed products ever built.
## Install
Works with Claude Code, Cursor, Gemini CLI, Lovable, and any MCP-compatible agent.
```bash
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```
Craft knowledge loads immediately. No account required.
Manual installation
```bash
git clone https://github.com/referodesign/refero_skill.git ~/.claude/skills/refero-design
```
On Claude.ai, add the contents of `SKILL.md` to your project knowledge.
---
## What it does
1. **Researches styles, screens, and flows** — starts with visual styles for taste and direction, then uses real screens and user flows for product patterns and journey logic when live Refero MCP tools are available.
2. **Extracts patterns** — identifies specific design decisions and builds a reference list before touching code.
3. **Applies craft knowledge** — uses built-in guides on typography, color, spacing, motion, icons, and copywriting. Flags anti-slop patterns before they appear.
4. **Designs with evidence** — every decision traces back to a real product or a craft rule, not a training data average.
Files
`SKILL.md` — Research-first methodology: styles-first visual research, screen/flow routing, synthesis, craft guidance, quality gates.
Reference guides: `typography.md`, `color.md`, `motion.md`, `icons.md`, `craft-details.md`, `anti-ai-slop.md`, `copywriting.md`, `mcp-tools.md`, `example-workflow.md`
---
## Connect live design research
Set up Refero MCP from [refero.design/mcp](https://refero.design/mcp), then connect your tool:
Claude Code
```bash
claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer "
```
Cursor
Add to `.cursor/mcp.json`:
```json
{
"mcpServers": {
"refero": {
"url": "https://api.refero.design/mcp",
"headers": { "Authorization": "Bearer " }
}
}
}
```
Gemini CLI
```bash
gemini mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer "
```
Lovable
Settings → Connectors → New MCP server → `https://api.refero.design/mcp` → Bearer token
Other tools
```
URL: https://api.refero.design/mcp
Auth: Bearer
```
The first time you call Refero, a browser window opens to sign in. After that it's automatic.
## Contributing
To add a new skill, create a directory under `skills/` with a `SKILL.md` file following the [Agent Skills](https://agentskills.io/) format.
## License
MIT