AI工作站

Fudge是一款由AI驱动的设计参考引擎，帮助编程代理通过搜索和分析数千个真实生产环境网站，创建更优秀的网站。它不仅提供网站截图，还提供经过测量的设计信息，包括字体排版、颜色、间距、布局、组件、页面类型、媒体、交互、对比度、边框、圆角、阴影和渐变等。

Fudge通过MCP与Codex、Cursor和Claude Code等工具协作，其Chrome扩展可以让用户保存网站和设计细节，方便日后使用。代理可以使用Fudge获取设计灵感、比较视觉方向、分析字体和配色系统、匹配截图，并将设计系统导出为Tailwind CSS、CSS变量或JSON。

一、产品核心功能：

1、按风格、布局、颜色、字体、页面类型、组件、域名或视觉相似度，搜索数千个真实生产环境网站。

2、提供网站截图以及经过测量的字体排版、颜色、间距、布局、组件、对比度、边框、圆角、阴影、渐变和媒体等细节。

3、分析网站所使用的字体，并发现相似字体或字体搭配。

4、查找定价页、仪表盘、文档、引导流程、登录页、作品集和落地页等页面。

5、上传截图，并查找视觉外观相似的网站。

6、使用Chrome扩展保存网站和页面区域。

7、将保存的参考案例整理到项目收藏集中，方便重复使用。

8、在AI编程对话中搜索和比较已保存的设计参考。

9、将字体排版、颜色、间距、圆角、阴影和渐变导出为Tailwind CSS、CSS变量或JSON。

10、支持Codex、Cursor和Claude Code等兼容MCP的AI编程工具。

11、分析颜色角色、无障碍对比度、易读文本颜色和颜色阶梯。

12、在相关情况下保留媒体、视频、裁剪方式、动效、交互、遮罩、裁切、视口和采集环境等信息。

二、典型使用场景：

1、为新的SaaS落地页寻找真实设计参考。

2、为现有无衬线字体寻找衬线字体搭配。

3、查找使用Merriweather或Anthropic Serif等特定字体的网站。

4、将某个网站的字体和颜色导出到Tailwind主题中。

5、查找采用衬线展示字体、紧凑圆角、柔和阴影且CTA对比度符合无障碍要求的深色定价页。

6、将截图与视觉方向相似的网站进行匹配。

7、在构建金融产品前研究金融科技领域的设计模式。

8、跨多个设计项目保存和比较网站参考。

9、为AI编程代理提供具体的视觉指导，避免仅使用"现代"或"高级"等模糊描述。

10、在复刻类似界面前，分析成熟产品网站的布局和设计系统。

三、标准使用流程：

1、安装Fudge：在兼容的AI编程工具中，使用命令 `npx -y @withfudge/design@latest setup` 安装Fudge。

2、搜索设计参考：让代理查找设计灵感、字体、颜色、布局、页面类型，或查找与某张截图相似的网站。

3、分析参考案例：代理分析匹配到的参考案例，获取经过测量的字体排版、颜色、间距、布局、组件、对比度、边框、圆角、阴影、渐变等细节。

4、应用设计：在构建网站时使用参考案例中的字体排版、颜色、间距、布局和组件细节，或将设计系统导出为Tailwind CSS、CSS变量或JSON。

5、保存参考：安装Chrome扩展，保存网站或选中的页面区域，归入项目收藏集，以便日后搜索和重复使用。

6、比较参考：在AI编程对话中搜索和比较已保存的设计参考，选择最合适的视觉方向。

数据统计