Fudge
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.
Fudge's Core Features
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
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
Fudge's Use Cases
Find real design references for a new SaaS landing page
Discover serif font pairings for an existing sans-serif typeface
Find websites using a specific font such as Merriweather or Anthropic Serif
Export a website’s fonts and colors into a Tailwind theme
Find dark pricing pages with serif display typography, tight radii, soft shadows, and accessible CTA contrast
Match a screenshot to websites with a similar visual direction
Study fintech design patterns before building a financial product
Save and compare website references across multiple design projects
Give an AI coding agent concrete visual guidance instead of vague prompts such as modern or premium
Inspect the layout and design system of an established product website before recreating a similar interface
FAQ from Fudge
What does Fudge provide to an AI coding agent?
Which AI coding tools work with Fudge?
Can Fudge search for fonts and font pairings?
Can Fudge export a website’s design system?
Can I save websites that I discover?
Does Fudge support screenshot-based visual search?
What does Fudge save beyond a screenshot?
Does Fudge have a free plan?
Does the free plan require a credit card?
How is Fudge different from design inspiration galleries?
Fudge Reviews (0)
Fudge Pricing
Free
$0 per month
25 Fudge queries per day, MCP server access, and search and inspection of real website references. No credit card required.
Pro
$29 per month
Unlimited Fudge queries, website and font search, screenshot matching, color tools, Chrome saving, Tailwind v4, CSS variable and JSON exports, unlimited collections, and priority support. Yearly billing offers 17% off.
Analytic of Fudge
Fudge Website Traffic Analysis
Geography
Top 2 Regions
Fudge Launch embeds
Use website badges to drive support from your community for your Toolify Launch. They're easy to embed on your homepage or footer.
Alternative of Fudge
Social Listening