refero-design

Design UI/UX using real-world screens, flows, and design guidelines via Refero MCP.

2|Updated May 2, 2025
One-click install
npx skills add https://github.com/daltonkyemiller/dot --skill refero-design-daltonkyemiller
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refero-design
Source: https://github.com/daltonkyemiller/dot/tree/main/.agents/skills/refero-design
Command: npx skills add https://github.com/daltonkyemiller/dot --skill refero-design-daltonkyemiller

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires refero-mcp, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive Research-First design methodology, enabling agents to create high-quality UI/UX designs with confidence by leveraging real-world design research and industry best practices.

Core Features & Use Cases

  • Real-time Design Research: Access a vast library of 150,000+ screens and 6,000+ user flows from leading companies.
  • Craft Knowledge: Deep guides on typography, color, spacing, motion, and icons.
  • Anti-slop Rules: Guidance to avoid generic AI designs and ensure professional execution.
  • Methodology: A step-by-step workflow from discovery questions through implementation.
  • Use Case: Design a sophisticated pricing page, leveraging Refero's library for inspiration and industry best practices.

Quick Start

Use the refero-design skill to research and design a pricing page, starting with a discovery question like "How should our pricing page reflect our brand and value proposition?"

Frequently Asked Questions about refero-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design UI/UX using real-world design research?

Design UI/UX using real-world research by querying a library of 150,000+ screens and 6,000+ user flows from leading companies. This research-first methodology provides actual screens, flows, and guidelines to ensure professional execution and avoid generic outputs.

What design guidelines can I extract for typography and color?

You can extract specific details like typography, color, spacing, and layout from real-world design references. Deep craft guides on motion and icons are also available to ensure your UI components follow industry best practices.

Do I need Refero MCP API access to use this design methodology?

Yes, you need Refero MCP API access for full functionality. The design methodology relies on the refero-mcp dependency to query its extensive library of screens, flows, and design guidance.

What is the best way to research and design a pricing page?

The best way to design a pricing page is using a step-by-step workflow from discovery questions through implementation. Start by asking how the page should reflect your brand, then leverage the screen library for inspiration and industry best practices.

How does this methodology help avoid generic AI designs?

It applies anti-slop rules to avoid generic AI designs and ensure professional execution. By grounding UI/UX decisions in a vast library of real-world screens and user flows, the methodology maintains high design quality.

Can I query user flows and screens from specific companies?

Yes, you can query a vast library of screens and user flows from leading companies. The methodology supports queries for screens, flows, and design guidance to extract specific layout, typography, and color details.