ideabrowser.com — find trending startup ideas with real demand
Try itnpx skills add https://github.com/referodesign/refero_skill --skill refero-designDon't guess—know. Study real products, learn from the best, then design with confidence.
But remember: References are just ingredients. Your product needs its own flavor. Use Refero for a rock-solid foundation (80%), then breathe soul into it (20%)—the distinctive choices that make your design memorable.
Mindset: Research isn't copying the average. It's finding what the TOP 10% do that others don't. Generic findings ("offer discount", "show social proof") are table stakes—hunt for specific tactics with exact copy, exact numbers, exact conditions. Generic design copies patterns. Great design understands psychology.
Always ask: "If I showed this to 10 users tomorrow, what would they remember?"
Never design blind. Ask these questions first:
1. WHAT are we building?
→ Screen type, Platform, Scope
2. WHO is this for?
→ Audience, Technical level
3. WHAT should users accomplish?
→ Primary action, Success metric
4. WHAT feeling should it evoke?
→ Tone, Energy
5. WHAT JOB is the user hiring this page to do?
→ "Help me decide" (pricing, comparison)
→ "Convince me to trust you" (fintech, healthcare, enterprise)
→ "Get me started without friction" (onboarding, signup)
→ "Show me what to do next" (empty state, dashboard)
→ "Make me feel I'm not missing out" (waitlist, upgrade)
6. WHAT objections might they have?
→ "Is it worth the price?" / "Is it legit?" / "Will it work for me?"
7. WHAT should they remember tomorrow?
→ The hook, the differentiator, the "aha"
8. ANY constraints?
→ Brand guidelines, Technical requirements, Inspirations
Output a Design Brief:
"I'm designing a [WHAT] for [WHO] that helps them [GOAL] and should feel [TONE]. The user's job: [JOB]. Main objection to overcome: [OBJECTION]. They should remember: [HOOK]. Constraints: [CONSTRAINTS]."
┌─────────────────────────────────────────────────────────────────┐
│ 0. DISCOVER → Design Brief │
│ ↓ │
│ 1. RESEARCH │
│ Experiment with queries: broad → narrow → leader │
│ Try different angles until patterns emerge │
│ → Raw material: dozens of references │
│ ↓ │
│ 2. ANALYZE │
│ Extract and structure what you found │
│ Compare approaches, identify patterns │
│ → Synthesis: documented patterns + decisions │
│ ↓ │
│ 3. DESIGN │
│ Apply craft: typography, color, spacing, copy │
│ Define soul: what makes THIS product unique │
│ → Blueprint: design system + unique identity │
│ ↓ │
│ 4. IMPLEMENT │
│ Build the actual interface │
│ Validate against references and quality gates │
│ → Ship-ready design │
└─────────────────────────────────────────────────────────────────┘
Goal: Gather raw material. Experiment freely with different search strategies.
Query what's literally on the screen—not abstract concepts:
Note: Industry info lives in the
categoryfield, not screen descriptions. Search "onboarding" → filter results by relevant category.
Example queries for a pricing page:
Screen type: "pricing", "pricing page", "plans"
Elements: "pricing toggle", "annual/monthly switch", "plan cards"
Companies: "Linear", "Superhuman", "Loom", "Notion"
Styles: "dark mode pricing", "minimalist pricing"
Platforms: "ios pricing", "web pricing", "mobile subscription"
Don't settle on the first query. Try multiple angles until you've seen the landscape.
Query Types:
| Type | Example | Purpose |
|---|---|---|
| Broad | "[screen type]" | See overall landscape |
| Industry | "[industry] + [screen type]" | Industry-specific patterns |
| Style | "minimalist", "dark", "playful" + [type] | Visual direction |
| Specific | "[exact UI element or interaction]" | Exact UI patterns |
| Leader | Company names known for great design | Best-in-class examples |
| Component | "[specific element]: toggle, card, table, modal" | Individual elements |
| Adjacent | Similar problem in different industry | Fresh unexpected patterns |
| Emotion | "trustworthy", "premium", "friendly" + [type] | Feeling-driven search |
Search Loop:
1. Start BROAD → see what exists
2. Notice interesting patterns → go SPECIFIC
3. Find a great example → search that COMPANY
4. Try different ELEMENT → "plan comparison", "feature table"
5. Go CROSS-PLATFORM → designing for iOS? check web too (fresh ideas)
6. Filter by CATEGORY → narrow to your industry
7. Repeat until you've seen 50-100 results
Example: Designing a pricing page
"pricing page" (broad) → see toggle patterns
→ "pricing toggle annual monthly" (specific element)
→ "Linear" (great example) → explore their approach
→ "plan comparison", "feature table" (different elements)
→ check both web and mobile versions
→ filter by SaaS category
→ 50+ results, clear picture of patterns
Go Deep, Not Just Wide:
Don't stop at page 1. The best inspiration hides beyond obvious results:
The gold is in the long tail. First 10 results = what everyone sees. Results 50-100 = unique inspiration.
| Situation | Tool |
|---|---|
| Starting new — need best practices | get_design_guidance |
| Standalone screen (404, error, splash) | search_screens |
| Screen within a journey | search_screens + search_flows |
| Understanding a complete journey | search_flows → then get_flow |
| Details on a specific screen | get_screen |
| Similar approaches | get_screen + include_similar: true |
| Need to see the UI | image_size: "thumbnail" or "full" |
Decision tree:
Journey (multi-step)? → FLOWS first, then screens for details
Single screen? → SCREENS only
Few flow results? → Search screens and reconstruct the journey
Key Question: "Does this screen have a BEFORE and AFTER?"
Use limit parameter. Get more context per query—don't hesitate to set limit=25 or even 50.
Search results contain brief descriptions only. You MUST call get_screen for 5-10 best results to get full analysis:
include_similar: true — returns visually similar screens. Found one good example? Similar screens = more good examples fast.image_size: use "none" (default) for text analysis, "thumbnail" or "full" for visual inspiration.💡 Batching tip: Call for 2-3 screens at a time, not all at once. If something fails—try smaller batches, don't stop.
❌ Reading search descriptions only = surface research
✅ Calling get_screen for best finds = real research
Example workflow:
1. search_screens("pricing page", limit=30) → scan results
2. Pick 8 most interesting screens
3. get_screen(screen_1, include_similar=true) → deep analysis
4. get_screen(screen_2, screen_3) → compare approaches
5. Repeat for remaining screens
Every task has two dimensions: the challenge you're solving and the type of research needed. Identify both before searching.
| If the challenge is... | Focus research on... |
|---|---|
| Building trust (fintech, healthcare, enterprise) | Security signals, credentials, specificity, social proof |
| Reducing friction (onboarding, signup, checkout) | Progressive disclosure, smart defaults, inline validation |
| Creating urgency (waitlist, limited offer) | Scarcity cues, exclusivity, FOMO without cringe |
| Turning negative to positive (empty state, paywall, error) | Motivation, clear next action, opportunity framing |
| Simplifying complexity (complex pricing, settings) | Information hierarchy, progressive reveal, comparisons |
| Standing out (crowded market) | Bold visual choices, unique voice, memorable details |
Ask: "What's the #1 thing that could go wrong here?" Then research how others solved it.
Visual direction — finding the right style
Look for: typography (fonts, sizes, weights), colors, spacing, details (shadows, radii, gradients)
Queries: "dark mode", "minimalist dashboard", "gradient hero", "glassmorphism"
Extract: font pairings, color palettes, spacing rhythm, micro-details
Skip: conversion tactics, copy analysis
Competitive analysis — understanding how others position
Look for: headlines, value propositions, pricing structure, feature framing
Queries: "[competitor name]", "saas landing", "pricing page", "hero section"
Extract: how they explain value, what objections they address, pricing tiers
Skip: visual details (unless relevant to positioning)
UX/Flow optimization — improving journeys
Look for: step count, friction points, error handling, save states
Queries: "onboarding flow", "checkout", "signup", "cancellation"
Extract: what reduces friction, decision points, recovery patterns
Skip: visual polish (focus on structure)
Component design — specific UI elements
Look for: all states (default, hover, active, disabled, loading, error, empty)
Queries: "toggle", "dropdown", "modal", "card", "table"
Extract: interaction patterns, edge cases, accessibility considerations
Skip: page-level patterns
Mix as needed:
For detailed tool parameters, see references/mcp-tools.md.
Lens A: Structure — What do they all do?
Lens B: Visual Craft — How does it LOOK and FEEL? For each strong reference, notice:
Don't copy—extract principles. "This feels premium because of tight letter-spacing and generous whitespace" → apply that principle to your design.
Lens C: Conversion & Soul — What makes this one WORK? For each strong reference, ask:
For Flows (additional lens):
Research is done when you can answer YES to all:
get_screen for 5-10 best screens (deep analysis)Common mistakes:
get_screenGood research vs bad research:
❌ Surface research:
- 3 queries, all variations of "pricing page"
- Read 15 search descriptions
- Skipped get_screen calls
- Findings: "offer discount", "show value", "collect feedback" (generic)
✅ Real research:
- 7+ queries across different angles
- Reviewed 50+ screens in search results
- Called get_screen for 8 best finds
- Findings with EXACT details: "Copy.ai shows 60% discount ONLY after 'too expensive' reason, with exact copy 'We'd hate to lose you over price' and 24h countdown"
- Can explain "why" behind each pattern
Raw collection of 50-100 references. Don't filter yet—gather everything potentially useful.
After completing research, ALWAYS present a summary to the user:
📊 RESEARCH SUMMARY
────────────────────────────────────────
Queries: [count] | Screens analyzed: [count]
WHAT I FOUND:
[Adapt to user's question — visual details, flow logic, patterns, etc.]
Key findings (facts with sources):
• [Company] — [specific detail: exact copy, size, color, step count, etc.]
• [Company] — [specific detail]
Notable differences:
• [what varies between products — if relevant to the task]
GAPS: [what wasn't found]
────────────────────────────────────────
Quality check: Every finding should be a fact you observed, not an opinion. Include source (company/product name). Be specific — "20px font" not "large font", "5-step flow" not "short flow".
Goal: Structure your research. Extract patterns. Make decisions.
This phase is pure synthesis—no opinions, just document what you found.
Don't just follow "best practices." Research is about understanding WHY choices work, not copying WHAT everyone does.
The experiment mindset:
When analyzing, ask:
For each strong reference, document:
| Category | What to notice |
|---|---|
| Layout | Grid, max-width, spacing rhythm, visual hierarchy |
| Typography | Fonts, size scale, weights, special treatments |
| Color | Background, accent, text hierarchy, semantic colors |
| Components | Cards, buttons, navigation, interactive elements |
| Copy | Headline style, CTA language, tone |
Compare 3-5 best references:
| Aspect | Ref A | Ref B | Ref C | Pattern |
|---|---|---|---|---|
| Background | White | Cream | Gray | Warm neutrals |
| Cards | Bordered | Colored | Shadowed | Color differentiation |
| Toggle | Pills | Switch | Tabs | Pills common |
| CTA style | Primary | Secondary | Ghost | Varies by tier |
Don't just document patterns—capture specific tactics to adapt:
| Source | What | Why It Works | How I'll Use It |
|---|---|---|---|
| Linear | "No credit card" under CTA | Kills objection at decision point | Same placement |
| Stripe | ROI calculator | Makes value tangible | Adapt for our metric |
| Notion | Real user avatars, not stock | Creates authenticity | Use real testimonials |
| Clearful | "2 taps to start" | Reduces perceived effort | Use in CTA area |
| Brilliant | Timeline showing trial | Makes process tangible | Visual trial explainer |
STOP: If this table has fewer than 5 rows, go back to research.
Be specific, not vague:
Categories to cover (pick relevant ones):
Structured document with:
Goal: Achieve professional quality. This is where craft matters.
You have the structure from research. Now execute like a senior product designer.
Scale: Use a ratio (1.2 or 1.25). Max 6-8 sizes: Display (48-64px), H1 (36-48px), H2 (24-32px), Body (16-18px), Small (13-14px), Caption (11-12px).
Leading: Larger text = tighter (1.0-1.2). Body = looser (1.5-1.6).
⚠️ LETTER-SPACING — DO NOT SKIP
| Text Type | Letter-spacing |
|---|---|
| Body (14-18px) | 0 |
| Small text (11-13px) | 0.01-0.02em — required |
| UI labels/buttons | 0.02em — required |
| ALL CAPS | 0.06-0.1em — always required |
| Large headings (32px+) | -0.01 to -0.02em (tighten) |
| Display (48px+) | -0.02 to -0.03em (tighten more) |
Common mistakes:
Line length: 50-75 characters (max-width: 65ch). Pairing: Max 2 fonts.
→ Full guide: references/typography.md
Palette: 4 layers — Neutrals (70-90%), Primary accent (5-10%), Semantic (success/warning/danger), Effects (rare).
Neutrals: 10-12 steps (50…950). Create breathing room with spacing, not faded text.
Primary: One brand color with scale (50–950). Use 600 default, 700 hover, 800 active, 100-200 for tints.
Contrast: 4.5:1 for body text (≤16px), 3:1 for large text.
Dark theme: Not inverted. Separate neutrals. Background #0f0f0f, not #000. Text #f0f0f0, not #fff.
Tokens: Name by purpose (--primary), not color (--blue).
→ Full guide: references/color.md
Base unit: 4px or 8px. Everything multiplies from this.
4px system: 4, 8, 12, 16, 24, 32, 48, 64, 96
8px system: 8, 16, 24, 32, 48, 64, 96, 128
Proximity = relationship. Closer = connected, farther = separate. Spacing explains grouping.
Rhythm: Consistent gaps between similar elements. Larger gap = new section.
⛔ NO INDIGO/VIOLET — Unless the user explicitly requests purple/indigo, do not use it. Every LLM defaults to indigo (#6366f1) because it's "safe." This makes it the biggest tell of AI-generated design. Choose brand-appropriate colors from your research instead.
Generic AI output:
Professional design:
Generic structure trap: Don't default to: Hero → Features Grid → Pricing → FAQ → CTA This is the "safe" template everyone uses. Ask: "What can I add, remove, or reorder to make this more effective for THIS product?"
→ Full guide: references/anti-ai-slop.md
Motion serves: Feedback (it worked), Continuity (where it went), Hierarchy (look here). If animation doesn't do one—remove it.
| Category | Duration | Examples |
|---|---|---|
| Instant | 90–150ms | Hover, press, toggle |
| State change | 160–240ms | Accordion, tabs |
| Large transition | 240–360ms | Modal, drawer |
Easing: Enter = ease-out, Exit = ease-in, Change = ease-in-out.
Micro-interactions: Button press scale: 0.98 90ms. Hover background shift 120ms.
Required: prefers-reduced-motion support. No animation > 500ms in product UI.
Anti-patterns: ❌ 300ms+ on hover ❌ Linear easing ❌ Everything animates at once
→ Full guide: references/motion.md
Icons are typography, not illustration. Punctuation marks, not mini-pictures.
Style: One style per product (outline OR solid). Mixing libraries = visual collage.
Optical corrections: Geometric center ≠ visual center. Arrows, chevrons need 0.5–1px shift.
Size: Match text's visual weight. Icon height ≈ text line-height or smaller.
Color: currentColor inherits automatically. Semantic colors only for status.
Accessibility: Action icons need aria-label. Hit area 44×44px minimum.
Libraries: Lucide (SaaS default), Heroicons (Tailwind), Material Symbols, SF Symbols (Apple).
→ Full guide: references/icons.md
STOP: Fill this table before writing any code.
| Element | Your Answer | Implementation |
|---|---|---|
| Hook (first 3 sec) | _______________ | Hero headline + visual |
| Story arc | Problem → Solution → Proof → Action | Section order |
| Objection killers | 1. _____ 2. _____ 3. _____ | Specific placement |
| Trust signals | [ ] Social proof [ ] Guarantee [ ] Security [ ] Specifics | Which and where |
| Urgency/Scarcity | _____ or "N/A — explain why" | If applicable |
| The memorable thing | _____ | What will they screenshot? |
Required trust signals (pick at least 2):
If you can't fill this table, you're designing decoration, not persuasion.
~80% proven patterns + ~20% unique choices.
Where to add distinctiveness:
Test: "If someone screenshots this, would they know it's from THIS product?"
Complete design specification:
Goal: Build it. Validate against references and quality standards.
→ For implementation details (forms, focus, images, touch, performance): references/craft-details.md
| Category | Check |
|---|---|
| Functional | Primary action obvious? Error states? Works on mobile? |
| Visual | Squint test passes? Spacing rhythm? Typography intentional? Details polished? |
| Persuasion | Hook in 3 sec? 2+ trust signals? Objections addressed? Microcopy has personality? |
| Polish | No orphaned words? Icons aligned? Buttons consistent? Something memorable? |
Place your implementation next to top 3 references.
Target: Match or exceed in 3/4 criteria:
For a complete walkthrough (SaaS churn reduction), see references/example-workflow.md.
| Guide | What's Inside |
|---|---|
| typography.md | Scale, pairing, weight, line-height, letter-spacing, responsive type |
| color.md | Palette structure, neutrals, primary/semantic colors, dark theme, tokens |
| motion.md | Micro-interactions, timing, easing, reduced motion, animation tokens |
| icons.md | Grid system, optical corrections, accessibility, icon+text pairing |
| craft-details.md | Focus states, forms, images, touch, performance, accessibility |
| anti-ai-slop.md | What makes designs look generic and how to avoid it |
| mcp-tools.md | Detailed Refero tool parameters and usage |
| example-workflow.md | Full walkthrough example |
Don't guess. Research with Refero. Craft with intention. Infuse it with soul.