Vibe Coding para UX Designers

Si tu perfil es UX Designer o Product Designer y quieres empezar a hacer vibe coding ux designers en serio, sigue leyendo. Este artículo está pensado exactamente para eso: para diseñadores UX que quieren dar el paso de Figma al código sin perder el control.

En este post te explico los pasos para arrancar un proyecto en local (en tu propio ordenador) y empezar a construir producto real.

Con lo que te cuento aquí podrás empezar a prototipar una web, una app o una webapp sin depender de nadie.

Aquí es donde mucha gente con nuestro perfil se frena.

Siempre puedes hacer Vibe Coding con herramientas como Lovable o Figma Make. Funcionan y te permiten avanzar rápido.

Pero yo prefiero trabajar con IDEs. Me refiero a programas como Cursor, Google Antigravity u OpenCode.

Por qué?

• Porque tengo más control sobre lo que construyo.
• Porque veo el código.
• Porque entiendo qué está pasando detrás de la pantalla.
• Y porque eso mejora mi criterio como diseñador y la UX del producto que estoy creando.

Si quieres hacer Vibe Coding de verdad como UX Designer, necesitas montar un entorno local mínimo.

Nada complejo, todo para dummies, solo lo justo para empezar a construir algo real.

Qué necesitas antes de empezar

Te cuento lo mínimo para que esto funcione sin dolor.

Node.js

Lo primero que tienes que instalar es Node.js.

Es un entorno de ejecución de JavaScript que te permite crear y ejecutar proyectos web en tu ordenador.

Después de instalarlo, comprueba que todo está bien.

Abre la Terminal (en Windows: PowerShell) y ejecuta estos códigos:

node -v
npm -v

Si la máquina te devuelve números (por ejemplo v20.x y 10.x), vas bien.

Si no, revisa la instalación antes de seguir.

IDE

El IDE es el programa donde vas a escribir y ejecutar código.

Cursor, Google Antigravity, OpenCode… hay muchos.

Yo te recomiendo empezar con Google Antigravity.

En otro post te explicaré cómo instalar y usar Git.

Ahora lo que queremos es empezar a vibe codear sin complicarnos con control de versiones.

Así que seguimos.

Crear el proyecto en local

Primero crea una carpeta en tu ordenador donde vas a crear tu proyecto.

Ponle un nombre representativo.

Yo te recomiendo tener una carpeta general para proyectos y dentro crear la carpeta específica de este proyecto.

Después abre esa carpeta desde tu IDE.

En el sidebar del agente pídele a la IA algo como:

Instala todas las dependencias necesarias para montar una web en React y TypeScript.

La máquina se pondrá a trabajar.

Te pedirá autorización para ejecutar ciertos procesos.

Dale a Run.

Cómo arrancar el proyecto

En la parte final de lo que genere la IA verás el comando:

npm run dev

Puedes ejecutarlo manualmente desde la terminal.

Pero como hoy estamos en modo dummies, puedes hacer algo más simple:

Pídele a la IA:

Arranca el servidor tú.

Lo hará sin problemas.

Como resultado te dará una URL del tipo:

http://localhost:5173/

Puedes entrar desde tu navegador habitual.

O puedes abrirlo dentro del propio IDE:

Pulsa Shift + Control + P y escribe:

Simple browert: Show

Introduce la URL y la tendrás en una pestaña dentro del IDE.

A partir de este momento puedes empezar a vibe codear.

Antes de lanzarte a lo loco

Te recomiendo pedirle a la IA que trace un pequeño plan del proyecto.

Por ejemplo:

• Qué vas a construir
• Qué componentes necesitas
• Qué estructura tendrá
• Qué estados debe contemplar

Eso marca la diferencia entre improvisar y construir con criterio.

De eso te hablaré en el siguiente post.

Quiero hacer Vibe Coding ya mismo

Si te puede el ansia, relax…

Empieza con algo simple.

Por ejemplo:

Crea una web simple con un Hola Mundo.

Pulsa Enter…

Deja que la máquina trabaje y observa lo que ocurre.

Pero presta atención al siguiente artículo, porque allí te contaré cómo planificar mejor para que el Vibe Coding no sea solo jugar con prompts.

De UX Designer a Product Maker

La primera vez que levantas un proyecto en local y ves tu componente renderizado en el navegador, algo cambia.

Dejas de pensar solo en pantallas… empiezas a pensar en estructura, en estado y en comportamiento real.

Dejas de ser solo diseñador y empiezas a convertirte en alguien que construye.

Ponte manos a la obra,

Montar esto te lleva 10 minutos y te da independencia.

Luego me cuentas 🙌