Vibe Coding: Por qué ya no diseño "solo" pantallas.

Durante años, a los diseñadores nos han dado el mismo consejo: "aprende a programar". Muchos lo intentamos, pero chocamos con una realidad: nuestro cerebro está optimizado para flujos, sistemas y problemas de usuario.
Jenna Shaw portrait image
Jenna Shaw portrait image
Jenna Shaw portrait image

En los márgenes de la pantalla donde solíamos empujar píxeles, está emergiendo un campo nuevo — una frontera donde diseñar y construir se funden. Ya no hace falta pasar meses aprendiendo sintaxis; con herramientas como Google AI Studio y Claude Code, una idea puede cristalizarse en un producto digital real en cuestión de días.

Tradicionalmente, el diseño y la programación han sido mundos paralelos. La programación se encarga de cómo funciona, el diseño se centra en qué significa para la persona. Hoy, esa barrera se está desvaneciendo. La inteligencia artificial actúa como traductora entre la intención y la implementación.

(Abajo, una de las aplicaciones web que estoy desarrollando: Karma Financiero)

Por qué esto importa

Durante años, los diseñadores hemos aprendido a pensar en flujos, sistemas y experiencias. Eso es una ventaja enorme. Lo que siempre costó es traducir esa visión a código: aprender frameworks, dominar JavaScript o lidiar con integraciones. Lo que ha cambiado es que la IA ahora puede encargarse de esa capa intermedia. Sólo necesitamos describir lo que queremos en lenguaje natural y la máquina se encarga del resto.

Esto no es magia. Es una transformación del proceso: pasamos de ser espectadores de la tecnología a ser constructores con herramientas que entienden nuestras intenciones. Para quienes ven el diseño como un puente entre el mundo que es y el mundo que podría ser, esto es un salto cuántico metodológico.

La nueva forma de vibe-codear

El proceso que propone esta nueva generación de herramientas —y que cualquier diseñador puede adoptar— consiste en tres pasos fundamentales:

Primero, describir tu producto de forma clara: ¿qué tipo de experiencia quieres crear? ¿Qué acciones debería poder realizar una persona? ¿Cuál es el propósito de esta herramienta o página? Ese lenguaje natural será tu primer prompt.

Después, usar Google AI Studio (o similares) para generar una estructura inicial de proyecto. Google AI Studio responde en el terminal a tus instrucciones: crea archivos, sugerencias de arquitectura, planes de implementación, e incluso guías de despliegue. La clave aquí no es dictar cada línea de código, sino articular bien tu visión y requerimientos.

Por último, Cursor (o si quieres seguir con google, Antigravity) actúa como tu entorno de desarrollo inteligente. Combina el flujo visual tradicional de un editor de código (similar a VS Code) con la potencia de la IA integrada. Puedes ver tu árbol de archivos, tus iteraciones de diseño y tu código, todo en un solo lugar, mientras la IA genera o ajusta fragmentos según tus comandos.

Este ciclo —pensar, describir, iterar— es lo que algunos llaman vibe coding: un flujo en el que las herramientas amplifican tu intención, no la sustituyen.

Del primer prototipo al producto vivo

Una vez que tienes una web app funcional localmente, el siguiente paso es llevarla al mundo. Esto puede significar conectar a servicios como Vercel para que tu producto esté disponible en una URL pública, o integrar autenticación de usuarios y bases de datos si tu producto lo requiere. La IA te acompaña incluso en este tramo, ayudando a generarlo y configurar el despliegue.

(Por ejemplo, otro de mis prototipos: DAPOL)

Lo que esto significa para el diseño

Este no es un llamado a reemplazar diseñadores con IA. Es una invitación a repensar qué significa construir. Los diseñadores que abrazan estas herramientas no sólo diseñan experiencias: participan en su creación, iteran sobre ideas con velocidad y extienden su impacto más allá de las pantallas estáticas.

En un mundo que cambia a ritmos impredecibles, diseñar con herramientas de IA puede ser una ventaja estratégica. Podemos pensar no sólo en cómo se ve algo, sino en cómo funciona, cómo evoluciona con sus usuarios y cómo aprende con ellos.

