Search real production websites
Search for real websites by description, layout, font, color, screenshot, or domain, rather than relying on mockups or generic inspiration boards.
Fudge
Fudge is a design reference search tool for finding, inspecting, saving, and reusing examples from real production websites.
What Fudge is
Fudge is a design reference search tool that helps people find, inspect, save, and reuse examples from real production websites. The site positions it as a way to query typography, color palettes, UI patterns, and layout details instead of starting from generic inspiration or mockups.
It combines a searchable library of websites with browser capture and export workflows. Users can search by style, see how a page is made, save examples from Chrome, and turn captured visual details into formats such as Tailwind, CSS variables, JSON, and design tokens for use in code or AI-assisted workflows.
Core features
Break designs into design-system data
Inspect pages for typography, color values, spacing, borders, radii, shadows, gradients, layout hierarchy, media roles, and other structural details captured from the source site.
Capture and organize references
Save websites from Chrome and keep screenshots, fonts, colors, spacing, layout, and source context in a reusable library or collection.
Export to code-friendly formats
Export observed styles as Tailwind, CSS variables, JSON, DTCG, and Figma tokens, with support for structured results and reconstruction-ready layout data.
Connect design references to AI tools
Use Fudge inside MCP-compatible AI clients so an agent can query captured references and work with screenshots, palettes, typography, and source context.
Common ways to use Fudge
Gather reference for a new UI
A designer can search for a pricing page, dashboard, onboarding flow, or landing page with a specific look, then inspect the fonts, colors, and layout choices behind it.
Turn a website into implementation-friendly styles
An engineer can save an example site from Chrome and export its visual properties into Tailwind or CSS variables as a starting point for implementation.
Give an agent production design context
An AI user can connect Fudge through an MCP-compatible client so the model can answer questions using captured screenshots, palettes, typography, and source context instead of guessing.
Organize reusable design references
A team can build a personal library of saved websites and collections to revisit examples for future projects rather than searching from scratch each time.
Research font pairings and alternatives
Someone comparing typography choices can search for real websites that use a given font or close alternatives, then see how those fonts are paired in production.
Pros and Cons
Pros
- Built around real production websites rather than mockups.
- Supports searching by practical design attributes such as fonts, colors, layout, screenshot, and domain.
- Combines capture, inspection, saving, and export in one workflow.
- Provides output formats that are useful for implementation, including Tailwind, CSS variables, JSON, and design tokens.
- Shows an MCP-based path for using captured design context inside AI tools.
Cons
- The public pages do not provide a detailed, full integration matrix or documentation for every workflow surface.
- Some capability descriptions are broad rather than deeply documented on the pages provided, so advanced setup details remain unclear from the source alone.
FAQ
What is Fudge for?
Fudge is used to search saved production websites for design references such as layouts, typography, color palettes, spacing, and UI patterns. The pricing and MCP pages also show that it can be used inside AI tools through an MCP-compatible client.
How do you use Fudge in practice?
The source pages show a Chrome extension for saving websites from the browser, and an MCP setup for connecting Fudge to AI tools. The site also says you can search, inspect, save, and reuse designs from real websites.
What can Fudge export?
Yes. The pricing page says Fudge can export website typography, colors, spacing, and design tokens to Tailwind, CSS variables, JSON, and the tokens page also mentions export to Figma tokens and CSS.
How much does Fudge cost?
The pricing page states the subscription is $15/month or $150/year, with yearly pricing shown as 17% off. It also says the plan is for your own design work and that commercial licensing requires contacting the company.
Does Fudge support integrations?
The source does not show a detailed public integration list. It does indicate a Chrome extension, a subscription product, and an MCP-compatible workflow for AI agents.
Quick Facts
- Category
- Design Tool / Developer Tool
- Primary use
- Design inspiration, reference search, and design-token extraction
- Platform
- Web app with a Chrome extension
- AI workflow
- MCP-compatible client support for agent use
- Exports
- Tailwind, CSS variables, JSON, DTCG, and Figma tokens
- Pricing
- $15/month or $150/year for the published plan
Fudge Alternatives
图像大厨imgcook
图像大厨imgcook 是一款设计转代码工具，可将设计稿转换为前端代码，支持 Sketch、Photoshop、VS Code 和 CLI 工作流。
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.
Manta AI
Manta AI is an autonomous web app testing tool that maps app behavior, catches regressions, and generates tests from a URL, no scripts or selectors needed.