Fudge
¿Qué es Fudge?
Fudge es un motor de referencias de diseño basado en IA que ayuda a los agentes de programación a crear mejores sitios web mediante la búsqueda y el análisis de miles de sitios web reales en producción. Proporciona capturas de pantalla junto con información de diseño medida, como tipografías, colores, espaciado, distribución, componentes, tipos de página, recursos multimedia, interacciones, contraste, bordes, radios, sombras y degradados. Fudge funciona mediante MCP con herramientas como Codex, Cursor y Claude Code, y su extensión de Chrome permite guardar sitios web y detalles de diseño para usarlos más adelante. Los agentes pueden utilizar Fudge para descubrir inspiración, comparar direcciones visuales, analizar fuentes y sistemas de color, comparar capturas de pantalla y exportar sistemas de diseño a Tailwind CSS, variables CSS o JSON.
¿Cómo usar Fudge?
Instala Fudge con el comando de configuración npx -y @withfudge/design@latest setup en una herramienta de programación con IA compatible. Pide a tu agente que encuentre inspiración de diseño, fuentes, colores, distribuciones, tipos de página o sitios web similares a una captura de pantalla. El agente puede analizar las referencias encontradas y utilizar sus detalles de tipografía, color, espaciado, distribución y componentes durante la creación. También puedes instalar la extensión de Chrome para guardar sitios web o secciones concretas de páginas para futuras búsquedas y colecciones de proyectos.
Características principales de Fudge
Buscar miles de sitios web reales en producción por estilo, distribución, color, fuente, tipo de página, componente, dominio o similitud visual
Proporcionar capturas de pantalla con detalles medidos sobre tipografía, colores, espaciado, distribución, componentes, contraste, bordes, radios, sombras, degradados y recursos multimedia
Analizar las fuentes utilizadas y descubrir fuentes similares o combinaciones tipográficas
Encontrar páginas como páginas de precios, paneles de control, documentación, flujos de incorporación, páginas de inicio de sesión, portafolios y páginas de aterrizaje
Comparar capturas de pantalla con sitios web que tengan una apariencia visual similar
Guardar sitios web y secciones de páginas con la extensión de Chrome
Organizar las referencias guardadas en colecciones de proyectos para reutilizarlas
Buscar y comparar referencias de diseño guardadas dentro de conversaciones con agentes de programación basados en IA
Exportar tipografías, colores, espaciado, radios, sombras y degradados a Tailwind CSS, variables CSS o JSON
Funcionar con herramientas de programación con IA compatibles con MCP, como Codex, Cursor y Claude Code
Analizar los roles de los colores, el contraste de accesibilidad, los colores de texto legibles y las escalas cromáticas
Conservar información sobre recursos multimedia, vídeo, recortes, movimiento, interacciones, superposiciones, recortes de contenido, viewport y contexto de captura cuando sea relevante
Casos de uso de Fudge
Encontrar referencias de diseño reales para una nueva página de aterrizaje de SaaS
Descubrir combinaciones de fuentes serif para una tipografía sans serif existente
Encontrar sitios web que utilicen una fuente concreta, como Merriweather o Anthropic Serif
Exportar las fuentes y colores de un sitio web a un tema de Tailwind
Encontrar páginas de precios oscuras con tipografía serif para titulares, radios reducidos, sombras suaves y contraste accesible en los CTA
Comparar una captura de pantalla con sitios web que tengan una dirección visual similar
Estudiar patrones de diseño fintech antes de crear un producto financiero
Guardar y comparar referencias de sitios web en varios proyectos de diseño
Proporcionar a un agente de programación con IA indicaciones visuales concretas en lugar de instrucciones vagas como «moderno» o «premium»
Analizar la distribución y el sistema de diseño de un sitio web de producto consolidado antes de recrear una interfaz similar
FAQ de Fudge
¿Qué proporciona Fudge a un agente de programación con IA?
¿Con qué herramientas de programación con IA funciona Fudge?
¿Puede Fudge buscar fuentes y combinaciones tipográficas?
¿Puede Fudge exportar el sistema de diseño de un sitio web?
¿Puedo guardar los sitios web que descubra?
¿Fudge permite realizar búsquedas visuales a partir de capturas de pantalla?
¿Qué guarda Fudge además de una captura de pantalla?
¿Tiene Fudge un plan gratuito?
¿El plan gratuito requiere tarjeta de crédito?
¿En qué se diferencia Fudge de las galerías de inspiración de diseño?
Fudge Reseñas (0)
Precios de Fudge
Gratuito
0 $ al mes
25 consultas de Fudge al día, acceso al servidor MCP y búsqueda y análisis de referencias de sitios web reales. No requiere tarjeta de crédito.
Pro
29 $ al mes
Consultas ilimitadas de Fudge, búsqueda de sitios web y fuentes, comparación de capturas de pantalla, herramientas de color, guardado con Chrome, exportaciones a Tailwind v4, variables CSS y JSON, colecciones ilimitadas y asistencia prioritaria. La facturación anual ofrece un 17 % de descuento.
Analítica de Fudge
Fudge Análisis del tráfico del sitio web
Tráfico geográfico
Top 2 Regiones
Fudge Iniciar incrustaciones
Utiliza las insignias del sitio web para impulsar el apoyo de tu comunidad para el lanzamiento de Toolify. Son fáciles de incrustar en tu página de inicio o pie de página.
Alternativa de Fudge
Escucha en redes sociales