En los márgenes de la pantalla donde solíamos empujar píxeles, está emergiendo un campo nuevo — una frontera donde diseñar y construir se funden. Ya no hace falta pasar meses aprendiendo sintaxis; con herramientas como Google AI Studio y Claude Code, una idea puede cristalizarse en un producto digital real en cuestión de días.

Tradicionalmente, el diseño y la programación han sido mundos paralelos. La programación se encarga de cómo funciona, el diseño se centra en qué significa para la persona. Hoy, esa barrera se está desvaneciendo. La inteligencia artificial actúa como traductora entre la intención y la implementación.

(Abajo, una de las aplicaciones web que estoy desarrollando: Karma Financiero)

Por qué esto importa

Durante años, los diseñadores hemos aprendido a pensar en flujos, sistemas y experiencias. Eso es una ventaja enorme. Lo que siempre costó es traducir esa visión a código: aprender frameworks, dominar JavaScript o lidiar con integraciones. Lo que ha cambiado es que la IA ahora puede encargarse de esa capa intermedia. Sólo necesitamos describir lo que queremos en lenguaje natural y la máquina se encarga del resto.

Esto no es magia. Es una transformación del proceso: pasamos de ser espectadores de la tecnología a ser constructores con herramientas que entienden nuestras intenciones. Para quienes ven el diseño como un puente entre el mundo que es y el mundo que podría ser, esto es un salto cuántico metodológico.

La nueva forma de vibe-codear

El proceso que propone esta nueva generación de herramientas —y que cualquier diseñador puede adoptar— consiste en tres pasos fundamentales:

Primero, describir tu producto de forma clara: ¿qué tipo de experiencia quieres crear? ¿Qué acciones debería poder realizar una persona? ¿Cuál es el propósito de esta herramienta o página? Ese lenguaje natural será tu primer prompt.

Después, usar Google AI Studio (o similares) para generar una estructura inicial de proyecto. Google AI Studio responde en el terminal a tus instrucciones: crea archivos, sugerencias de arquitectura, planes de implementación, e incluso guías de despliegue. La clave aquí no es dictar cada línea de código, sino articular bien tu visión y requerimientos.

Por último, Cursor (o si quieres seguir con google, Antigravity) actúa como tu entorno de desarrollo inteligente. Combina el flujo visual tradicional de un editor de código (similar a VS Code) con la potencia de la IA integrada. Puedes ver tu árbol de archivos, tus iteraciones de diseño y tu código, todo en un solo lugar, mientras la IA genera o ajusta fragmentos según tus comandos.

Este ciclo —pensar, describir, iterar— es lo que algunos llaman vibe coding: un flujo en el que las herramientas amplifican tu intención, no la sustituyen.

Del primer prototipo al producto vivo

Una vez que tienes una web app funcional localmente, el siguiente paso es llevarla al mundo. Esto puede significar conectar a servicios como Vercel para que tu producto esté disponible en una URL pública, o integrar autenticación de usuarios y bases de datos si tu producto lo requiere. La IA te acompaña incluso en este tramo, ayudando a generarlo y configurar el despliegue.

(Por ejemplo, otro de mis prototipos: DAPOL)

Lo que esto significa para el diseño

Este no es un llamado a reemplazar diseñadores con IA. Es una invitación a repensar qué significa construir. Los diseñadores que abrazan estas herramientas no sólo diseñan experiencias: participan en su creación, iteran sobre ideas con velocidad y extienden su impacto más allá de las pantallas estáticas.

En un mundo que cambia a ritmos impredecibles, diseñar con herramientas de IA puede ser una ventaja estratégica. Podemos pensar no sólo en cómo se ve algo, sino en cómo funciona, cómo evoluciona con sus usuarios y cómo aprende con ellos.

En los márgenes de la pantalla donde solíamos empujar píxeles, está emergiendo un campo nuevo — una frontera donde diseñar y construir se funden. Ya no hace falta pasar meses aprendiendo sintaxis; con herramientas como Google AI Studio y Claude Code, una idea puede cristalizarse en un producto digital real en cuestión de días.

