WebFactory: Cómo Uso IA para Crear Webs Profesionales para Negocios Locales en Horas

220 negocios escaneados. 32 sin web. 5 webs construidas. La última en 15 minutos. Coste total: menos de 1 euro.

Eso es lo que ha salido de WebFactory hasta ahora. No es un concepto, no es un plan de negocio en una presentación de PowerPoint. Es un sistema real que estoy usando ahora mismo para crear webs profesionales para negocios locales de la Costa Daurada — desde la prospección hasta el deploy — con IA en cada fase del proceso.

En este artículo voy a enseñarte exactamente cómo funciona, paso a paso, con datos reales de los 5 proyectos que he construido hasta hoy. Sin teoría, sin humo. Solo el sistema, los números y los aprendizajes.

El problema: negocios con 1.500 reseñas y cero web

Abre Google Maps en cualquier pueblo de la costa catalana. Busca “restaurantes”, “barberías”, “tatuajes”. Verás perfiles con cientos de reseñas, fotos de clientes satisfechos, horarios actualizados.

Ahora haz clic en “Sitio web”.

Nada. O peor: un enlace a su perfil de Instagram.

El 82% de las búsquedas tipo “barbería cerca de mí” se hacen desde el móvil. Sin web, ese negocio depende 100% de que Google decida mostrarlo en el mapa. No tiene presencia propia, no controla su narrativa, y su competencia que SÍ tiene web le come terreno cada día.

Eso es lo que WebFactory soluciona.

El stack: Antigravity + Claude Code + MCPs

Antes de entrar en el pipeline, merece la pena hablar del stack que hace posible todo esto. Porque WebFactory no es solo un workflow manual — es un sistema orquestado por herramientas de IA que trabajan en equipo.

Antigravity de Google es el orquestador. Es el entorno donde convergen todos los agentes y herramientas. Desde aquí se coordinan las búsquedas, las llamadas a APIs, la generación de contenido y el flujo de datos entre fases.

Claude Code es el arquitecto y constructor. No es un chatbot que sugiere código — es un agente autónomo que ejecuta. Lee archivos, escribe HTML, lanza scripts Python, hace llamadas a APIs externas, genera imágenes, y edita código existente. Todo desde la terminal, sin interfaz gráfica.

Lo que hace especial a Claude Code en este contexto:

• Skills: Conjuntos de instrucciones especializadas que se activan según la fase. frontend-design para decisiones estéticas, seo para Schema.org y meta tags, project-dev para convenciones de código, verification-before-completion para auditoría pre-deploy. Cada skill aporta conocimiento específico al momento justo.

• MCPs (Model Context Protocol): Plugins que conectan Claude Code con herramientas externas. Algunos de los que usa WebFactory:

• Gemini Flash Image — generación y mejora de imágenes (fotos de negocio, iconos de servicios)
• Color Scheme — paletas armónicas a partir de un color seed
• Stitch — prototipado rápido de diseño
• Pencil — diseño preciso de componentes
• SVGMaker — iconos vectoriales cuando aplica

• Playwright — screenshots para verificación visual

• Memoria persistente: Claude Code mantiene un sistema de archivos de memoria entre conversaciones. Cada error, cada feedback, cada patrón aprendido se guarda. Cuando empiezo un nuevo proyecto, el agente ya sabe que no debe poner loading="lazy" en el hero, que los SVG a mano no funcionan para iconos, que el sistema .wf-* del popup es reutilizable. Esto elimina la curva de aprendizaje en cada iteración.

El resultado: un desarrollador humano (yo) define la estrategia, elige los prospectos y valida el resultado final. La IA ejecuta el 90% del trabajo mecánico — las llamadas a APIs, la generación de código, el procesamiento de imágenes, la estructura SEO. Cada uno hace lo que mejor sabe hacer.

El pipeline completo: de Radar a WhatsApp

Cada fase tiene un rol claro. La IA participa en las fases 1, 3, 4 y 5. El resto es lógica de negocio, sentido común y conocimiento del mercado local.

Vamos fase por fase.

Fase 1: Radar — El escáner que encuentra negocios invisibles

Radar es un sistema de prospección que escanea Google Places API en un radio configurable desde Calafell. Soporta 20 tipos de negocio: restaurantes, alojamientos, salones de belleza, estudios de tatuaje, tiendas, barberías…

