Swipe Files as Agent-Queryable Design Taste
Refero MCP could give joelclaw UI agents a reference-locked research step before they touch Next.js screens.
Refero turns a swipe file into a Model Context Protocol server. Instead of asking an agent to “make it look good,” you can ask it to search styles, screens, and flows before it touches React or Next.js. That is the clever bit: the reference material is not a Pinterest board off to the side. It is a tool call.
The Refero MCP docs split design research into three useful layers. Styles give visual direction like typography, color, spacing, surfaces, and imagery. Screens give concrete interface patterns like pricing toggles, dashboards, settings pages, and empty states. Flows give journey logic across multiple steps. That maps cleanly to agent work: research, lock references, synthesize, then build.
The Refero Skill is the other interesting piece. It formalizes “study before building” as an agent workflow, with reference locks, craft rules, and anti-slop checks. The GitHub repo says the live Refero MCP can use curated visual styles, 150,000+ real app screens, and 6,000+ user flows from products like Stripe, Linear, Notion, and Figma. That is a lot of taste packed into something an agent can actually query.
For joelclaw, the useful pattern is not just “use Refero.” It is make the swipe file executable. Any UI-building agent should be able to cite the references it used, explain which decisions came from which source, and avoid the default AI mush pile.
Key Ideas
- Refero exposes design inspiration through MCP, so agents can query references instead of relying on generic model taste.
- The Refero tool model separates design research into styles, screens, and flows, which gives agents a clean routing model for visual direction, interface structure, and journey logic.
- The Refero Skill turns design work into a research-first process: brief, styles first, screens and flows when needed, synthesis, implementation, and QA.
- The Refero Skill repo frames “reference locks” as evidence for design decisions, which is a strong pattern for agentic coding workflows.
- The Figma plugin shows the same reference layer is useful for human designers too, not just agents.