skills.rest
aditya452007
aditya452007COMMUNITY
Explore all skills by this author →
GitHub

refero-design

Synthesize UI design patterns from real product references into design briefs.

Updated Apr 28, 2026
Search Tags:#workflow#design#research#mcp#ui-design#design-patterns#refero
One-click install
npx skills add https://github.com/aditya452007/Ai-Learning-system --skill refero-design-aditya452007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refero-design
Source: https://github.com/aditya452007/Ai-Learning-system/tree/main/.agent/skills/ui
Command: npx skills add https://github.com/aditya452007/Ai-Learning-system --skill refero-design-aditya452007

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Refero-design Skill provides a disciplined, research-first framework for creating UI screens, flows, or interfaces by grounding decisions in real product references and professional craft, using Refero MCP tools (search_screens, search_flows, get_screen, get_flow, get_design_guidance).

Core Features & Use Cases

  • Discovery-driven design process with a step-by-step workflow (Discover → Research → Analyze → Design → Implement).
  • Pattern extraction from real products and a synthesis that informs decisions, not generic templates.
  • Tools and outputs: design briefs, prioritized references, and implementation guidance that align with brand goals.

Quick Start

Analyze a design brief for a new screen by running Refero to gather 5-10 best references, extract patterns, and draft a 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 extract UI design patterns from real product references?▼

Extract UI design patterns by using Refero MCP tools to search and analyze real product screens, gathering 50+ references to synthesize actionable design decisions into a structured brief for interface development.

What is a research-led UI design workflow?▼

Research-led UI design workflow follows Discover, Research, Analyze, Design, and Implement phases, grounding interface decisions in real product references and extracted design patterns rather than generic templates.

Can I use Refero MCP to search user flows and design guidance?▼

Yes, Refero MCP supports search_flows, get_flow, and get_design_guidance tools to research user flows and extract professional design guidance for screen development.

How many design references do I need to review for a UI design brief?▼

Review 50+ references with exact details to ensure disciplined pattern extraction and produce a comprehensive design brief that informs product interfaces.

What is the best way to start a UI screen design using design references?▼

Start by analyzing a design brief, gathering 5-10 best references through Refero, extracting patterns, and drafting a design plan that aligns with brand goals.

Does research-first UI design work without generic templates?▼

Research-first UI design works by synthesizing patterns from real products instead of using generic templates, producing design briefs and implementation guidance tailored to specific brand goals.

Related Skills

Explore More Design & Creative Skills→
rohithe4rohithe4
1

refero-design

Generate design briefs and implementation specs from UI research patterns.

Community
Advanced
zxpmailzxpmail
18

design-maker

Convert design briefs and product specifications into high-fidelity design mockups.

Community
Advanced
partme-aipartme-ai
610

sketch

Guide Sketch design tool workflows for artboards, symbols, styles, prototyping, and asset export.

Official
Intermediate
haxlyshaxlys

lazyweb-quick-references

Retrieve app screenshots and UI references for design inspiration.

Community
Intermediate