Fudge
AI design reference engine for coding agents
Puan
60
Kullanıcı Değerlendirmesi
3.0
Ücretsiz/Deneme Desteği
Desteklenmez
Başlangıç Fiyatı
--
Son Güncelleme
Eyl 29, 2026
Genel Bakış
Fudge nedir?
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.
Üst Özellikler
- 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 nasıl kullanılır?
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.
Alternatif Araçlar
Alternatif araç bulunamadı
Artılar & Eksiler
Veri Yok
Kullanım Durumları
- 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
Kullanıcı Değerlendirmeleri
3.0
5 üzerinden
3.0
Henüz değerlendirme yok
Bu aracı değerlendiren ilk kişi ol!