De una web a una experiencia 🚀

Hay proyectos que te enseñan un nuevo stack tecnológico, y hay otros que te obligan a entender primero a las personas. Este fue uno de esos.

Durante mi participación con Loop-IT México, mi rol inicial estuvo enfocado en la pre-venta. Eso significó algo invaluable: conocer la arquitectura de las soluciones desde la raíz. Aprendí a levantar requerimientos técnicos, a entender los cuellos de botella reales de las empresas y a descifrar cómo se integra la tecnología para garantizar continuidad y escalabilidad.

💡 La premisa clave: Loop-IT no vende simplemente servicios de TI. Diseña la infraestructura crítica que permite que las organizaciones operen con alta disponibilidad y seguridad.

---

🎨 Del entendimiento al prototipado

Antes de escribir la primera línea de código, el trabajo comenzó en Figma. No como una herramienta de UI puro, sino como un espacio para definir flujos y arquitectura de la información.

Los wireframes fueron la brújula para resolver problemas estructurales:

• 🕒 First Contentful Paint (conceptual): ¿Qué propuesta de valor procesa el cliente en los primeros 5 segundos?
• 🧠 Carga Cognitiva: ¿Cómo organizamos servicios de alta complejidad (como un Data Center) sin que la navegación se sienta abrumadora?
• 🗺️ User Journey: ¿Cuál es el funnel de conversión óptimo hasta que el usuario solicita una cotización?

Trabajar la estructura mediante Component-Driven Design en Figma hizo que las decisiones dejaran de ser puramente estéticas y se convirtieran en decisiones escalables para el producto.

---

🚀 Spec-Driven Development (SDD)

Decidí seguir el enfoque de Spec-Driven Development (SDD), donde cada etapa parte de una especificación clara antes de generar o escribir código.

Además, este enfoque permitió aprovechar la IA como una herramienta de desarrollo, manteniendo siempre la especificación como la fuente de verdad.

El flujo de trabajo fue el siguiente:

📋 Requisitos
      ↓
📝 Especificación
      ↓
🏗️ Arquitectura
      ↓
🤖 Implementación
      ↓
✅ Verificación
      ↓
📊 Operación

---

📋 1. Requisitos

Todo comienza definiendo qué debe lograr el producto y cuáles son las restricciones que nunca deben romperse.

Tipo	Ejemplo
🎯 Objetivo	Construir una web estática, rápida y con una experiencia de usuario fluida.
⚙️ Funcional	Mostrar la información de la empresa de forma clara y accesible.
🚀 No funcional	Tiempo de respuesta menor a 300 ms.
📏 Regla de negocio	La información debe presentarse de forma precisa, clara y fácil de comprender.
👤 Caso de uso	El sitio debe poder desplegarse fácilmente mediante CPanel, sin procesos complejos.
🎨 Invariante	La interfaz nunca debe sentirse sobrecargada; la simplicidad siempre tiene prioridad.

Antes de comenzar el desarrollo, la pregunta principal fue:

💡 ¿Qué experiencia queremos que tenga el usuario al visitar el sitio?

---

📝 2. Especificación

Con los requisitos claros, cada funcionalidad se describe antes de implementarse.

La especificación se convierte en el contrato entre el desarrollador y la IA.

🔄 Ciclo de iteración

Cada nueva funcionalidad sigue un flujo sencillo:

Idea
   │
   ▼
Especificación
   │
   ▼
Generación con IA
   │
   ▼
Revisión
   │
   ▼
Aprobado
   │
   └───────────────┐
                   ▼
             Nueva iteración

La IA genera código únicamente a partir de una especificación previamente definida.

---

📁 Organización del proyecto

La estructura del proyecto también forma parte de la especificación.

/
├── spec/
│   ├── requirements.md
│   ├── architecture.md
│   ├── prompts.md
│   └── features/
│
├── frontend/
│   ├── css/
│   ├── js/
│   ├── assets/
│   └── index.html
│
└── features/
    ├── hero/
    ├── navbar/
    ├── services/
    ├── casos/
    ├── contact/
    └── footer/

Mantener esta estructura permitió que tanto el desarrollo como la IA trabajaran siempre con un contexto consistente.

---

🎬 Escenarios (BDD)

Cada funcionalidad importante se describe mediante escenarios antes de implementarse.

Feature: Navegación del sitio

Scenario: El usuario visita la página principal

