• Saltar a la navegación principal
  • Saltar al contenido principal

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Vibe coding
  • Product Design
  • Design system
  • Tutoriales de Figma
  • Blog
  • Newsletter
Vibe coding / Vibe coding con Qwen: no pierdas el control de tu backlog

Vibe coding con Qwen: no pierdas el control de tu backlog

Mi backlog estaba en todas partes, en mis notas, en Discord con comentarios de la comunidad, era un caos… Necesitaba encontrar un flujo que funcione y que nada se me escape de las manos. La solución la encontré haciendo vibe coding con Qwen.

cómo hacer vibe coding con qwen
Lo que hice con Qwen 3.6 en OpenCode para optimizar mi vibe coding.

Te pongo en contexto…

En uno de los últimos directos que hice en YouTube con la Comunidad UX fomo dejé cosas por pulir.

La lista era larga: ajustes en el listado de posts del blog, pantalla de edición, la galería de recursos del hub y otros detalles menores.

Minutos después de terminar el streaming subí todo a GitHub.

Al día siguiente, con más tranquilidad, me puse a organizar las tareas pendientes del próximo directo.

En el backlog Había de todo, mis apuntes, los que se tomaron durante el streaming y los que me pasó Tomás, un compañero de la comunidad.

Cuando lo vi todo junto me di cuenta que necesitaba ordenarlo.

Qué hice entonces?

Te cuento…

Índice del artículo

Toggle
  • Pasar tareas a Markdown
  • Trabajar en lotes con IA
  • Validar el trabajo de la IA
  • El sistema que acelera todo
  • Qwen y el flujo sin fricción
  • Un sistema que funciona

Pasar tareas a Markdown

Mi primera reacción fue la de siempre: abrir pestañas, ir saltando entre una y otra, apuntando en mi cabeza, olvidando la mitad…

Entonces hice algo diferente.

Me planteé pasarle a Qwen una instrucción simple:

«Genera un archivo TAREAS_PENDIENTES.md en el directorio raíz. Ordena estas tareas por tipo. Frontend y backend, básicamente.»

Lo hice en vivo, para que la comunidad viera el proceso en acción.

archivo markdown de tareas pendientes creado con qwen
Aquí puedes ver parte del archivo Markdown que generó Qwen.

Si tú quieres hacerlo ahora, aquí debajo te dejo un ejemplo de cómo se verá tu lista de tareas en formato Markdown:

## Frontend
- [ ] Hacer clicable toda la card de recursos
- [ ] Quitar like y dislike, poner visitas
- [ ] Arreglar labels descentrados en botones

## Backend
- [ ] Conectar tabla de usuarios
- [ ] Validar categorías sugeridas

Sigamos…

Unos segundos después de iniciar el streaming, que puedes ver al final de este post, introduje el prompt anterior y le pegué las 3 listas de tareas que tenía apuntadas.

Qwen no me pidió que fuera más específico, la máquina no necesitaba que yo hiciera el trabajo de «organizador».

Yo metí el caos en texto plano y Qwen generó un .md ordenado.

Trabajar en lotes con IA

Cuando abrí el archivo y vi todo estructurado pensé «de verdad, una maravilla».

El backlog dejó de ser un montón de cosas sin prioridad para convertirse en «lotes de trabajo relacionado».

Después, en lugar de decirle a Qwen «arregla esto, arregla aquello», le solté:

«Escoge 5 tareas de frontend que estén relacionadas entre sí y ponte con ellas.»

Mientras Qwen trabajaba, yo seguí hablando con la comunidad a través del chat de YouTube.

Cuando terminó, me fui al navegador y empecé a probar.

Entré como usuario, pinché en determinados elementos de la interfaz, probé las reacciones nuevas de algunos elementos, scrolleé en el dropdown de categorías, etc.

Lo probé todo, con mis ojos y los de todas las personas que seguían el streaming.

Me parece importante recalcar esto porque todavía hoy veo a developers, UX Designers y Product Makers confiar en que todo lo que devuelve la IA está bien, y ya sabes cuál es la realidad…

Validar el trabajo de la IA

Algunas cosas funcionaban, el flujo de crear una categoría estaba raro, el Button no cambiaba de estado cuando debería…

Lo añadí todo en el archivo TAREAS_PENDIENTES.md que generó Qwen.

  • Abrí el archivo Markdown
  • Añadí ítems del tipo: «Revisar que el Button no cambia de estado cuando admin crea una categoría»

Y luego le puse a Qwen:

«Mira la tarea que pone ‘Revisar que el Button… arréglalo.»

Durante el resto de la sesión, Qwen y yo fuimos marcando con [x] el resto de ajustes.

La idea funcionó.

El sistema que acelera todo

Hay truco?

A ver, la IA no adivina, trabaja dentro de una estructura que tú controlas.

Cuando pasas a una IA un backlog desorganizado, ella no sabe qué es prioritario.

Pero cuando genera un Markdown ordenado donde cada tarea está en su lugar, donde está claro cuál está relacionada con cuál, el flujo se acelera.

En este caso Qwen entendió el contexto porque está ahí escrito.

Recuerda, yo le dije «elige 5 de estas y ejecuta», y como dije antes, lo hizo muy bien.

Qwen y el flujo sin fricción

Lo que cambió para mí es la velocidad, la fricción desapareció.

Antes:

  • Pensaba: «Tengo 47 cosas por hacer, ¿por dónde empiezo?»

Ahora:

  • Leo el .md y veo que hay 3 cosas de frontend relacionadas con la galería
  • Le digo a Qwen que las arregle
  • Luego reviso y valido

Es un loop optimizado.

Un sistema que funciona

El backlog sigue siendo largo, cada semana salen cosas nuevas, pero no me agobia ver la lista en el Markdown.

Es información que la IA lee, yo digo «elige 5 tareas relacionadas de…», ella lo hace y yo valido.

Luego apunto lo que no funcionó como debería y así hasta el final, de la fase o el proyecto.

Es un sistema vivo.

No es perfecto, a veces yo fallo al pedir tareas, otras veces es la IA la que comete un error o genera algo que no esperaba.

Pero el ciclo es rápido para iterar.

Lo que más valoro?

Tengo más control.

Qwen ejecuta, la validación es mía, el backlog es mío y los cambios que van a producción son decisión mía.

Si eres UX Designer, Product Designer, o alguien que construye productos con código, esto te va a funcionar.

Quieres intentarlo?

Lleva tu backlog a un archivo Markdown. Pídeselo a Qwen, Claude, Codex, etc. Dile que lo organice por tipo. Y después dale instrucciones específicas: «Elige 5 tareas de frontend que estén relacionadas».

Luego ejecuta, valida en tu browser, apunta lo que está raro…

Y sigue el loop!

Aprende sobre UX/UI + IA, Figma y Product Design

📣 Apúntate a mi newsletter semanal

🔥 Únete a la comunidad UX y UI fácil en Discord

🔴 Suscríbete al canal de YouTube para ver tutoriales

Acerca de Juanpol

Diseñando desde 1993 y todavía aprendiendo. Actualmente como Product Designer en Freepik, aquí comparto mis notas sobre lo que voy probando de UX/UI e IA.

Juanpol

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Acerca de
  • info@chocolate-chimpanzee-522666.hostingersite.com
  • LinkedIn
  • GitHub
  • YouTube
  • Discord
  • Telegram
  • X | @juanpol

  • Aviso legal, Privacidad y Cookies

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

Política de cookies

Más información sobre nuestra política de cookies.