Bring Fudge’s design research into your coding workflow
Search real websites, compare patterns, identify fonts and colors, and create implementation-ready design guidance without leaving your AI coding tool.
Install MCP serverWhat you can do
Find the right website references
Search real pages by industry, page type, layout, color, font, screenshot, URL, or visual idea.
Understand how a live website is designed
Inspect its typography, colors, spacing, layout, components, media, and rendered styles.
Extract a website’s color palette and check contrast
See a website’s colors as a palette and check the contrast between selected text and background colors.
Identify a website’s fonts and typography
Check its font families, stacks, sizes, weights, line heights, and where each style appears.
Find practical alternatives to a typeface
Compare visually similar typefaces, preview the closest matches, and narrow them by licence or availability.
Compare design directions before you commit
Compare how different websites approach layout, hierarchy, typography, color, and page structure.
Review a website and decide what to change
Share a page or screenshot, uncover specific hierarchy and styling problems, and support improvements with relevant references.
Create a DESIGN.md and implementation-ready design system
Turn a live website into DESIGN.md, Tailwind, CSS variables, design tokens, or structured JSON.
Save websites and reuse them in later projects
Capture websites with the Chrome extension, bookmark useful references, and return to their screenshots and design details later.
Questions you can ask from your AI tool
Install Fudge for your AI tools
1. Install Fudge
Sign in or subscribe here, then run the setup command shown for your account.
2. Configure another MCP client
Subscribers can also reveal the manual configuration for another supported client.
3. Start with a real design question
Ask for a design outcome and let Fudge bring back relevant website references and details.