Given que el usuario accede al sitio
When la página termina de cargar
Then el contenido principal debe mostrarse inmediatamente
And la navegación debe ser intuitiva
And la experiencia debe sentirse fluida

Otro ejemplo:

Feature: Contacto

Scenario: El usuario desea contactar a la empresa

Given que el usuario llega a la sección de contacto
When visualiza la información disponible
Then debe identificar rápidamente los medios de contacto

---

🏗️ 3. Arquitectura

Al tratarse de una web corporativa, se priorizó una arquitectura simple, fácil de mantener y rápida de desplegar.

Tecnología	Motivo
🌐 HTML5	Estructura semántica
🎨 Bootstrap (CDN)	Componentes responsivos sin proceso de compilación
⚡ JavaScript	Interactividad ligera
📦 cPanel	Despliegue sencillo
🚀 CDN	Distribución rápida de recursos estáticos

En este proyecto no fue necesario incorporar frameworks complejos ni procesos de build.

La prioridad fue mantener un sitio ligero, mantenible y fácil de evolucionar.

---

🤖 4. Implementación

Con la especificación aprobada comenzó la implementación.

Cada funcionalidad siguió el mismo proceso:

📋 Especificación
      │
      ▼
🤖 Generación con IA
      │
      ▼
👨‍💻 Revisión manual
      │
      ▼
🔄 Ajustes
      │
      ▼
✅ Validación
      │
      ▼
🚀 Deploy

La IA aceleró la implementación, pero nunca sustituyó el proceso de diseño.

La fuente de verdad siempre fue la especificación.

Gracias a ello fue posible mantener coherencia entre el diseño, la experiencia de usuario y el código generado.

---

✅ 5. Verificación

Cada iteración debía cumplir tanto los requisitos como la especificación.

Aspecto	Validación
📱 Responsive	Desktop, Tablet y Mobile
⚡ Rendimiento	Lighthouse
♿ Accesibilidad	Lighthouse Accessibility
🎨 Consistencia visual	Revisión manual
📖 Escenarios BDD	Validación funcional
🚀 Despliegue	Publicación correcta en cPanel

La pregunta dejó de ser:

¿El código funciona?

y pasó a ser:

✅ ¿La implementación cumple la especificación?

---

📊 6. Operación

Una vez desplegado, el trabajo no termina.

Se monitorean indicadores que permiten verificar que la experiencia siga cumpliendo los objetivos definidos.

🎯 Objetivos de calidad

• Disponibilidad del sitio.
• Tiempo de respuesta menor a 300 ms.
• Correcta visualización en distintos dispositivos.
• Navegación fluida.

📈 Métricas

• Lighthouse Performance.
• Core Web Vitals.
• Tiempo de carga inicial.
• Peso total de la página.
• Tiempo de despliegue.

---

🎉 Beneficios obtenidos

Durante el desarrollo del proyecto para Loop-It México, este enfoque permitió:

• ✅ Tener requisitos claros antes de implementar.
• 🤖 Utilizar IA con un contexto bien definido.
• 📖 Documentar el proyecto desde el inicio.
• 🚀 Iterar rápidamente sin perder consistencia.
• 🎨 Mantener una experiencia de usuario uniforme.
• 📦 Facilitar el despliegue mediante cPanel.
• 🔄 Mantener la especificación sincronizada con el desarrollo.

---

💡 Conclusión

Spec-Driven Development no consiste únicamente en escribir documentación.

Consiste en que la especificación sea el centro del proceso de desarrollo.

En este proyecto, la especificación no solo sirvió para documentar decisiones, sino también como el contexto que permitió a la IA generar código consistente y alineado con los objetivos del producto.

El resultado fue un desarrollo más predecible, iterativo y fácil de mantener, donde cada nueva funcionalidad comenzaba con una especificación y terminaba con una implementación validada.

📚 Recursos

Si quieres explorar este enfoque, te recomiendo comenzar por:

• Escribir los requisitos antes de abrir tu editor.
• Definir una estructura de especificaciones (spec/).
• Describir cada funcionalidad con escenarios BDD.
• Utilizar la especificación como contexto para herramientas de IA.
• Mantener la documentación sincronizada con cada iteración.

No necesitas adoptar Spec-Driven Development de una sola vez. Incluso incorporar una pequeña parte del proceso puede mejorar significativamente la calidad y consistencia de tus proyectos con agentes de IA.

Loop-IT México