Fudge MCP

Product Introduction

1. Definition: Fudge MCP is a Model Context Protocol (MCP) server and design reference engine for AI coding agents. It is a specialized tool that provides structured, data-rich design evidence from nearly 10,000 real-world website captures.
2. Core Value Proposition: It exists to solve the "adjective problem" in AI-assisted development by replacing vague design prompts with measurable, evidence-based references. Instead of asking an AI to generate a "modern, premium" interface, developers can instruct their agent to search Fudge's library for specific fonts, colors, layouts, and components, leading to more accurate and tasteful UI outputs.

Main Features

1. Structured Design Evidence Capture: Fudge doesn't just save screenshots. It programmatically captures and structures over 30 data points per website, including typography (font families, weights, sizes, line heights), color roles (primary, secondary, background, text), spacing scales, border radii, shadows, layout hierarchy, component types (e.g., pricing cards, navigation), and page context (URL, viewport, date). This happens locally via its Chrome extension.
2. Multi-Modal Search for AI Agents: The Fudge MCP server exposes tools that allow AI agents like those in Cursor or Claude Code to perform complex, multi-faceted searches. Agents can query by visual similarity to a screenshot, find fonts similar to a target (e.g., "fonts similar to Anthropic Serif"), filter by page type (e.g., "dark desktop pricing page"), color schemes, or specific design attributes ("accessible CTA contrast, tight radii").
3. Design System Export & Integration: A key technical feature is the ability to export a captured website's design system into production-ready code. AI agents can command Fudge to export the typography, color palette, and spacing from a reference site (like Stripe or Linear) directly into Tailwind CSS v4 configuration, CSS custom properties (variables), or structured JSON for use in the current project.

Problems Solved

1. Pain Point: The disconnect between AI-generated UI code and established, production-quality design patterns. AI agents often hallucinate design specs (fonts, spacing, colors) when recreating interfaces from screenshots alone, leading to generic or inaccurate implementations.
2. Target Audience: Front-end developers and engineers using AI coding tools (Cursor, Claude Code, Codex); UI/UX designers seeking concrete inspiration from live sites; product teams needing to maintain design consistency by referencing proven patterns from leading apps.
3. Use Cases: An engineer prompting their AI agent to "build a dashboard like Linear.app" can use Fudge to provide the agent with Linear's exact font stack, color values, and spacing scale. A designer looking for "SaaS landing pages with oversized type" can get real examples. A developer can find free font alternatives to a proprietary typeface by searching Fudge's corpus.

Unique Advantages

1. Differentiation: Unlike static design inspiration galleries (Dribbble, Awwwards) or UI screenshot libraries (Mobbin, Refero), Fudge is a dynamic, queryable database of measured design data integrated directly into the AI development workflow. Competitors show what a design looks like; Fudge provides the specs (the "how") and makes them actionable for an AI agent.
2. Key Innovation: The combination of the MCP protocol for seamless AI tool integration, a local-first Chrome extension for user-contributed captures, and a sophisticated analysis engine that extracts and indexes design tokens from live websites. This creates a living, crowd-sourced library of design evidence that grows with user discovery, not a fixed, editorially-curated list.

Frequently Asked Questions (FAQ)

1. How does Fudge MCP work with AI coding tools like Cursor? Fudge installs as a local MCP (Model Context Protocol) server. After running the setup command (npx -y @withfudge/design@latest setup), your AI coding tool gains new capabilities to search Fudge's design library, inspect website details, and export design tokens directly within the chat interface, using the structured data instead of guessing from images.
2. What is the difference between Fudge and Mobbin for design inspiration? While both provide website references, Mobbin is primarily a visual gallery for human browsing. Fudge is an engine built for AI agents, providing structured, queryable design data (exact fonts, HEX colors, spacing values) and direct integration into coding workflows via MCP. Fudge answers specific technical questions an AI agent might ask.
3. Can I use Fudge to find free alternatives to expensive fonts? Yes. A core use case is font similarity search. You can ask your AI agent to "find free fonts similar to [Premium Font]" and Fudge will return visual matches from its corpus (e.g., PT Serif as a free alternative to Anthropic Serif) and verify their free/open-source status by linking to official repositories like Google Fonts.
4. What does the Fudge Chrome extension capture and save? The extension captures a comprehensive dataset: a full-page screenshot, the live source URL, all web fonts with their source files, the computed color palette with CSS property mappings, spacing and layout measurements, identified components, and media assets. This creates a reproducible design reference for your private library.
5. Is Fudge suitable for creating a complete design system from a reference website? Absolutely. The "Export a design system" feature allows your AI agent to extract all typography scales, color roles (with contrast calculations), border radii, and shadow values from a saved website and convert them into a Tailwind config, CSS variables, or JSON tokens, providing a foundational system for a new project.