Cómo construimos el sitio de Kempro usando Claude

Este sitio que estás viendo no lo construimos solos: lo hicimos trabajando codo a codo con Claude, el asistente de IA de Anthropic. Queremos contarte cómo fue el proceso, qué herramientas usamos y qué aprendimos, por si estás pensando en hacer algo parecido en tu propia empresa.

Las herramientas del proceso

No usamos una sola herramienta de IA, sino una combinación de piezas, cada una con un rol distinto:

Figma — el programa donde definimos primero cómo se vería cada página: colores, tipografía y espacios, antes de escribir una sola línea de código.
Cowork — el espacio donde definimos el diseño y el contenido junto con Claude, revisamos el sitio página por página y preparamos instrucciones precisas para construir cada cambio.
Claude Code — el asistente que escribe y modifica el código real del sitio directamente en la terminal, a partir de esas instrucciones en lenguaje natural.
Envato Elements — un banco de video y fotografía de stock donde buscamos piezas visuales que encajaran con la paleta de colores de la marca.
Sanity — el sistema con el que estamos definiendo cómo el equipo podrá editar el contenido del sitio en el futuro sin tocar código.
Vercel — la plataforma donde el sitio queda publicado y disponible en internet.

Cómo fue el proceso, paso a paso

Primero definimos la estructura y el contenido real del sitio — qué servicios ofrecemos, qué casos de éxito contar, qué dice "Sobre nosotros" — antes de pensar en cómo se vería visualmente. Escribir el contenido real primero, en vez de usar textos de relleno, nos ahorró tener que rehacer diseño más adelante.

Con esa base, construimos cada página con Claude Code a partir de instrucciones puntuales: qué bloque agregar, qué texto usar, qué comportamiento debía tener. Cada cambio se revisaba antes de aplicarse, así que el proceso fue más una conversación en pasos pequeños que una sola instrucción gigante.

¿Quieres llevar esto a tu empresa?

Contáctanos

Después ajustamos el detalle visual: colores, tipografía y márgenes, hasta que cada bloque se sintiera parte del mismo sitio y no una pieza pegada por separado.

Al final hicimos una revisión completa del sitio, página por página, buscando inconsistencias — un botón con otro estilo, un margen distinto, un enlace que llevaba al lugar equivocado en el otro idioma — cosas normales cuando distintas partes de un sitio se construyen en momentos diferentes.

Lo que aprendimos

La mayor ventaja no fue la velocidad, aunque también la hubo: fue poder iterar en voz alta. Cada decisión de diseño se podía probar, ver y corregir en minutos en vez de días, lo que nos permitió equivocarnos rápido y barato antes de dar algo por terminado.

Esto es solo un resumen. En las próximas semanas vamos a publicar un artículo más detallado, decisión por decisión — desde por qué elegimos cada color hasta cómo resolvimos que el sitio funcionara igual de bien en español y en inglés.