得分
60
用戶評分
3.0
支援免費/試用
不支援
起始價格
--
最近更新
9月 29, 2026
概覽
Fudge 是什麼？
Fudge is an AI-powered design reference engine that helps coding agents create better websites by searching and inspecting thousands of real production websites. It provides screenshots alongside measured design information such as typography, colors, spacing, layout, components, page types, media, interactions, contrast, borders, radii, shadows, and gradients. Fudge works through MCP with tools such as Codex, Cursor, and Claude Code, and its Chrome extension lets users save websites and design details for later use. Agents can use Fudge to discover inspiration, compare visual directions, inspect fonts and color systems, match screenshots, and export design systems to Tailwind CSS, CSS variables, or JSON.
Fudge 用於什麼？
主要功能
- Search thousands of real production websites by style, layout, color, font, page type, component, domain, or visual similarity
- Provide screenshots with measured typography, colors, spacing, layout, components, contrast, borders, radii, shadows, gradients, and media details
- Inspect fonts in use and discover similar fonts or font pairings
- Find pages such as pricing pages, dashboards, documentation, onboarding flows, login pages, portfolios, and landing pages
- Match uploaded screenshots with websites that have a similar visual appearance
- Save websites and page sections with the Chrome extension
- Organize saved references into project collections for reuse
- Search and compare saved design references inside AI coding conversations
- Export typography, colors, spacing, radii, shadows, and gradients to Tailwind CSS, CSS variables, or JSON
- Work with MCP-compatible AI coding tools including Codex, Cursor, and Claude Code
- Analyze color roles, accessibility contrast, readable text colors, and color scales
- Preserve media, video, crops, motion, interactions, overlays, clipping, viewport, and capture context when relevant
如何使用 Fudge？
Install Fudge with the setup command npx -y @withfudge/design@latest setup in a compatible AI coding tool. Ask your agent to find design inspiration, fonts, colors, layouts, page types, or websites similar to a screenshot. The agent can inspect the matching references and use their typography, color, spacing, layout, and component details while building. You can also install the Chrome extension to save websites or selected page sections for future searches and project collections.
替代工具
未找到替代工具
優點 & 缺點
暫無資料
使用場景
- Find real design references for a new SaaS landing page
- Discover serif font pairings for an existing sans-serif typeface
- Find websites using a specific font such as Merriweather or Anthropic Serif
- Export a website’s fonts and colors into a Tailwind theme
- Find dark pricing pages with serif display typography, tight radii, soft shadows, and accessible CTA contrast
- Match a screenshot to websites with a similar visual direction
- Study fintech design patterns before building a financial product
- Save and compare website references across multiple design projects
- Give an AI coding agent concrete visual guidance instead of vague prompts such as modern or premium
- Inspect the layout and design system of an established product website before recreating a similar interface
用戶評價
3.0
滿分5分
3.0
暫無評價
成為第一個評價此工具的使用者！