Con una sola llamada por tipo de negocio, la API devuelve todo lo que necesito: nombre, dirección, teléfono, rating, número de reseñas, si tiene web o no, y coordenadas exactas.

Lo que encontró Radar: - 220 negocios escaneados en un radio de 5 km - 32 sin ninguna presencia web propia - Negocios con 4.8 estrellas y 145 reseñas que no tienen web (Barbería 33) - Una taberna con 1.544 reseñas y 4.1 estrellas sin web propia (Taberna Los Serrano) - Un estudio de tatuaje con puntuación perfecta de 5.0 sin web (Insert Ink)

El contraste es brutal: reputación impecable en Google, presencia digital nula fuera de él.

Radar clasifica cada prospecto en un pipeline: nuevo → auditado → propuesta → contratado/descartado. Cada negocio tiene un score basado en su rating, volumen de reseñas y sector. Los que más puntúan son los primeros en recibir una web.

El papel de la IA aquí: ninguno directo. Radar usa la API de Google Places, que es una API REST estándar. La inteligencia está en el scoring y los filtros, no en modelos generativos.

Fase 2: Research — Datos reales, cero ficción

Esta es la regla más importante de WebFactory: todo dato que aparezca en la web tiene que venir de una fuente verificable.

El horario viene de Google Business Profile. El teléfono viene de Google Business Profile. Las reseñas son copias textuales de Google Maps, con nombre real del autor. Las fotos son las que los clientes y el dueño han subido a Google.

¿El negocio tiene Instagram? Lo reviso para entender su identidad visual, el tono que usan, si tienen logo visible en su fachada. Pero no invento datos que no tengo.

Lo que recojo antes de tocar una sola línea de HTML:

• Horario completo (días y horas de apertura)
• Teléfono y/o WhatsApp
• Dirección exacta con código postal
• Rating y número de reseñas
• Fotos del negocio (mínimo 5-6)
• Reseñas destacadas (3, con nombre del autor)
• Instagram y otras redes
• Servicios que ofrece
• Competencia directa (¿quién ya tiene web en la zona?)
• ¿Tiene email público? Si no, nada de formularios

Ejemplo real: Barbería 33 en Calafell. 4.8 estrellas, 145 reseñas, teléfono 635 74 88 09, Instagram @33barberia con 583 seguidores, horario de lunes a sábado de 10:00 a 14:00 y de 16:00 a 19:00. Su competencia directa, Barber 97, ya tiene web profesional. Dato clave para el pitch posterior.

El papel de la IA aquí: asistente de investigación. Claude Code ejecuta las llamadas a la API, extrae los datos, y los organiza. Pero la decisión de qué datos incluir y cómo presentarlos es humana.

Fase 3: Pipeline de fotos — De Google Places a WebP en 30 segundos

Las fotos son el elemento que más impacto tiene en la credibilidad de una web. Y la regla es clara: fotos reales del negocio siempre, IA generativa solo cuando no hay alternativa.

El pipeline tiene tres pasos:

Paso 1 — Descarga: La API de Google Places (New) permite descargar las fotos que aparecen en el perfil del negocio. Con el Place ID, solicito hasta 6 fotos a resolución máxima de 1600px. Coste real: ~$0.02 por negocio.

Paso 2 — Mejora con Gemini: Cada foto pasa por Gemini 2.5 Flash Image con un prompt de mejora específico al sector. Para restaurantes: “Improve lighting, warm tones, make food look appetizing”. Para barberías: “Enhance professional quality, warm ambient tones”. La API recibe la imagen original como base64 y devuelve una versión mejorada.

Paso 3 — Conversión a WebP: Python con Pillow convierte cada imagen a WebP con quality=82. El hero se redimensiona a un máximo de 1600px, el resto a 800px. Compresión típica: 92-96%.

Resultado real del pipeline en Barbería 33:

Todo el material visual de la web en menos de medio mega.

El papel de la IA aquí: Gemini mejora las fotos sin inventar contenido. No genera caras, no añade elementos que no existen. Mejora iluminación, color y nitidez de fotos que ya son reales.

Fase 4: Iconos con IA — Gemini genera, Pillow limpia

