En torno a este avance, se ha generado un discurso polarizado entre dos tipos de personas: los que firmemente adoptan su potencial y los que la rechazan completamente. En medio están aquellos (como nosotros en Espina Studio) que reconocemos las capacidades de la IA, pero somos firmes creyentes en lo incomparables que son ante a la creatividad y el criterio humano.
Las dinámicas de trabajo han cambiado sin duda, con expectativas de resultados más rápidos y pulidos gracias a los procesos acelerados (aunque muchas veces sobrestimados) de la IA. Aun así, la supervisión humana, la estrategia y el control de calidad siguen siendo partes esenciales de lo que hacemos, incluso con la asistencia integrada en nuestro flujo de trabajo. Nuestro enfoque nace de la curiosidad: explorar constantemente cómo convertir la IA en una herramienta valiosa que preserve y conviva con la sensibilidad creativa de nuestro trabajo.
Dado que los LLMs se entrenan con una cantidad masiva de datos creado por humanos y trabajan basados en patrones, estas limitaciones hacen que incluso los modelos más avanzados carezcan de originalidad. Si bien esto compromete sus capacidades creativas, también nos muestra en qué es lo que la IA realmente sobresale: el trabajo analítico.
Entendiendo sus capacidades en desarrollo web
La popularidad de las aplicaciones y sitios web «vibe-coded» ha acelerado drásticamente los tiempos de desarrollo. Aunque la IA puede traducir ideas en código funcional, su éxito sigue requiriendo del criterio humano para decidir qué funciona y qué es innecesario.
Al igual que ocurre con el diseño, el desarrollo web también suele sufrir de resultados genéricos, baja calidad o carentes de personalidad; errores que acaban consumiendo más tiempo del que habríamos invertido en hacerlo nosotros mismos. Esto nos llevó a entender cómo trabajar en conjunto: la IA puede encargarse del trabajo tedioso si mantenemos el control sobre la arquitectura, las convenciones de nombres y las interacciones.
Junto a nuestro equipo de desarrollo, realizamos investigaciones, probamos herramientas y experimentamos con flujos de trabajo alineados con nuestras necesidades para determinar qué partes podían delegarse. Comparando los resultados de distintos asistentes con proyectos reales del estudio, establecimos reglas y marcos de trabajo claros que mantienen los resultados alineados con nuestros procesos y evitan los estilos, animaciones y layouts innecesarios que suelen generarse por defecto.
Estableciendo restricciones
Antes de definir las reglas que seguiría la IA, quisimos establecer lineamientos internos que determinaran nuestra relación con ella. Acordamos que la generación de código debía respetar tres principios:
- Para mantener una calidad consistente mediante patrones de codificación estandarizados, la IA solo podrá generar la estructura base de las secciones del sitio. Los desarrolladores ajustarán posteriormente los detalles y las interacciones.
- La generación de código debe basarse en nuestros estándares de programación y alinearse con el diseño responsivo.
- Las decisiones deben alinearse con las variables de identidad de marca previamente definidas (tipografía, variables, clases y códigos de color).
Un solo archivo
Con esta relación ya definida, compilamos todas estas especificaciones en un solo archivo SKILL.md y construimos una infraestructura en torno a él. Este archivo ligero se puede cargar en cualquier modelo de IA compatible, junto con instrucciones, reglas y, si es necesario, scripts. Almacenado en un repositorio privado, cualquiera de nuestros desarrolladores puede instalarlo y actualizarlo desde una sola fuente, aplicando los cambios en todos los proyectos simultáneamente.
Al combinarse el archivo SKILL.md con la imagen de diseño, el agente genera las estructuras por sección respetando restricciones clave como: uso consistente de grids predeterminados en Bootstrap en lugar de CSS personalizado, eficiencia de tokens al reusar variables, nomenclatura exclusiva de clases BEM, prácticas de accesibilidad integradas, registro centralizado para estilos de componentes y una adherencia estricta a las interacciones de Bootstrap para evitar comportamientos no definidos.
Conclusión
La IA se encarga de las tareas repetitivas de la programación, liberando a nuestro equipo para invertir sus esfuerzos en las animaciones e interacciones únicas que le dan a un sitio su carácter distintivo. El tiempo que ahorramos es reinvertido en los mismos proyectos, lo que nos permite escalar nuestra producción y entregar experiencias de más alta calidad.
Por ahora, creemos que la IA todavía está lejos de ser una competidora digna de la creatividad humana, y mucho menos un reemplazo para ella. Es un catalizador: uno que nos permite proteger aquello que hace humano nuestro trabajo e ir más allá de lo que podríamos alcanzar solos.
Glosario
AI: Término general para las máquinas que realizan tareas que normalmente requieren inteligencia humana.
Arquitectura: La estructura general de un sitio web o aplicación; cómo funciona, cómo fluyen los datos y cómo se comunican los sistemas entre sí.
Asistente: Una aplicación que utiliza un LLM (o cualquier otra IA) para ayudar a los usuarios a completar tareas.
BEM (Block Element Modifier): Una convención de nomenclatura para clases CSS que mantiene los estilos organizados.
Ejemplos:
Bloque (Block): .card (el componente independiente)
Elemento (Element): .card__title (parte del componente card)
Modificador (Modifier): .card–large (una variación del card)
Bootstrap: Una biblioteca de CSS preconstruida con componentes estilizados y herramientas para laayouts.
HTML (HyperText Markup Language): El código base de cada página web; define qué son las cosas (encabezados, párrafos o botones).
LLM (Large-Language Model): Un tipo específico de IA entrenada con cantidades grandes de datos para comprender y generar lenguaje humano.
Markdown (extensión .md): Un lenguaje de formato ligero y casi universalmente legible para texto plano. En este contexto, contiene el contexto, las reglas o las preferencias que la IA debe seguir.
Repositorio Privado: Una carpeta segura en un servidor a la cual solo los miembros autorizados pueden acceder.
Diseño Responsivo: Garantiza que los sitios web se vean y funcionen correctamente en cualquier tamaño de pantalla.
Tokens: Fragmentos de texto que los sistemas de IA cuentan al procesar la información de entrada y generar una respuesta. El uso de más tokens requiere más tiempo de procesamiento, y cada modelo de IA tiene su capacidad máxima.
Vibe-coding: Término para referirse al uso de IA para generar código basado en instrucciones (prompts) en lugar de escribirlo manualmente.
Autores: Angel Gómez, Carlos Gómez, Carolina Ortiz, Diana Tolano, Osvaldo Vázquez.
