Vercel v0 - Herramienta para Generar UI con IA

Que es v0

v0 es una herramienta de generacion de UI impulsada por IA desarrollada por Vercel. Genera componentes React a partir de prompts de texto y crea instantaneamente UI de calidad de produccion usando shadcn/ui y Tailwind CSS.

Caracteristicas

✓ Generacion de UI desde texto
✓ Compatible con shadcn/ui
✓ Estilos con Tailwind CSS
✓ Exportacion de codigo
✓ Mejora iterativa
✓ Diseno responsivo

Uso Basico

Ejemplos de Prompts

Prompt simple:
"A login form with email and password fields"

Prompt detallado:
"A pricing page with 3 tiers (Basic, Pro, Enterprise).
Each tier should have:
- Name and price
- List of features with checkmarks
- A call-to-action button
Use a dark theme with purple accent colors."

Codigo Generado

// Ejemplo de componente generado por v0
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Check } from "lucide-react"

export default function PricingPage() {
  return (
    <div className="container mx-auto py-16">
      <h1 className="text-4xl font-bold text-center mb-12">
        Choose Your Plan
      </h1>
      <div className="grid md:grid-cols-3 gap-8">
        {/* Basic */}
        <Card>
          <CardHeader>
            <CardTitle>Basic</CardTitle>
            <CardDescription>For individuals</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold mb-4">$9/mo</div>
            <ul className="space-y-2">
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-500" />
                5 projects
              </li>
              {/* ... */}
            </ul>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Get Started</Button>
          </CardFooter>
        </Card>
        {/* Pro, Enterprise... */}
      </div>
    </div>
  )
}

Prompts Efectivos

Especificar Estructura

"Create a dashboard layout with:
- A sidebar on the left with navigation links
- A header with search bar and user avatar
- Main content area with a grid of stat cards
- Use a clean, modern design"

Especificar Estilo

"A product card component with:
- Image at the top (16:9 ratio)
- Product name and description
- Price with strikethrough for discounts
- Add to cart button
- Subtle shadow on hover
- Glassmorphism effect"

Especificar Interacciones

"A multi-step form wizard with:
- Step indicator at the top
- Previous/Next buttons
- Form validation
- Success state on completion
- Smooth transitions between steps"

Exportacion de Codigo

Importar con CLI

npx v0 add <component-url>

Copia Manual

// Codigo copiado de v0
// Instalar los componentes shadcn/ui necesarios
npx shadcn-ui@latest add button card

Mejora Iterativa

Prompt inicial:
"A user profile card"

Prompt de mejora:
"Make the avatar larger and add a cover image at the top"

Mejora adicional:
"Add social media links as icons below the bio"

Integracion con shadcn/ui

Configuracion del Proyecto

# Crear proyecto Next.js
npx create-next-app@latest my-app --typescript --tailwind

# Configurar shadcn/ui
npx shadcn-ui@latest init

# Instalar lo necesario para componentes generados con v0
npx shadcn-ui@latest add button card dialog

Estructura de Directorios

src/
├── components/
│   ├── ui/              # Componentes shadcn/ui
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   └── generated/       # Componentes generados con v0
│       ├── pricing-page.tsx
│       └── ...
└── app/
    └── page.tsx

Casos de Uso

Prototipado

"A landing page for a SaaS product with:
- Hero section with headline and CTA
- Features grid with icons
- Testimonials carousel
- Pricing section
- FAQ accordion
- Footer with links"

Biblioteca de Componentes

"Create a set of form components:
1. Text input with label and error state
2. Select dropdown with search
3. Date picker
4. File upload with drag and drop"

Creacion de Layouts

"An admin dashboard layout with:
- Collapsible sidebar
- Breadcrumb navigation
- Data table with sorting and filtering
- Pagination"

Limitaciones

Notas:
- La logica compleja debe agregarse manualmente
- No incluye data fetching
- Solo gestion de estado basica
- Animaciones limitadas

Herramientas Similares

Resumen

v0 es una herramienta que utiliza IA para generar UI rapidamente. Genera codigo de calidad de produccion basado en shadcn/ui y Tailwind CSS, mejorando significativamente la eficiencia del prototipado y la creacion de componentes.