Este es el descubrimiento más reciente y uno de los aprendizajes más valiosos del proceso. La historia corta: intenté hacer iconos SVG a mano para los servicios de Barbería 33 y fue un desastre.

Las tijeras se veían bien. La navaja, aceptable. Pero el icono de “arreglo de barba” parecía una patata, y el de “corte + barba” era irreconocible. Seis iteraciones. Seis intentos. Todos mediocres.

La solución: generar los 4 iconos con Gemini usando el mismo prompt de estilo, luego eliminar el fondo con Pillow y convertir a WebP transparente.

El prompt es clave para la consistencia:

Minimalist barbershop icon. Clean gold metallic (#C9A96E) line art
on solid pure black (#000000) background. Single-weight outlines,
elegant, professional, centered, filling the frame. No text, no
gradients, no extra decoration. Square composition.
Subject: [descripción específica del icono]

Mismo prefijo para los 4 iconos. Solo cambia el Subject. El resultado: 4 iconos con estilo idéntico, generados en 2 minutos.

Después, Pillow hace la magia del background removal:

from PIL import Image
import numpy as np

img = Image.open('icon.png').convert('RGBA')
data = np.array(img)
brightness = np.max(data[:,:,:3], axis=2)
alpha = np.clip((brightness - 25) * (255.0 / 40), 0, 255).astype(np.uint8)
data[:,:,3] = alpha
result = Image.fromarray(data)
result.save('icon.webp', 'WEBP', quality=90)

Negro = transparente. Dorado = opaco. Transición suave para antialiasing. El resultado final: iconos de 4-9 KB cada uno con fondo transparente que se integran perfectamente sobre cualquier fondo oscuro.

Aprendizaje clave: Los SVG a mano no escalan para iconos detallados a tamaños pequeños. La IA generativa produce resultados consistentes y profesionales en una fracción del tiempo. Este pipeline (Gemini → Pillow → WebP transparente) es ahora parte estándar del workflow.

Fase 5: Build — HTML, CSS Variables y cero frameworks

La filosofía técnica de WebFactory es radical en su simplicidad: HTML5, CSS3, Vanilla JavaScript. Cero npm, cero build tools, cero frameworks.

Cada web es un directorio autocontenido que puedes abrir con doble clic en el navegador. No necesita servidor de desarrollo, no necesita compilar, no necesita instalar nada.

Variables CSS: la identidad del cliente en 15 líneas

:root {
    --primary: #C9A96E;
    --primary-darker: #A8893E;
    --bg: #0D0D0F;
    --surface: #1A1A1D;
    --text: #F5F5F0;
    --text-muted: rgba(245, 245, 240, 0.7);
}

Esas 7 variables definen el 90% de la identidad visual. Cambiar --primary de dorado (#C9A96E, Barbería 33) a rojo (#E63946, Insert Ink) o azul (#4A90D9, Villa Gessami) transforma completamente el look de la web.

Tipografía que replica la identidad real

Cada negocio tiene un cartel, un logo, una identidad tipográfica propia. WebFactory la respeta.

Nunca elegimos fonts al azar. Miramos la foto de la fachada, identificamos el estilo, y buscamos la Google Font más cercana.

SEO técnico de serie

Cada web sale de fábrica con: - Schema.org tipado al sector: BarberShop, Restaurant, TattooParlor, LodgingBusiness - Open Graph y Twitter Cards con imagen real - Meta description con keywords locales - Alt text descriptivo en todas las imágenes - Heading semántico: un solo h1 por página

No es SEO avanzado. Es SEO básico que el 90% de webs locales no tiene.

El popup que vende: Sticky CTA con dolor real

Cada web de WebFactory incluye un botón flotante en la esquina inferior derecha: “Esta web es tuya”. Pulsa suavemente con el color primario del proyecto, captando la atención sin ser invasivo.

Al hacer clic, se despliega un popup a pantalla completa con una estructura muy específica:

1. 3 puntos de dolor del sector — no genéricos, sino basados en datos reales del negocio
2. Grid de features incluidas en la web
3. Servicios adicionales posibles (SEO, contenidos, redes)
4. CTA directo a WhatsApp
5. Firma: “Desarrollada por Cristian Corrales — Calafell, Tarragona”

Los pain points son la clave. Para Barbería 33: - “Tu competencia directa ya tiene web” → referencia real a Barber 97 - “Instagram no posiciona en Google” → dato verificable - “Los menores de 35 no llaman para pedir cita” → realidad del sector

Estos puntos no se inventan. Salen del research de la Fase 2 y del conocimiento del mercado local.

El componente .wf-* es reutilizable: misma estructura CSS/HTML/JS en todos los proyectos. Solo cambian colores, contenido y pain points. Lo que funciona no se reinventa.

Deploy y Pitch: la web llega antes que el mensaje

Este es el giro psicológico del sistema: la web ya está construida, desplegada y accesible antes de contactar al negocio.

El deploy es sencillo: un script PowerShell sube los archivos por FTP a cristiancorrales.com/tu-web/[nombre-negocio]/. En segundos, la web está online con URL real.

Y entonces llega el mensaje de WhatsApp:

“Buenas! Soy Cristian, de aquí de Calafell. He visto vuestra barbería en Google y las opiniones que tenéis son brutales — 4.8 con más de 145 reseñas.

Os cuento: me dedico a crear webs para negocios locales de Calafell. He montado una web de ejemplo para Barberia 33, con vuestras fotos reales y toda la info, para que veáis cómo quedaría:

👉 [URL]

No es ningún compromiso, solo quería enseñároslo. Si os mola y queréis hablar, aquí estoy. Un saludo!”

No hay presupuesto. No hay presión. No hay PDF de 20 páginas explicando qué podríamos hacer. La web ya está hecha. Solo tienen que abrirla.

Esto invierte completamente la dinámica de venta tradicional. El prospecto no evalúa una promesa; evalúa un producto terminado con sus propias fotos, sus propias reseñas, su propia identidad.

Los números: coste real por web

Veinte céntimos de dólar. Comparado con el precio de mercado de una web profesional en Tarragona — entre 800€ y 3.000€ — estamos hablando de una reducción de coste de 4.000x en materiales. Obviamente, el valor está en el conocimiento, el sistema y el tiempo humano. Pero el coste de producción en tokens de IA y APIs es insignificante.

Tiempo real por web — la evolución:

Los primeros 4 proyectos tardaron una media de 2 horas cada uno, incluyendo research, pipeline de fotos, build completo, popup, deploy y pitch. Eso ya era rápido.

Pero el quinto proyecto — Casa Karpanta, un bar de tapas en El Vendrell — se completó en 15 minutos. No es un typo. Quince minutos desde que el agente eligió el prospecto en la base de datos de Radar hasta tener la web abierta en el navegador, con fotos reales procesadas, tipografía del logo identificada, reseñas de Google verificadas, Schema.org, popup de venta y mapa integrado.

¿Qué ha cambiado? El sistema aprende. Cada error de los proyectos anteriores se guarda en la memoria persistente del agente. Cada patrón que funciona se documenta y reutiliza. El checklist pre-build elimina iteraciones de corrección. Las convenciones CSS, el sistema .wf-* del popup, el pipeline de fotos — todo está probado y estandarizado. La quinta web se construye sobre los aprendizajes de las cuatro anteriores.

Y aquí viene lo interesante: con capacidad de multiagente, es posible lanzar 3-4 builds en paralelo. Cada agente trabaja en un prospecto distinto de forma simultánea. En teoría, eso son 3-4 webs completas en media hora. Estamos explorando esa posibilidad para el próximo sprint.

5 webs reales: resultados y aprendizajes

Taberna Los Serrano — El Vendrell

Sector: Restauración · Rating: 4.2★ (1.544 reseñas) · Tema: Dark/mixed

Taberna de tapeo a la andaluza en el paseo marítimo de El Vendrell. Carta real completa: chocos, pescaítos, cazón en adobo, volcán de ibérico. Fotos reales del local y los platos, mejoradas con Gemini. Schema.org Restaurant con menú real.

Insert Ink — Cunit

Sector: Tatuaje · Rating: 5.0★ (37 reseñas) · Tema: Dark

Rating perfecto. Estudio pequeño con identidad visual muy marcada. Tema dark con rojo (#E63946), Bebas Neue bold. El sistema .wf-* del popup se creó originalmente para este proyecto y se ha reutilizado en todos los siguientes.

Villa Gessami — Calafell

Sector: Alojamiento · Rating: N/A · Tema: Light

Caso diferente: alquiler vacacional premium. Tema claro, Cormorant Garamond para elegancia. El pitch incluía un dato demoledor: las comisiones de Airbnb le cuestan al propietario ~2.025€ al año. Una web propia con reserva directa se amortiza en semanas.

Barbería 33 — Calafell

Sector: Barbería · Rating: 4.8★ (145 reseñas) · Tema: Dark + gold

El proyecto que más aprendizajes ha generado. Tema dark con dorado (#C9A96E), Great Vibes para replicar el logo cursivo de la fachada. Aquí nació el pipeline de iconos con Gemini + Pillow. Pain point del popup: la competencia directa (Barber 97) ya tiene web profesional.

Casa Karpanta — El Vendrell

Sector: Bar de tapas · Rating: 4.4★ (750 reseñas) · Tema: Mixed warm · Tiempo total: 15 minutos

El proyecto más rápido y el que demuestra la madurez del sistema. Bar de tapas con estética vintage, toldo rojo y logo en tipografía western. La paleta nació directamente de las fotos: terracotta (#B5332E) del toldo, dorado (#D4A853) de la iluminación cálida, crema (#FFF8F0) del interior. Alfa Slab One replica el rótulo de la fachada. En lugar de iconos de servicios, las 4 fotos reales de platos (torreznos, bravas, bocadillos, croquetas) actúan como cards visuales. Pedro, el dueño, aparece mencionado en las reseñas reales — lo integramos en la sección “Nosotros”. Pain point del popup: los turistas buscan online y sin web no te encuentran antes de llegar a El Vendrell.

Aprendizajes transversales

1. Fotos reales siempre ganan a las generadas por IA en credibilidad
2. La tipografía del logo real crea reconocimiento instantáneo de marca
3. Los pain points específicos (con datos reales del sector y competencia) convierten mejor que los genéricos
4. WhatsApp funciona mejor que email para negocios informales (barberías, tatuajes)
5. “La web ya está hecha” cambia completamente la dinámica de venta
6. Los SVG a mano no escalan — IA generativa para iconos es la solución
7. Un checklist pre-build evita el 90% de las iteraciones de corrección
8. El sistema se acelera exponencialmente — de 2 horas por web a 15 minutos, gracias a la memoria persistente y patrones reutilizables

Lo que viene: escalar WebFactory

El sistema está probado con 5 proyectos en 4 sectores diferentes: restauración (x2), tatuaje, alojamiento y barbería. La base de datos de Radar tiene 220 prospectos, 32 de ellos sin web. Hay trabajo de sobra.

Los próximos pasos:

• Automatizar la selección de template según sector (dark para barberías y tatuajes, light para alojamientos, mixed para restaurantes)
• Pipeline de iconos estandarizado como parte del build, no como parche posterior
• Tracking de respuestas a los mensajes de pitch para optimizar copy y timing
• Multi-página para negocios que necesiten más que una single-page (carta completa, galería extendida, sistema de reservas)
• Builds paralelos con multiagente: Con el Agent SDK de Claude, es posible lanzar múltiples agentes trabajando simultáneamente en prospectos diferentes. Si un agente tarda 15 minutos en completar una web, cuatro agentes en paralelo producen 4 webs en el mismo tiempo. Eso cambia las reglas del juego.
• Más MCPs y skills: Cada herramienta nueva que se integra al stack multiplica la capacidad del sistema. Estamos solo al principio.

El objetivo final: que un negocio local de la Costa Daurada pueda tener una web profesional, con sus datos reales, sus fotos reales y su identidad real, en el mismo día que lo identificamos. Sin esperas, sin presupuestos eternos, sin reuniones innecesarias.

Solo una web que funciona, lista para trabajar por ellos.

Si tienes un negocio local en la Costa Daurada y no tienes web — o la que tienes lleva años sin actualizarse — podemos hablar. Sin compromiso, como siempre.

Y si eres desarrollador o te interesa la automatización de procesos con Python y APIs, el código detrás de WebFactory es un caso práctico de cómo combinar IA aplicada a negocios reales con un stack técnico intencionadamente simple.