Cómo Construí un Sitio Web Premium para Catering Usando Solo IA — Sin Fotógrafo

El Desafío

SARITTA! es un negocio de catering premium en Rosario, Argentina. Tenían un problema claro: necesitaban un sitio web profesional para hacer crecer su negocio, pero su presupuesto no incluía margen para un fotógrafo profesional, un videógrafo ni una agencia de diseño.

Sus productos se veían increíbles en persona — triples artesanales, mini burgers gourmet, pizzetas de masa madre — pero casi no tenían material visual profesional. Solo fotos de celular y mucha ambición.

Además, estaban perdiendo ventas porque su proceso de pedidos era completamente manual: los clientes escribían por WhatsApp, esperaban una respuesta, negociaban precios, y después se las arreglaban solos con el pago. Sin automatización, sin links de pago, sin facturación.

El brief fue simple: construir algo premium que venda, sin el presupuesto premium.

La Solución: Identidad Visual Generada por IA

En lugar de decirle al cliente que primero necesitaba invertir en un fotógrafo, tomé un enfoque diferente: generar toda la identidad visual usando inteligencia artificial.

Imágenes de Productos

Usando una combinación de herramientas de generación de imágenes con IA, creé cada foto de producto desde cero. El proceso fue así:

1. Recopilación de referencias — El cliente envió fotos de celular de sus productos reales
2. Ingeniería de prompts — Creé prompts detallados describiendo cada categoría de producto con la estética exacta que queríamos: oscura, cinematográfica, poca profundidad de campo, iluminación cálida
3. Generación y curación — Para cada categoría, generé 20-30 variaciones y seleccioné las mejores
4. Pasada de consistencia — Me aseguré de que todas las imágenes compartieran la misma iluminación, temperatura de color y mood para que parecieran de la misma sesión fotográfica

El resultado fue una biblioteca visual cohesiva que parecía salida de un estudio profesional de fotografía gastronómica — a una fracción del costo.

Hero Animado con Frames Generados por IA

La sección hero presenta una animación cinematográfica en canvas construida con 192 frames WebP. Cada frame fue generado usando IA, creando un efecto suave tipo parallax que se reproduce automáticamente cuando los visitantes llegan a la página.

La implementación técnica usa requestAnimationFrame para renderizar frames en un canvas HTML5 a ~24fps, con imágenes estáticas de fallback para conexiones lentas. Diferentes categorías de productos tienen su propia secuencia de animación, y los usuarios pueden navegar entre ellas.

Diseño de Marca

Toda la paleta de colores, selección tipográfica y sistema de diseño los creé para combinar con las imágenes generadas por IA:

• Ciruela/vino profundo (#AD1D32) como acento principal — evocando elegancia gastronómica
• Fondo negro puro — creando una atmósfera premium y cinematográfica
• Playfair Display para títulos — fuente serif para sofisticación
• Inter para texto de cuerpo — legibilidad limpia

El Stack Tecnológico

Construí el sitio web con un stack moderno orientado al rendimiento:

• Next.js 16 con export estático para cargas instantáneas
• React 19 con server components donde es posible
• Tailwind CSS 4 para un sistema de diseño utility-first
• Radix UI para componentes interactivos accesibles
• Google Genkit para un generador de descripciones potenciado por IA

Todo el sitio está generado estáticamente y servido desde CDN, resultando en scores perfectos de Lighthouse y tiempos de carga menores a un segundo.

Chatbot de Ventas por WhatsApp: El Verdadero Game Changer

Un sitio web hermoso es inútil si no convierte. La segunda fase del proyecto fue cuando construí un chatbot inteligente de WhatsApp que maneja todo el embudo de ventas automáticamente.

Arquitectura

El chatbot está potenciado por un flujo de automatización n8n que orquesta múltiples integraciones:

Mensaje de WhatsApp (via API)
    → Flujo n8n
        → Agente IA (Claude) para conversación natural
        → Consulta de catálogo de productos
        → Cálculo de precios
        → Generación de link de Mercado Pago
        → Generación de factura ARCA/AFIP
        → Mensaje de confirmación de vuelta a WhatsApp

Cómo Funciona

1. El cliente inicia una conversación

Un cliente hace clic en el botón de WhatsApp del sitio web (o escribe directamente al número del negocio). El flujo n8n recibe el mensaje via webhook.

2. La IA entiende la intención

El mensaje es procesado por Claude, que entiende pedidos en lenguaje natural como:

• "Quiero 3 docenas de triples para el sábado"
• "¿Tienen opciones veganas?"
• "¿Cuánto sale el pack para 20 personas?"

La IA tiene conocimiento completo del menú, precios, opciones de packs y reglas del negocio (48 horas de anticipación, pedidos mínimos, zonas de entrega).

3. Confirmación del pedido y pago

Una vez que el cliente confirma su pedido, el flujo:

• Calcula el total con todos los ítems
• Genera un link de pago de Mercado Pago via su API
• Envía el link de vuelta por WhatsApp con un resumen del pedido
• Monitorea el estado del pago

4. Facturación automática

Cuando se confirma el pago, el flujo:

• Genera una factura electrónica a través de ARCA (ex-AFIP) usando su API de web services
• Asocia la factura con el CUIT/CUIL del cliente
• Envía el PDF de la factura de vuelta por WhatsApp
• Actualiza el sistema interno de seguimiento de pedidos

El Flujo n8n

El flujo completo maneja:

• Gestión de estado de conversación — Recuerda el contexto a través de múltiples mensajes
• Manejo de errores — Fallbacks elegantes cuando las APIs están caídas
• Reglas de negocio — Pedidos mínimos, requerimientos de anticipación, zonas de entrega
• Derivación a humano — Escala a una persona real cuando la IA no puede manejar un pedido
• Tracking de analytics — Cada interacción se registra para optimización

Resultados

Los números hablan por sí mismos:

• 85% de los pedidos ahora llegan a través del chatbot de WhatsApp
• Tiempo de respuesta promedio bajó de 2 horas a menos de 30 segundos
• Cero facturación manual — cada venta se factura automáticamente
• Tasa de conversión aumentó 3x comparada con el proceso manual anterior
• Satisfacción del cliente mejoró dramáticamente — los clientes aman las respuestas instantáneas

Lecciones Aprendidas

Las imágenes generadas por IA están listas para producción

Con el prompting y la curación correctos, los visuales generados por IA son indistinguibles de la fotografía profesional para la mayoría de los casos de uso. Esto democratiza el diseño web premium para pequeños negocios.

La automatización se multiplica

El chatbot de WhatsApp no solo ahorra tiempo — habilita ventas en horarios donde nadie está disponible para responder. Los pedidos llegan a las 11 PM, a las 6 AM, durante feriados. El bot nunca duerme.

La integración es la parte difícil

Construir cada componente individual (chat con IA, Mercado Pago, facturación ARCA) es sencillo. Hacer que funcionen juntos de manera confiable en producción, manejar casos edge, y mantener el sistema — ahí está la verdadera ingeniería.

Empezar simple, iterar rápido

Lancé con un menú básico y flujo de pedidos, después agregamos funcionalidades basándose en interacciones reales de clientes. La conversación con IA mejoró dramáticamente después de analizar las primeras 100 conversaciones reales.

---

¿Querés Algo Similar?

Si sos dueño de un negocio buscando construir una presencia web profesional con automatización potenciada por IA, me encantaría ayudarte. Ya sea un sitio web, un chatbot, integración de pagos, o el paquete completo — hablemos.

Visitá el sitio en vivo: saritta.com.ar