# Refero MCP vs Fudge for AI coding agents [Open the live Fudge conversation](https://design.withfudge.com/share/refero-design-mcp) Last updated: 2026-08-25 Refero MCP and Fudge both help AI coding agents work from design references, but they suit different jobs. Choose Refero when you mainly want searchable product-interface examples and structured screen metadata. Choose Fudge when you need to inspect a captured website in detail, compare references, and turn observed styles into implementation files. ## The practical choice Use this quick rule: - **Choose Refero** for product-interface and user-flow discovery inside an MCP-compatible AI tool. - **Choose Fudge** when the reference already matters and you need to examine its page structure, layout, typography, colors, spacing, components, or interaction details. - **Use both** when you want Refero to locate a useful pattern and Fudge to study a captured page closely before building. Refero's official MCP documentation describes remote access for compatible AI tools, along with product-interface and user-flow search. Its structured screen metadata is useful when your request sounds like, "Find onboarding screens for a fintech app" or "Show dashboard patterns with a left navigation." Fudge is better suited to the next questions: Which font family and weights appear on this page? How are the cards spaced? What colors act as background, accent, border, and text? Which sections appear in the page structure? What changes between viewport or page states? Those checks help an agent move from inspiration to a more faithful build. Open the examples below and compare the first screen before borrowing a pattern. The Raycast and boringBar references are useful for studying how focused utility products place proof and screenshots near a main action. Monocle offers a quieter feature rhythm, while Cosmos is a useful reference for readable text on a warm editorial canvas. ## Captured pages [![Raycast - Your shortcut to everything](https://pin.fontofweb.com/4674?format=jpg)](https://design.withfudge.com/share/pin-4674) [Raycast - Your shortcut to everything](https://design.withfudge.com/share/pin-4674) [![boringBar - Taskbar Dock Replacement for macOS](https://pin.fontofweb.com/8813?format=jpg)](https://design.withfudge.com/share/pin-8813) [boringBar - Taskbar Dock Replacement for macOS](https://design.withfudge.com/share/pin-8813) [![Monocle for macOS - Noise-cancelling for your screen](https://pin.fontofweb.com/5622?format=jpg)](https://design.withfudge.com/share/pin-5622) [Monocle for macOS - Noise-cancelling for your screen](https://design.withfudge.com/share/pin-5622) [![Welcome to Cosmos](https://pin.fontofweb.com/4489?format=jpg)](https://design.withfudge.com/share/pin-4489) [Welcome to Cosmos](https://design.withfudge.com/share/pin-4489) ## Side-by-side comparison | Job | Refero MCP | Fudge | |---|---|---| | Find interface inspiration | Product and flow searches | Searches captured references by description and observed details | | Inspect a specific page | Structured screen metadata | Page structure, sections, components, layout, viewport, and state | | Check typography | Use the returned reference data | Families, files, variants, sizes, weights, and line heights | | Check visual styling | Screen-level reference information | Colors, roles, frequency, contrast, spacing, borders, radii, shadows, gradients, and component styles | | Study motion and overlays | Verify what the returned reference includes | Captured images, video, crops, playback, motion, interactions, overlays, and clipping | | Prepare implementation output | DESIGN.md, Tailwind v4, CSS variables, and design tokens through Refero Styles | Observed details exportable to Tailwind v4, CSS, JSON, or DESIGN.md | The overlap is real. The useful distinction is depth and starting point. Refero starts with a searchable design-reference service. Fudge starts with captured references and gives you a broader inspection pass over what is visibly present. ## A repeatable workflow 1. Describe the product, screen, or flow you want to study. 2. Search Refero for broad patterns if you do not yet have a reference. 3. Save or capture the strongest examples. 4. In Fudge, inspect the page structure before copying visual details. 5. Check type, color roles, spacing, borders, radii, shadows, and responsive states. 6. Compare two or three references and keep only patterns that support the same user task. 7. Ask your agent to implement the selected pattern, separating observed details from choices it still needs to make. 8. Review the result against the references rather than assuming an exported file represents an official internal design system. Refero's [MCP getting-started guide](https://doc.refero.design/mcp/getting-started) is the right place to verify its connection and search workflow. For ready-to-use style references, see [Refero Styles](https://styles.refero.design/). If your main need is detailed inspection of captured pages and comparison across references, [review the Fudge and Refero examples](/share/fudge-vs-refero). ## Use this in your AI agent > Find two strong references for a [product type] [screen or flow]. Use Refero for broad interface discovery, then use Fudge to inspect the selected references. Report the page structure, typography families and weights, color roles, spacing, borders, radii, shadows, responsive changes, and interaction details that are visibly supported. Separate observations from recommendations, compare the references, and finish with a concise implementation checklist for [framework]. [Install Fudge for your AI agent](/mcp). --- Start with Fudge when you already have a website reference and want to understand its visible design system. Inspect the page structure first, then check typography, colors, spacing, borders, radii, shadows, images, and responsive or interactive states present in the capture. A useful order is: 1. Identify the main sections and repeated components. 2. Record font families, variants, sizes, weights, and line heights. 3. Group colors by role instead of copying isolated values. 4. Note spacing rhythm, container widths, card treatment, borders, and corner radii. 5. Check whether motion, overlays, crops, or clipping affect the design. 6. Compare the reference with alternatives before implementing. Refero remains useful when you want more examples of the same screen or flow. Keep observed details separate from decisions about component structure, accessibility, content, and behavior. --- Ask the agent to turn the comparison into a bounded implementation plan. Give it the target screen, framework, and reference links or captures, and ask it to separate direct observations from proposed decisions. The plan should include a section and component inventory, font choices, semantic color roles, spacing and responsive rules, reusable states, image treatment, motion and overlays where supported, accessibility requirements, and a short review checklist for the same viewport sizes. Treat an export as a starting point based on observed details, not proof that you own another product's private design system. Ask the agent to explain each deliberate deviation so you can review the result quickly. [Install Fudge for your AI agent](/mcp). ## Related questions - [Refero.design MCP guide: Refero vs Fudge](/share/refero-design-mcp-guide-eea94f) - [Refero alternative with design system export](/share/refero-alternative-with-design-system-export) - [Paper Design vs Fudge for design references](/share/paper-design-vs-fudge-for-design-references) - [A1 Gallery alternative for AI coding agents](/share/a1-gallery-alternative-for-ai-coding-agents)