Fudge
Qu'est-ce que Fudge ?
Fudge est un moteur de références design alimenté par l’IA qui aide les agents de programmation à créer de meilleurs sites web en recherchant et en analysant des milliers de sites réellement en production. Il fournit des captures d’écran accompagnées d’informations de design mesurées, comme la typographie, les couleurs, les espacements, la mise en page, les composants, les types de pages, les médias, les interactions, le contraste, les bordures, les rayons, les ombres et les dégradés. Fudge fonctionne via MCP avec des outils comme Codex, Cursor et Claude Code. Son extension Chrome permet également d’enregistrer des sites et des détails de design pour les consulter ultérieurement. Les agents peuvent utiliser Fudge pour trouver de l’inspiration, comparer différentes directions visuelles, analyser les polices et les systèmes de couleurs, rechercher des correspondances à partir de captures d’écran et exporter des systèmes de design vers Tailwind CSS, des variables CSS ou du JSON.
Comment utiliser Fudge ?
Installez Fudge avec la commande npx -y @withfudge/design@latest setup dans un outil de programmation assistée par IA compatible. Demandez à votre agent de trouver de l’inspiration, des polices, des couleurs, des mises en page, des types de pages ou des sites similaires à une capture d’écran. L’agent peut analyser les références correspondantes et reprendre leurs détails de typographie, de couleurs, d’espacement, de mise en page et de composants lors de la création. Vous pouvez également installer l’extension Chrome pour enregistrer des sites ou des sections de pages sélectionnées afin de les retrouver lors de recherches ultérieures et de les organiser dans des collections de projets.
Fonctionnalités de base de Fudge
Rechercher des milliers de sites réellement en production par style, mise en page, couleur, police, type de page, composant, domaine ou similarité visuelle
Fournir des captures d’écran accompagnées de données mesurées sur la typographie, les couleurs, les espacements, la mise en page, les composants, le contraste, les bordures, les rayons, les ombres, les dégradés et les médias
Analyser les polices utilisées et découvrir des polices similaires ou des associations de polices
Trouver des pages telles que des pages tarifaires, des tableaux de bord, de la documentation, des parcours d’onboarding, des pages de connexion, des portfolios et des landing pages
Comparer une capture d’écran à des sites ayant une apparence visuelle similaire
Enregistrer des sites et des sections de pages avec l’extension Chrome
Organiser les références enregistrées dans des collections de projets pour les réutiliser
Rechercher et comparer les références enregistrées directement dans les conversations avec les agents de programmation
Exporter la typographie, les couleurs, les espacements, les rayons, les ombres et les dégradés vers Tailwind CSS, des variables CSS ou du JSON
Fonctionner avec des outils de programmation assistée par IA compatibles avec MCP, notamment Codex, Cursor et Claude Code
Analyser les rôles des couleurs, le contraste d’accessibilité, les couleurs de texte lisibles et les échelles chromatiques
Conserver les médias, vidéos, recadrages, animations, interactions, superpositions, découpages, dimensions de la fenêtre et contexte de capture lorsque cela est pertinent
Les cas d'utilisation de Fudge
Trouver de vraies références design pour une nouvelle landing page SaaS
Découvrir des associations de polices serif pour une police sans serif existante
Trouver des sites utilisant une police spécifique, comme Merriweather ou Anthropic Serif
Exporter les polices et les couleurs d’un site dans un thème Tailwind
Trouver des pages tarifaires sombres avec une typographie d’affichage serif, des rayons peu marqués, des ombres douces et un contraste accessible pour les boutons d’appel à l’action
Comparer une capture d’écran à des sites partageant une direction visuelle similaire
Étudier les tendances de design dans la fintech avant de créer un produit financier
Enregistrer et comparer des références de sites pour plusieurs projets de design
Donner à un agent de programmation des indications visuelles concrètes plutôt que des consignes vagues comme « moderne » ou « premium »
Analyser la mise en page et le système de design d’un site produit établi avant de recréer une interface similaire
FAQ de Fudge
Que fournit Fudge à un agent de programmation basé sur l’IA ?
Quels outils de programmation assistée par IA fonctionnent avec Fudge ?
Fudge peut-il rechercher des polices et des associations de polices ?
Fudge peut-il exporter le système de design d’un site ?
Puis-je enregistrer les sites que je découvre ?
Fudge prend-il en charge la recherche visuelle à partir de captures d’écran ?
Que sauvegarde Fudge en plus d’une capture d’écran ?
Fudge propose-t-il une offre gratuite ?
L’offre gratuite nécessite-t-elle une carte bancaire ?
En quoi Fudge se distingue-t-il des galeries d’inspiration design ?
Fudge Avis (0)
Fudge Tarifs
Gratuit
0 $ par mois
25 requêtes Fudge par jour, accès au serveur MCP et recherche et analyse de références issues de sites réels. Aucune carte bancaire requise.
Pro
29 $ par mois
Requêtes Fudge illimitées, recherche de sites et de polices, comparaison de captures d’écran, outils de couleur, enregistrement via Chrome, exports Tailwind v4, variables CSS et JSON, collections illimitées et assistance prioritaire. La facturation annuelle permet d’économiser 17 %.
Analyse de Fudge
Fudge Analyse du trafic du site Web
Trafic géographique
Top 2 Régions
Fudge Lancer les intégrations
Utilisez les badges de site web pour obtenir le soutien de votre communauté lors du lancement de Toolify. Ils sont faciles à intégrer à votre page d'accueil ou à votre pied de page.
Alternative à Fudge
Écoute des médias sociaux