# v0: de un prompt o un diseño a una interfaz real con Next.js

> v0 es el generador de interfaces de Vercel: convierte prompts, wireframes y capturas en código Next.js con Tailwind y shadcn/ui. Qué hace y cuánto cuesta.

*Tags: ia, herramientas, vercel, prototipado*

---


> [!info] Definición Rápida
> **v0** es el generador de interfaces y aplicaciones de Vercel. Recibe un prompt, un wireframe o una captura y devuelve código de interfaz en Next.js, con Tailwind y componentes de shadcn/ui, que puedes previsualizar, editar y desplegar. Sirve para llegar rápido a un prototipo funcional.


## ¿Qué hace v0 con un diseño?

Según la documentación oficial, v0 te deja describir una idea en tu idioma para crear funciones, refinar diseños, cambiar textos o levantar prototipos en vivo. También puede generar interfaces de alta fidelidad a partir de wireframes o maquetas, y clonar páginas a partir de capturas o archivos de Figma.

Además, se puede conectar a un backend, usar tus propias APIs, bases de datos y componentes, desplegar con un clic en la infraestructura de Vercel o abrir un pull request para revisión. La documentación menciona capacidades de agente: búsqueda web, inspección del sitio, corrección automática de errores e integración con herramientas externas, con vista previa en tiempo real.

## ¿Por qué le importa a un diseñador?

Porque reduce el tiempo entre una idea y algo que se puede tocar. Un diseñador puede validar una pantalla con usuarios en un prototipo que responde a clics reales, en vez de una imagen estática. El riesgo está en que lo generado parezca terminado sin serlo: los estados de error, la accesibilidad y el contenido real suelen quedar al final.

v0 es un buen laboratorio para entender cómo un agente interpreta tu diseño. Si el resultado se aleja del original, la diferencia te dice qué no estaba suficientemente claro en el archivo: un espaciado sin token, un componente sin nombre o un estado que no dibujaste.

## ¿Qué planes existen?

Según la página de precios y la documentación de v0, consultadas el 21 de octubre de 2026, en USD por usuario:

| Plan | Precio mensual | Qué incluye, a grandes rasgos |
|---|---|---|
| Free | 0 | Límite de 7 mensajes al día; 5 dólares de créditos |
| Plus | 30 | 30 dólares de créditos mensuales por usuario |
| Business | 100 | Lo de Plus, más exclusión de entrenamiento por defecto |
| Enterprise | A medida | Seguridad, SSO y soporte a medida de la empresa |

Tres detalles que confunden. Primero, el plan Plus se llamaba Team: el registro de cambios de v0 indica que fue renombrado, así que verás ambos nombres en artículos antiguos. Segundo, en Free los 5 dólares de créditos son una entrega única para las cuentas nuevas; las cuentas Free anteriores a ese cambio conservan los 5 dólares mensuales. Tercero, existió un plan Premium de 20 dólares al mes que la documentación describe como en retirada y la página de precios actual ya no lo lista.

La página no muestra precios anuales ni fecha de vigencia, y la de Plus aparece con un precio tachado cuyo significado no aclara. Los créditos determinan cuánto puedes generar y se renuevan en la fecha de facturación, así que revisa cuántos consume una pantalla típica antes de comprometerte.

## ¿Cómo usarlo sin perder control?

Un flujo práctico, en pasos:

1. **Define la pantalla en un prompt corto y concreto.** Incluye el objetivo, los datos que muestra y los estados que necesitas: vacío, error y carga.
2. **Da una referencia visual.** Sube la captura o el archivo de Figma, y di qué debe respetar: tipografía, colores y espaciado.
3. **Pide shadcn/ui y tu librería.** Si tienes componentes propios, indícalos por nombre para que no se generen duplicados.
4. **Revisa el código en la vista previa y en el editor.** Compara contra el diseño punto por punto y anota las diferencias.
5. **Itera con cambios pequeños.** Un prompt por ajuste es más fácil de revisar que una reescritura completa.
6. **Antes de desplegar, prueba estados y accesibilidad.** Lo que se ve bien en la vista previa no siempre funciona con teclado o lector de pantalla.

## ¿Cómo se compara con otras herramientas?

v0 parte de una pantalla nueva y entrega un prototipo desplegable. Una herramienta con agente dentro de tu repositorio, como [[cursor|Cursor]] o [[claude-code|Claude Code]], parte de tu código real y modifica lo que ya existe. No son excluyentes: puedes prototipar en v0 para validar la idea y pasar el resultado a tu repositorio para terminarlo con un agente. Si quieres ver el panorama completo del flujo de trabajo, revisa [[prototipar-con-ia|prototipar con IA]].

## ¿Cuándo NO conviene v0?

- Cuando el proyecto no usa Next.js ni Tailwind. El código tendrá que adaptarse, y el costo puede superar el beneficio.
- Cuando necesitas un sistema de diseño propio ya establecido. v0 tiende a generar componentes nuevos si no los conoce.
- Cuando el prototipo es solo para mostrar una idea. Una captura o un flujo en Figma bastan.
- Cuando el dato sensible va a entrar en el prompt o en el backend sin revisar la política del servicio.

## Ejemplo

Ejemplo ilustrativo: un diseñador de producto quiere probar una pantalla de "mis pagos" con tres estados: vacío, con datos y con error al cargar. Sube el archivo de Figma y escribe: "Genera esta pantalla con Next.js y shadcn/ui. Usa el componente `Card` de mi proyecto. Incluye el estado de error con el texto aprobado." v0 genera la versión con datos de muestra. El diseñador ve que el estado de error no aparece y pide solo ese cambio. Después revisa el espaciado contra la captura, corrige un valor y lo envía a revisión en un pull request.

Lo que aprendió: el prototipo llegó rápido, pero los estados que no dibujó en Figma fueron los que el agente tuvo que inventar.

## Comparativa rápida

| Pregunta | v0 | Herramienta con agente en tu repo |
|---|---|---|
| ¿Dónde empieza? | Prompt o archivo de diseño | Tu repositorio existente |
| ¿Qué stack? | Next.js, Tailwind, shadcn/ui | El de tu proyecto |
| ¿Mejor para? | Prototipos y pantallas nuevas | Cambios en un producto que ya existe |

## Errores comunes

- Confiar en la vista previa sin probar los estados de error y vacío.
- Pedir una app completa en un solo prompt, en vez de pantallas o componentes.
- No indicar los componentes existentes y terminar con duplicados.
- Desplegar sin revisar accesibilidad, contenido real y textos legales.
- Olvidar que los créditos se gastan al iterar, no solo al generar.

## Fuentes

- [v0: página de precios](https://v0.app/pricing)
- [v0: documentación de precios](https://v0.app/docs/pricing)
- [v0: registro de cambios](https://v0.app/changelog)
- [v0: documentación](https://v0.app/docs)


---

Source: https://www.fernandoux.com/es/wiki/ia/v0/