Fudge MCP
AI design reference engine for coding agents
Source rating 5.0
(99)
1.5k views
1.5k/mo traffic
0 saves
Freemium
Free + from $29 per month
Verdict
A quick read before you dig into the full page.
- Best if
- AI design reference engine for coding agents
- Skip if
- You need enterprise SLAs or a fully managed team plan right away
- Pick this when
- Freemium · Free + from $29 per month
Overview
Fudge is an AI-powered design reference engine that helps coding agents create better websites by searching and inspecting thousands of real production websites. It provides screenshots alongside measured design information such as typography, colors, spacing, layout, components, page types, media, interactions, contrast, borders, radii, shadows, and gradients. Fudge works through MCP with tools such as Codex, Cursor, and Claude Code, and its Chrome extension lets users save websites and design details for later use. Agents can use Fudge to discover inspiration, compare visual directions, inspect fonts and color systems, match screenshots, and export design systems to Tailwind CSS, CSS variables, or JSON.
Access & connections
Where you can use Fudge MCP, and what it plugs into.
Platforms
Capabilities
What this tool accepts, produces, and is strongest at.
Highlights
- Search thousands of real production websites by style, layout, color, font, page type, component, domain, or visual similarity
- Provide screenshots with measured typography, colors, spacing, layout, components, contrast, borders, radii, shadows, gradients, and media details
- Inspect fonts in use and discover similar fonts or font pairings
- Find pages such as pricing pages, dashboards, documentation, onboarding flows, login pages, portfolios, and landing pages
- Match uploaded screenshots with websites that have a similar visual appearance
- Save websites and page sections with the Chrome extension
- Organize saved references into project collections for reuse
- Search and compare saved design references inside AI coding conversations
Show 4 more
- Export typography, colors, spacing, radii, shadows, and gradients to Tailwind CSS, CSS variables, or JSON
- Work with MCP-compatible AI coding tools including Codex, Cursor, and Claude Code
- Analyze color roles, accessibility contrast, readable text colors, and color scales
- Preserve media, video, crops, motion, interactions, overlays, clipping, viewport, and capture context when relevant
FAQ 12
What is Fudge?
Fudge is an AI-powered design reference engine that helps coding agents create better websites by searching and inspecting thousands of real production websites. It provides screenshots alongside measured design information such as typography, colors, spacing, layout, components, page types, media, interactions, contrast, borders, radii, shadows, and gradients. Fudge works through MCP with tools such as Codex, Cursor, and Claude Code, and its Chrome extension lets users save websites and design details for later use. Agents can use Fudge to discover inspiration, compare visual directions, inspect fonts and color systems, match screenshots, and export design systems to Tailwind CSS, CSS variables, or JSON.
How to use Fudge?
Install Fudge with the setup command npx -y @withfudge/design@latest setup in a compatible AI coding tool. Ask your agent to find design inspiration, fonts, colors, layouts, page types, or websites similar to a screenshot. The agent can inspect the matching references and use their typography, color, spacing, layout, and component details while building. You can also install the Chrome extension to save websites or selected page sections for future searches and project collections.
What does Fudge provide to an AI coding agent?
Fudge provides live website references, screenshots, typography, colors, spacing, layouts, components, media, and interaction details for design-informed development.
Which AI coding tools work with Fudge?
Fudge works with Codex, Cursor, Claude Code, and other AI coding tools that support MCP servers.
Can Fudge search for fonts and font pairings?
Yes. Fudge can find websites using a specific font, discover similar fonts, and show typefaces used together.
Can Fudge export a website’s design system?
Yes. Fudge can export typography, colors, spacing, radii, shadows, and gradients as Tailwind v4, CSS variables, design tokens, or structured JSON.
Can I save websites that I discover?
Yes. The Chrome extension lets you save a live website or part of a page along with its screenshots and design details.
Does Fudge support screenshot-based visual search?
Yes. You can provide a screenshot and find websites with a similar visual look and feel.
What does Fudge save beyond a screenshot?
It can save the source URL, page role, sections, components, layout, viewport, page state, typography, colors, spacing, media, interactions, and other design information.
Does Fudge have a free plan?
Yes. The Free plan costs $0 per month and includes 25 Fudge queries per day, MCP server access, and searches of real website references.
Does the free plan require a credit card?
No. The website states that the free plan requires no credit card.
How is Fudge different from design inspiration galleries?
Fudge lets an AI agent search, inspect, compare, and reuse detailed information from live websites instead of only browsing static visual examples.
Related tools
Recommended
Fudge MCP
Free + from $29 per month