# Fudge vs Refero

[Open the live Fudge conversation](https://design.withfudge.com/share/fudge-vs-refero)

Last updated: 2026-07-28

Use **Refero** when you want to browse a curated collection of polished product UI. Use **Fudge** when you want your AI to work directly from a real website, understand its design system, and carry that direction into the product you are building.

Refero is primarily a place to browse. Fudge joins discovery to execution: search the library or add a live website yourself, inspect the useful details, and keep those details in the same AI conversation as your code.

## What each tool is better for

| Choose Fudge when… | Choose Refero when… |
| --- | --- |
| You want to use any live website now rather than wait for it to be curated. | You want to browse a curated selection of product screens. |
| Your AI needs fonts, colors, layout relationships, and source details. | You want polished UI references to look through manually. |
| You want screenshot search, similar-font search, or compound searches. | You want to search by common page and component categories. |
| You want to turn a reference into Tailwind, CSS, tokens, or `llm.txt`. | You mainly want inspiration rather than a build handoff. |

## Capability comparison

| Capability | Fudge | Refero |
| --- | :---: | :---: |
| **Library and capture** |  |  |
| Real websites, not mockups | ✓ | ✓ |
| Saved from real websites by people | ✓ | — |
| Use any live website immediately—no editorial queue | ✓ | — |
| Chrome extension | ✓ | — |
| **Search and workflow** |  |  |
| Works inside AI coding tools | ✓ | ✓ |
| Search by description | ✓ | ✓ |
| Search by page type, section, or component | ✓ | ✓ |
| Search by screenshot and similar fonts | ✓ | — |
| Combine multiple saved websites in one query | ✓ | — |
| **Design details** |  |  |
| Typography, type scales, colors, and design tokens | ✓ | ✓ |
| Font designer and foundry information | ✓ | — |
| Exact font source files | ✓ | — |
| Element-level color usage and contrast | ✓ | — |
| Spacing, borders, radii, shadows, and gradients | ✓ | ✓ |
| Page structure and layout relationships | ✓ | — |
| Purpose of images and videos | ✓ | — |
| Source URL and capture details | ✓ | — |
| Video and page interactions | ✓ | — |
| **Build output** |  |  |
| Tailwind, CSS, and design-token exports | ✓ | ✓ |
| `llm.txt` | ✓ | — |

If the job is “browse polished product UI,” Refero is useful. If the job is “put this website in front of my AI and build from it,” use Fudge.