refero-design

Generate design briefs and implementation specs from UI research patterns.

1|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/rohithe4/expense_tracker_demo1 --skill refero-design-rohithe4
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refero-design
Source: https://github.com/rohithe4/expense_tracker_demo1/tree/main/references
Command: npx skills add https://github.com/rohithe4/expense_tracker_demo1 --skill refero-design-rohithe4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Research-driven guidance for building UI with Refero MCP; it helps teams ground design decisions in real product patterns instead of guesswork.

Core Features & Use Cases

  • Discovery and Briefing: Craft a Design Brief that defines what is being built, for whom, and the desired outcome.
  • Research & Pattern Synthesis: Gather dozens of references, extract patterns, and organize them into actionable tactics.
  • Guided Design Guidance: Produce concrete recommendations, design tokens, and a workflow for turning insights into implementation.

Quick Start

Describe your UI need (screens/flows), and I will apply Refero's Research-First workflow to deliver a grounded, actionable design plan.

Frequently Asked Questions about refero-design

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

FAQPage Schema
How do I create UI screens using research-led design patterns instead of guesswork?

To create UI screens using research-led design patterns, you define a design brief, gather dozens of references, extract actionable patterns, and produce a structured implementation spec with design tokens. This grounds your interface decisions in real product patterns.

What is the best way to extract design patterns from existing UI references?

The best way to extract design patterns from UI references is to gather dozens of references and synthesize them into organized, actionable tactics. This research-first approach transforms raw references into concrete design guidance and structured implementation specs.

How do I turn design research into a structured implementation spec?

To turn design research into a structured implementation spec, you synthesize extracted patterns into concrete recommendations and design tokens. This workflow converts research insights directly into an actionable plan for building your UI screens and flows.

Can I use research-first design guidance for building new user flows and interfaces?

Yes, you can use research-first design guidance for building new user flows and interfaces. The workflow applies to creating new screens by generating a design brief, extracting patterns, and delivering concrete design recommendations and tokens.

What do I need to provide to get actionable design guidance for my interface?

To get actionable design guidance for your interface, you need to provide a description of your UI need, including the specific screens or flows you are building. The workflow then generates a design brief, pattern extraction, and implementation spec.

Why should I ground my design decisions in real product patterns?

You should ground your design decisions in real product patterns to eliminate guesswork and ensure your UI screens are based on proven tactics. Research-driven guidance helps teams build interfaces using synthesized references rather than untested assumptions.