mcpField
F
Fudge

Fudge

Remote
design.withfudge.comDeveloper Tools0Updated 8w ago
RepositoryVisit website

About Fudge

Fudge is a hosted website-reference service for AI coding tools, helping teams research and apply captured design details during interface work. Its Grok Build plugin connects to the service, with OAuth authentication.

Key features

  1. 01Search references by style and page type
  2. 02Inspect typography, colors, and layout
  3. 03Compare references for design direction
  4. 04Find similar fonts and inspect their use
  5. 05Review pages using relevant examples

Use cases

  1. 01Research references for a new interface
  2. 02Check a site's design tokens
  3. 03Compare visual directions before implementation

MCP support

The Grok Build plugin connects to Fudge's hosted MCP server using OAuth. Other MCP clients can connect to the remote endpoint.

Configuration

Remote servers need no local install. Pick your client, then copy the config or install in one click.

Endpointhttps://api.withfudge.com/mcp
Copy install command
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.

Tools

Details

From the project README

Fudge Plugin for Grok Build

Fudge gives AI coding tools website references they can search and inspect while building. It captures the details behind each website, including typography, colors, layout, components, spacing, borders, shadows, gradients, media, and page context.

This plugin connects Grok Build to Fudge's hosted MCP server and includes guidance for using captured website evidence in design research, critique, and implementation.

Installation

In Grok Build, open /plugin, search for Fudge, and install the plugin.

On first connection, Grok opens Fudge's authorization flow in the browser. Sign in at design.withfudge.com and approve access. No API key or local credential file is required.

What you can ask

  • Find website references by style, page type, component, color, or typography.
  • Inspect how a captured website uses fonts, colors, spacing, layout, and design tokens.
  • Compare several references before choosing a design direction.
  • Find fonts with a similar visual character and inspect where captured fonts are used.
  • Review a website with relevant examples from the Fudge library.
  • Use captured design evidence while writing or improving interface code.

Example prompts:

Find dark SaaS pricing pages with serif display type and restrained shadows.

What fonts, colors, spacing, and border radii are used on linear.app?

Find fonts similar to Anthropic Serif, then show me free alternatives.

Review this landing page and find relevant website references for the changes you recommend.

Other MCP clients

Add the remote server to Claude Code:

claude mcp add --transport http fudge https://api.withfudge.com/mcp

Other MCP clients can use the checked-in .mcp.json configuration.

Authentication and security

The plugin connects to Fudge's hosted MCP endpoint at https://api.withfudge.com/mcp. Authentication is handled through OAuth. Account and plan limits apply.

The plugin contains no executable hooks, installation scripts, or local shell commands. It does not read environment variables, API keys, project files, or other local credentials. The hosted service may return Fudge-owned links and visual previews from design.withfudge.com, api.withfudge.com, and pin.fontofweb.com.

Links

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.