Fudge

Name: Fudge
Author: scroobius-pip

远程服务

design.withfudge.com开发工具08 周前更新

代码仓库访问官网

关于 Fudge

Fudge 是面向 AI 编码工具的托管网站参考服务，帮助团队在界面设计中研究和应用已采集的设计细节。其 Grok Build 插件通过 OAuth 接入服务。

主要功能

01按风格和页面类型搜索参考
02检查字体、颜色与布局
03比较参考以确定设计方向
04查找相似字体并查看使用情况
05结合相关示例评审页面

适用场景

01为新界面寻找设计参考
02查看网站的设计令牌
03实现前比较视觉方向

MCP 相关

Grok Build 插件通过 OAuth 连接 Fudge 的托管 MCP 服务。其他 MCP 客户端也可连接其远程端点。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://api.withfudge.com/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http scroobius-pip-fudge https://api.withfudge.com/mcp

Cursor.cursor/mcp.json{"mcpServers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"scroobius-pip-fudge":{"serverUrl":"https://api.withfudge.com/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

Grok Build 的 Fudge 插件

Fudge 为 AI 编码工具提供网站参考，方便它们在构建过程中搜索和查看。它会捕获每个网站背后的详细信息，包括字体、颜色、布局、组件、间距、边框、阴影、渐变、媒体内容和页面上下文。

此插件将 Grok Build 连接到 Fudge 托管的 MCP 服务，并提供使用已捕获的网站证据进行设计研究、评审和实现的指导。

安装

在 Grok Build 中，打开 /plugin，搜索 Fudge，然后安装此插件。

首次连接时，Grok 会在浏览器中打开 Fudge 授权流程。在 design.withfudge.com 登录并批准访问权限。无需 API 密钥或本地凭据文件。

可以提出哪些请求

按风格、页面类型、组件、颜色或字体查找网站参考。
检查已捕获的网站如何使用字体、颜色、间距、布局和设计令牌。
在选择设计方向之前比较多个参考。
查找视觉特征相似的字体，并检查已捕获字体的使用位置。
使用 Fudge 资源库中的相关示例评审网站。
在编写或改进界面代码时使用已捕获的设计证据。

提示词示例：

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.

其他 MCP 客户端

将远程服务添加到 Claude Code：

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

其他 MCP 客户端可以使用已纳入代码库的 .mcp.json 配置。

身份验证与安全

此插件通过 OAuth 进行身份验证，并连接到 Fudge 托管的 MCP 端点 https://api.withfudge.com/mcp。适用账户和套餐限制。

此插件不包含可执行钩子、安装脚本或本地 Shell 命令。它不会读取环境变量、API 密钥、项目文件或其他本地凭据。托管服务可能会返回来自 design.withfudge.com、api.withfudge.com 和 pin.fontofweb.com 的 Fudge 自有链接和视觉预览。