refero-design

Guides research-first UI and product design using Refero style, screen, and flow references.

Updated Jul 7, 2026
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill refero-design-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refero-design
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/refero-design
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill refero-design-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated design often defaults to generic, averaged-out visual patterns. This Skill grounds every design decision in real product references before implementation, preventing generic AI-slop output and untraceable design choices. ## Core Features & Use Cases - Research-First Methodology: Searches Refero styles for visual direction, screens for concrete UI patterns, and flows for multi-step journey logic before any implementation. - Reference Locks & Decision Ledgers: Locks a primary reference's signature traits, assigns bounded roles to borrowed details, and traces every major design choice to a source. - Bundled Craft References: Includes typography, color, motion, icons, copywriting, accessibility, and anti-AI-slop guidance, plus a visual workflow for mockups, asset generation, and post-build QA. - Use Case: When asked to redesign a SaaS landing page, the agent researches 3-5 style references, synthesizes a unique direction with a reference lock, validates against a quality gate, and only then writes the frontend code. ## Quick Start Ask the agent to design or redesign a landing page, dashboard, or product screen and it will research Refero references before implementing.

Frequently Asked Questions about refero-design

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

FAQPage Schema
How do I design a landing page with real product references?▼

Start with style research: run 3-5 searches across different visual angles, retrieve full styles, choose one primary foundation, and borrow 1-2 details from secondary references. Lock the signature traits before writing any code.

What is the difference between Refero styles, screens, and flows?▼

Styles provide visual direction like typography, palette, and layout. Screens show concrete UI patterns for specific pages or components. Flows describe multi-step journeys such as onboarding, checkout, or cancellation.

Does this design methodology work without Refero MCP tools?▼

Yes, it works standalone using bundled craft references for typography, color, motion, and copywriting while keeping the same reference-lock workflow. Live MCP tools add real-time style, screen, and flow research when configured.

Can I use it for in-app dashboards and settings screens?▼

Yes, but Refero styles currently cover web marketing and product pages, not in-app style systems. Use styles for visual language, then rely on screens and flows for dashboard, settings, and product-logic details.

Why does AI-generated design look generic and how is it avoided?▼

Generic output comes from averaging references into a safe middle. The skill requires choosing one dominant direction, preserving its sharp traits and token roles, and tracing every major decision to a reference, user constraint, or craft rule.