skills.rest
PolGubau
PolGubauCOMMUNITY
Explore all skills by this author →
Website𝕏@GubauPolGitHub

refero-design

Analyze product designs and patterns to generate research-backed UI recommendations.

Updated Apr 27, 2026
Search Tags:#design#research#best-practices#pattern-analysis#UI-guidelines#visual-patterns
One-click install
npx skills add https://github.com/PolGubau/les-santes --skill refero-design-polgubau
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refero-design
Source: https://github.com/PolGubau/les-santes/tree/main/.agents/skills/refero-design
Command: npx skills add https://github.com/PolGubau/les-santes --skill refero-design-polgubau

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) and scripts (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating high-quality, research-backed design systems and interfaces by grounding design decisions in comprehensive exploration and analysis of real-world examples.

Core Features & Use Cases

  • Design Research & Analysis: Facilitates systematic exploration of visual, structural, and behavioral patterns across multiple industry-leading products.
  • Pattern Extraction & Steal List Compilation: Identifies subtle and explicit design tactics that differentiate top-tier products from generic AI slop, enabling replicable best practices.
  • Design Craft & Grid Specification: Guides precise typography, color, spacing, motion, and iconography decisions aligned with research findings.
  • Use Case: A product team developing a new SaaS platform can use this skill to derive an authentic, research-validated design language that avoids typical AI-generated pitfalls.

Quick Start

Provide design references and ask the AI to synthesize a detailed, research-backed design strategy tailored to your product needs.

Frequently Asked Questions about refero-design

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

FAQPage Schema
How do I generate research-backed UI guidelines for a new product design?▼

To generate research-backed UI guidelines, provide existing design references to the AI to analyze visual patterns and extract successful tactics. This synthesizes a detailed design strategy covering typography, color, and layout grounded in real-world examples.

What is the best way to avoid generic AI slop in user interface development?▼

Avoiding generic AI slop requires analyzing industry-leading products to identify subtle and explicit design tactics. Compiling a steal list of these differentiated best practices ensures your user interface maintains authentic, human-grade design craft.

Can I extract visual patterns from existing product designs to inform my SaaS platform?▼

Yes, you can extract visual patterns from existing product designs by facilitating systematic exploration of structural and behavioral tactics. This analysis grounds your SaaS platform's design language in real-world research rather than generic assumptions.

How do you analyze typography and motion design decisions using pattern analysis?▼

Analyzing typography and motion decisions involves extracting precise grid specifications and successful tactics from provided design references. This pattern analysis guides exact spacing, iconography, and structural choices aligned with research findings.

Does this approach to design research work for teams needing professional-grade design craft?▼

Yes, this approach works for teams needing professional-grade design craft by grounding creative decisions in comprehensive exploration of real-world examples. It derives an authentic, research-validated design language suitable for product teams developing new platforms.

Related Skills

Explore More Design & Creative Skills→
nullhacknullhack

design-patterns

Map GoF design patterns to code smells with Python before/after examples.

Community
Intermediate
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
projectedanxprojectedanx
1

claude-design

Generate high-fidelity HTML design artifacts like prototypes and UI components.

Community
Advanced
MMA-Marketing-ProMMA-Marketing-Pro
1

stitch-design-taste

Generate DESIGN.md specifications defining premium visual systems for Google Stitch workflows.

Official
Intermediate