Vercel v0 - Ferramenta de Geração de UI com IA

O que é v0

v0 é uma ferramenta de geração de UI impulsionada por IA desenvolvida pela Vercel. Ela gera componentes React a partir de prompts de texto e cria UIs de qualidade de produção usando shadcn/ui e Tailwind CSS instantaneamente.

Características

✓ Geração de UI a partir de texto
✓ Compatível com shadcn/ui
✓ Estilização com Tailwind CSS
✓ Exportação de código
✓ Melhoria iterativa
✓ Design responsivo

Uso Básico

Exemplos de Prompts

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

Prompt detalhado:
"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."

Código Gerado

// Exemplo de componente gerado pelo 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 Eficazes

Especificando Estrutura

"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"

Especificando 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"

Especificando Interações

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

Exportação de Código

Importação via CLI

npx v0 add <component-url>

Cópia Manual

// Código copiado do v0
// Instale os componentes shadcn/ui necessários
npx shadcn-ui@latest add button card

Melhoria Iterativa

Prompt inicial:
"A user profile card"

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

Mais melhorias:
"Add social media links as icons below the bio"

Integração com shadcn/ui

Setup do Projeto

# Criar projeto Next.js
npx create-next-app@latest my-app --typescript --tailwind

# Setup do shadcn/ui
npx shadcn-ui@latest init

# Instalar componentes necessários para os gerados pelo v0
npx shadcn-ui@latest add button card dialog

Estrutura de Diretórios

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

Casos de Uso

Prototipagem

"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"

Criação de Layouts

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

Limitações

Observações:
- Lógica complexa precisa ser adicionada manualmente
- Data fetching não está incluído
- Gerenciamento de estado apenas básico
- Animações são limitadas

Ferramentas Similares

Resumo

v0 é uma ferramenta que utiliza IA para gerar UIs rapidamente. Ela gera código de qualidade de produção baseado em shadcn/ui e Tailwind CSS, aumentando significativamente a eficiência na prototipagem e criação de componentes.