Tradicionalmente, el diseño y la programación han sido mundos paralelos. La programación se encarga de cómo funciona, el diseño se centra en qué significa para la persona. Hoy, esa barrera se está desvaneciendo. La inteligencia artificial actúa como traductora entre la intención y la implementación.

(Abajo, una de las aplicaciones web que estoy desarrollando: Karma Financiero)

Por qué esto importa

Durante años, los diseñadores hemos aprendido a pensar en flujos, sistemas y experiencias. Eso es una ventaja enorme. Lo que siempre costó es traducir esa visión a código: aprender frameworks, dominar JavaScript o lidiar con integraciones. Lo que ha cambiado es que la IA ahora puede encargarse de esa capa intermedia. Sólo necesitamos describir lo que queremos en lenguaje natural y la máquina se encarga del resto.

Esto no es magia. Es una transformación del proceso: pasamos de ser espectadores de la tecnología a ser constructores con herramientas que entienden nuestras intenciones. Para quienes ven el diseño como un puente entre el mundo que es y el mundo que podría ser, esto es un salto cuántico metodológico.

La nueva forma de vibe-codear

El proceso que propone esta nueva generación de herramientas —y que cualquier diseñador puede adoptar— consiste en tres pasos fundamentales:

Primero, describir tu producto de forma clara: ¿qué tipo de experiencia quieres crear? ¿Qué acciones debería poder realizar una persona? ¿Cuál es el propósito de esta herramienta o página? Ese lenguaje natural será tu primer prompt.

Después, usar Google AI Studio (o similares) para generar una estructura inicial de proyecto. Google AI Studio responde en el terminal a tus instrucciones: crea archivos, sugerencias de arquitectura, planes de implementación, e incluso guías de despliegue. La clave aquí no es dictar cada línea de código, sino articular bien tu visión y requerimientos.

Por último, Cursor (o si quieres seguir con google, Antigravity) actúa como tu entorno de desarrollo inteligente. Combina el flujo visual tradicional de un editor de código (similar a VS Code) con la potencia de la IA integrada. Puedes ver tu árbol de archivos, tus iteraciones de diseño y tu código, todo en un solo lugar, mientras la IA genera o ajusta fragmentos según tus comandos.

Este ciclo —pensar, describir, iterar— es lo que algunos llaman vibe coding: un flujo en el que las herramientas amplifican tu intención, no la sustituyen.

Del primer prototipo al producto vivo

Una vez que tienes una web app funcional localmente, el siguiente paso es llevarla al mundo. Esto puede significar conectar a servicios como Vercel para que tu producto esté disponible en una URL pública, o integrar autenticación de usuarios y bases de datos si tu producto lo requiere. La IA te acompaña incluso en este tramo, ayudando a generarlo y configurar el despliegue.

(Por ejemplo, otro de mis prototipos: DAPOL)

Lo que esto significa para el diseño

Este no es un llamado a reemplazar diseñadores con IA. Es una invitación a repensar qué significa construir. Los diseñadores que abrazan estas herramientas no sólo diseñan experiencias: participan en su creación, iteran sobre ideas con velocidad y extienden su impacto más allá de las pantallas estáticas.

En un mundo que cambia a ritmos impredecibles, diseñar con herramientas de IA puede ser una ventaja estratégica. Podemos pensar no sólo en cómo se ve algo, sino en cómo funciona, cómo evoluciona con sus usuarios y cómo aprende con ellos.

OTROS PROYECTOS

Links

© 2025 NÚRIA LÓPEZ. TODOS LOS DERECHOS RESERVADOS

Links

© 2025 NÚRIA LÓPEZ. TODOS LOS DERECHOS RESERVADOS

Links

© 2025 NÚRIA LÓPEZ. TODOS LOS DERECHOS RESERVADOS

Links

© 2025 NÚRIA LÓPEZ. TODOS LOS DERECHOS RESERVADOS