Accueil › v0 › Prompts

Prompts v0 : Le Guide Complet pour Générer des UI Exceptionnelles

Les prompts v0 sont des instructions en langage naturel envoyées à l’outil de Vercel pour générer des composants React, des pages complètes et des applications full-stack à partir d’une simple description textuelle.

La qualité de votre prompt détermine directement la qualité du code produit. Un prompt vague donne un composant générique. Un prompt structuré, avec contexte d’usage, contraintes techniques et détails visuels, produit du code production-ready en une seule génération. Vercel a documenté qu’un prompt bien rédigé réduit le temps de génération de 30 à 40 % et consomme moins de crédits.

Ce guide vous donne un framework reproductible, plus de 50 exemples concrets classés par catégorie, et les techniques avancées utilisées par les power users de v0 pour expédier des apps complètes en quelques minutes.

Le framework en 3 piliers pour des prompts v0 efficaces

Vercel a identifié, après des centaines d’applications testées, que les meilleurs prompts reposent systématiquement sur trois entrées fondamentales. Ce n’est pas une théorie : les tests internes montrent que ce framework produit du code fonctionnel dès la première génération dans la majorité des cas.

Pilier 1 : La surface produit

La surface produit décrit concrètement ce que vous construisez. Pas « un dashboard », mais les composants précis, les données affichées et les actions possibles. Plus vous êtes explicite, moins v0 invente des fonctionnalités inutiles ou en oublie d’essentielles.

Voici la différence concrète :

Pilier 2 : Le contexte d’usage

Le contexte indique à v0 qui utilise votre interface, dans quelles conditions, et pourquoi. Cela influence les choix UX : taille des éléments, densité de l’information, hiérarchie visuelle, ton du copywriting.

Exemples de contexte utile :

Pilier 3 : Contraintes et goût

Les contraintes disent à v0 ce qu’il ne doit pas inventer. Elles couvrent le style visuel, les limitations techniques et les préférences de design. C’est ce qui transforme un bon résultat en un résultat prêt pour la production.

Exemples de contraintes efficaces :

• « Professional but approachable. Use card-based layout with rounded corners. »
• « Desktop-first since users have large monitors. Maximum 3 columns. »
• « Color code by priority: red for urgent, yellow for medium, green for low. »
• « No animations. Accessible WCAG AA. High contrast. »
• « Use shadcn/ui Dialog for modals, not custom implementations. »

Prompts pour composants UI

Les composants sont le cas d’usage principal de v0. L’outil excelle particulièrement avec la stack shadcn/ui + Tailwind CSS, car il a été entraîné sur ces bibliothèques. Voici des prompts testés et optimisés pour les composants les plus demandés.

Navigation et header

Create a responsive navigation bar for a SaaS product.
- Logo on the left, nav links center (Features, Pricing, Docs, Blog)
- Right side: search input with cmd+K shortcut hint, dark mode toggle, "Sign in" text link, "Get Started" primary button
- Mobile: hamburger menu with slide-in drawer from right
- Sticky on scroll with backdrop blur and subtle border-bottom
- Use shadcn/ui NavigationMenu and Sheet components

Tableaux de données

Build a data table for managing customer subscriptions.
- Columns: customer name (with avatar), email, plan (badge: Free/Pro/Enterprise), MRR (currency), status (active/churned/trial), next billing date
- Features: column sorting, search filter, status filter dropdown, pagination (10/25/50 per page)
- Row actions: kebab menu with Edit, Pause, Cancel options
- Empty state with illustration and CTA
- Use shadcn/ui Table, Badge, DropdownMenu, Select components
- Zebra striping on rows, sticky header on scroll

Formulaires

Create a multi-step checkout form for a SaaS subscription.
Step 1: Plan selection (3 radio cards showing plan name, price, features list)
Step 2: Account info (email, password with strength meter, company name)
Step 3: Payment (credit card fields with auto-formatting, billing address)
Step 4: Review and confirm (summary of all inputs, edit links per section)
- Progress indicator at top showing current step
- Back/Next buttons with validation before proceeding
- Inline error messages below each field
- Use React Hook Form + Zod validation
- shadcn/ui Card, RadioGroup, Input, Button components

Cartes et grilles

Build a product catalog grid for a design tool marketplace.
- Card: thumbnail image (16:9), tool name, one-line description, price badge (Free or $X/mo), rating (stars + count), category tag
- Grid: 3 columns on desktop, 2 on tablet, 1 on mobile
- Filter bar: category dropdown, price range slider, sort by (Popular/Newest/Price)
- Hover effect: slight scale up + shadow increase
- Skeleton loading state for 6 placeholder cards
- Use shadcn/ui Card, Badge, Slider, Select

Prompts pour pages complètes

Depuis la refonte majeure de février 2026, v0 gère la création de pages complètes avec intégration Git, déploiement en un clic sur Vercel, et connexion à des bases de données. Les prompts de pages exigent plus de structure que les composants simples.

Landing page SaaS

Create a complete SaaS landing page for "FlowMetrics", an analytics tool for product teams.

Hero section:
- Headline: "Understand your users in minutes, not months"
- Subheadline: one sentence about real-time product analytics
- Two CTAs: "Start Free Trial" (primary) and "Watch Demo" (secondary/outline)
- Product screenshot in a browser mockup frame, tilted slightly

Social proof bar: logos of 5 tech companies (use placeholder logos)

Features section:
- 3 feature cards in a row: Real-time Events, Funnel Analysis, Cohort Retention
- Each card: icon, title, 2-line description, "Learn more" link

Pricing section:
- 3 tiers: Starter ($0), Growth ($49/mo), Scale ($199/mo)
- Feature comparison list, highlighted recommended plan
- Annual/monthly toggle with 20% discount badge on annual

Testimonials:
- 3 quote cards with photo, name, role, company, quote text
- Star rating below each quote

CTA section:
- Dark background, centered headline, email input + CTA button

Footer:
- 4 columns: Product, Resources, Company, Legal
- Bottom bar: copyright, social icons, language selector

Style: clean, modern, light theme. Font: system UI. Accent color: indigo-600.
Mobile responsive. Use Next.js App Router + shadcn/ui.

Dashboard analytique

Build an analytics dashboard for a content marketing team.

Top bar: date range picker (last 7/30/90 days, custom), "Export CSV" button, refresh button with loading spinner

KPI row (4 cards):
- Total views (number + % change vs previous period, green/red arrow)
- Unique visitors (same pattern)
- Avg. time on page (in mm:ss format)
- Conversion rate (percentage with trend)

Charts section (2 columns):
- Left: line chart showing daily views + visitors over selected period (dual Y-axis)
- Right: horizontal bar chart of top 10 pages by views

Bottom section (2 columns):
- Left: table of recent articles (title, author, publish date, views, CTR)
- Right: donut chart of traffic sources (Organic, Social, Direct, Referral, Email) with legend

Sidebar (collapsible):
- Logo, nav items with icons: Dashboard, Content, Audience, Settings
- Active state: highlighted background + left border accent
- Bottom: user avatar, name, "Pro" badge, settings gear

Dark theme. Use recharts for all charts. shadcn/ui for UI components.
Responsive: sidebar collapses to bottom nav on mobile.

Application CRUD complète

Create a project management app with full CRUD operations.

Projects list view:
- Card grid showing: project name, description (2 lines truncated), status badge (Active/Paused/Completed), team member avatars (max 3 + overflow count), due date, progress bar
- Filters: status, team member, date range
- "New Project" button opening a creation dialog

Project detail view:
- Header: project name (editable inline), status dropdown, edit/delete buttons
- Tabs: Overview, Tasks, Files, Activity
- Tasks tab: kanban board with columns (To Do, In Progress, Review, Done)
- Each task card: title, assignee avatar, priority dot (red/yellow/green), due date
- Drag and drop between columns

Task creation dialog:
- Title, description (rich text), assignee dropdown, priority select, due date picker, labels multi-select

Use Next.js App Router. localStorage for persistence.
shadcn/ui Dialog, Tabs, Select, Calendar, Badge.
Light theme with subtle gray backgrounds.

Techniques avancées de prompting

Utiliser l’enhancement automatique

v0 propose une fonctionnalité d’enhancement : quand vous écrivez un prompt simple, l’outil peut l’enrichir automatiquement avec des détails techniques. C’est particulièrement utile quand vous n’êtes pas sûr des choix d’implémentation.

Prompt basique : « Create a todo app »

Version enhanced par v0 : « Create a modern todo application with add/edit/delete tasks, completion tracking, filtering, localStorage persistence, and responsive design. »

L’enhancement fonctionne bien pour les projets simples et clairs. Pour les applications multi-fonctions, préférez un prompt structuré manuellement, car l’enhancement automatique peut manquer des exigences métier spécifiques.

File d’attente de prompts

v0 permet de mettre jusqu’à 10 prompts en file d’attente pendant qu’une génération est en cours. Les prompts en queue s’exécutent automatiquement dans l’ordre. Vous pouvez les réordonner, les modifier ou les supprimer avant leur exécution.

Cette fonctionnalité est idéale pour les workflows multi-étapes. Exemple concret :

// Prompt 1 (en cours d'exécution)
Create a Next.js app with authentication using NextAuth.js

// Prompt 2 (en queue)
Add a PostgreSQL database with Prisma ORM, create User and Project models

// Prompt 3 (en queue)
Build the dashboard page showing the user's projects in a card grid

// Prompt 4 (en queue)
Add a settings page with profile editing and account deletion

Approche PRD-first pour les apps complexes

Pour les applications multi-fonctions avec plusieurs rôles utilisateur, commencez par demander à v0 de générer un PRD (Product Requirements Document) avant de coder. Cette approche garantit que vous ne manquez pas d’exigences critiques.

Create a PRD for a customer support ticket system with:
- Customer portal: submit tickets, track status, live chat
- Agent dashboard: ticket queue, assignment, priority management, canned responses
- Admin panel: team management, SLA settings, analytics

Then implement it step by step.

v0 génère d’abord la spécification complète, puis vous pouvez itérer sur chaque section en utilisant la file d’attente de prompts.

Combiner prompts textuels et Design Mode

v0 offre deux modes d’itération complémentaires. Les prompts textuels servent aux changements fonctionnels : ajout de fonctionnalités, restructuration de layout, modification de logique. Le Design Mode permet de sélectionner visuellement un élément et d’ajuster ses propriétés directement : couleurs, espacement, typographie.

La bonne pratique : utilisez les prompts pour la structure et la logique, puis le Design Mode pour les ajustements visuels fins. Cela consomme moins de crédits que de tout faire par prompts successifs.

Prompts avec screenshots et Figma

v0 accepte des images comme entrée. Vous pouvez uploader un screenshot de site existant, une maquette Figma, un wireframe dessiné à la main, ou même une capture d’écran d’un concurrent. L’outil analyse l’image et génère du code correspondant.

Pour les imports Figma, Vercel recommande de découper vos designs en composants séparés plutôt que d’importer une page entière. Chaque composant dans son propre frame produit de meilleurs résultats, car v0 peut traiter chaque élément de manière indépendante.

Prompts spécialisés par type de projet

E-commerce

Build an e-commerce product page.
- Product image gallery: main image + 4 thumbnails, click to zoom, swipe on mobile
- Right column: product name, star rating (4.5/5, 128 reviews), price with strikethrough original price and discount badge, color swatches (3 options), size selector (S/M/L/XL) with stock indicator, quantity selector, "Add to Cart" primary button, "Save to Wishlist" outline button
- Tabs below: Description (rich text), Specifications (key-value table), Reviews (list with sort by recent/helpful)
- "You may also like" section: horizontal scroll of 6 product cards
- Mobile: sticky bottom bar with price + "Add to Cart" button
- Use Next.js + shadcn/ui. Light theme. Accent: emerald-600.

Paramètres SaaS

Create a settings page for a SaaS application.
Sidebar nav: Profile, Team, Billing, Integrations, Notifications, Security

Profile section:
- Avatar upload with crop dialog
- Name, email (read-only with "Change email" link), bio textarea
- Save/Cancel buttons

Billing section:
- Current plan card (Pro, $49/mo, next billing date)
- "Change Plan" button opening plan comparison modal
- Payment method: card ending in 4242, "Update" link
- Invoice history table: date, amount, status badge (Paid/Pending), download PDF link

Notifications section:
- Toggle switches grouped by category: Email (new comment, mention, weekly digest), Push (real-time alerts, marketing), Slack (critical only)

Use shadcn/ui Tabs for sections on mobile (sidebar on desktop).
Form validation with save confirmations (toast notifications).

Portfolio développeur

Create a developer portfolio website.
- Hero: large name, one-line tagline, animated gradient background, social links (GitHub, LinkedIn, Twitter icons), "Download CV" button
- About section: photo, 3 paragraphs of bio, tech stack icons grid (React, Next.js, TypeScript, Python, PostgreSQL, AWS)
- Projects section: 3 project cards with: screenshot, title, description, tech badges, "Live Demo" and "GitHub" buttons. Filter by tech stack
- Experience timeline: 3 entries with company, role, dates, bullet points
- Blog section: 3 recent article cards linking to external blog
- Contact: simple form (name, email, message) + email address + social links
- Dark theme with accent color. Smooth scroll between sections.
- Use Framer Motion for scroll animations.

Composants 3D

v0 gère la génération de graphismes 3D via react-three-fiber. Si l’outil indique qu’il ne peut pas générer du 3D, ajoutez simplement « using react-three-fiber » à votre prompt.

Create a 3D product showcase using react-three-fiber.
- Rotating 3D box/cube representing a product package
- Orbit controls for user interaction (drag to rotate, scroll to zoom)
- Soft ambient lighting + one directional light casting shadow
- Gradient background
- Below the 3D viewer: product name, price, "Buy Now" button
- Responsive: 3D canvas takes full width, 400px height on mobile, 600px on desktop

Erreurs courantes à éviter

Prompts trop vagues

Le problème le plus fréquent. « Make a website » ou « Build an app » force v0 à deviner l’intégralité du contexte. Résultat : un prototype générique qui ne correspond à aucun besoin réel. Chaque prompt doit contenir au minimum les composants attendus et leurs données.

Surcharger un seul prompt

Demander une application entière en un seul prompt de 500 mots dépasse la capacité de traitement optimale. Découpez en étapes logiques. Utilisez la file d’attente pour enchaîner les prompts de manière séquentielle.

Ignorer l’itération

v0 est conçu pour un workflow conversationnel. La première génération est rarement parfaite. Le processus optimal est : prompt initial structuré, puis 2 à 3 itérations ciblées. Chaque itération doit spécifier précisément ce qui doit changer (« Make the header sticky and add backdrop blur ») plutôt que des demandes floues (« Make it better »).

Oublier les contraintes framework

v0 excelle avec React et Next.js. Il supporte aussi Svelte, Vue et Remix, mais avec moins de fiabilité. Si vous travaillez hors de l’écosystème React, précisez-le dans le prompt, et attendez-vous à devoir ajuster le code manuellement.

Templates de prompts prêts à l’emploi

Voici des templates réutilisables. Copiez-les et remplacez les crochets par vos spécifications.

Template : Composant UI

Create a [type de composant] for [contexte d'utilisation].

Data displayed: [liste des champs/données]
Actions: [liste des actions utilisateur]
States: [normal, loading, empty, error]

Style: [thème, couleurs, arrondis]
Responsive: [comportement mobile/tablet/desktop]
Components: [composants shadcn/ui à utiliser]

Template : Page complète

Build a [type de page] for [nom du produit], a [description en une ligne].

Sections (top to bottom):
1. [Section 1: détail des éléments]
2. [Section 2: détail des éléments]
3. [Section 3: détail des éléments]
...

Target user: [description de l'utilisateur cible]
Device: [desktop-first / mobile-first]
Theme: [light/dark], accent color: [couleur]
Framework: Next.js App Router + shadcn/ui + Tailwind CSS

Template : Itération ciblée

In the [nom de la section/composant]:
- Change [élément spécifique] to [nouvelle valeur/comportement]
- Add [nouveau élément] with [propriétés]
- Remove [élément à supprimer]
- Move [élément] from [position actuelle] to [nouvelle position]

Keep everything else unchanged.

v0 vs autres outils : adapter vos prompts

Les techniques de prompting varient selon l’outil. Voici comment adapter votre approche.

v0 est le meilleur choix quand vous avez besoin de composants UI de haute qualité dans l’écosystème React/Next.js avec un déploiement immédiat. Si vous avez besoin d’un backend complet, Lovable avec Supabase ou Bolt.new seront plus adaptés. Si vous travaillez sur un codebase existant, Cursor ou Claude Code restent supérieurs.

Prompts et workflow Git

Depuis la mise à jour de février 2026, v0 intègre un panneau Git complet. Vous pouvez importer un repository GitHub existant, créer une branche par conversation, ouvrir des pull requests, et déployer automatiquement au merge. Cela change la manière de structurer vos prompts.

Pour travailler sur un repo existant :

Import my GitHub repo [username/repo-name].
On a new branch "feature/redesign-pricing":
- Redesign the pricing page at /app/pricing/page.tsx
- Keep the same data structure but update the layout to a 3-column card grid
- Add an annual/monthly toggle that updates all prices
- Match the existing design system (check tailwind.config.ts for colors and fonts)

v0 récupère automatiquement les variables d’environnement et la configuration Vercel du projet. Le code généré vit directement dans votre repository, pas dans un sandbox isolé.

Optimiser la consommation de crédits

v0 facture en tokens, pas en nombre de messages. Un prompt long et détaillé coûte plus qu’un prompt court, mais il produit souvent un résultat correct du premier coup, évitant les itérations coûteuses. Voici les stratégies pour optimiser vos crédits :

Soyez spécifique dès le premier prompt. Les tests de Vercel montrent qu’un prompt contextualisé peut prendre 26 secondes de plus en génération initiale, mais économise 5 minutes et environ 1,5 crédit d’itérations supplémentaires.

Utilisez le modèle adapté. Le plan Free donne accès au modèle v0-1.5-md. Le plan Premium débloque v0-1.5-lg, plus performant pour les tâches complexes. Réservez le modèle large aux générations qui le justifient (pages complètes, logique complexe), et utilisez le modèle standard pour les ajustements simples.

Découpez les projets en composants. Au lieu de demander une application entière en un prompt, construisez composant par composant, puis assemblez. Chaque petit prompt est moins cher et produit un résultat plus fiable.

Combinez prompts et Design Mode. Les ajustements visuels via le Design Mode (couleurs, espacement, typographie) sont souvent plus économiques que des prompts textuels pour le même résultat.

Cas d’usage réels et prompts associés

Pour les marketeurs

Un marketeur peut utiliser v0 pour créer des landing pages, modifier du copy, publier des mises à jour, le tout sans ouvrir un ticket pour l’équipe dev. Le prompt type :

Update the hero section of our landing page:
- Change headline to "Ship faster with AI-powered analytics"
- Update the CTA button text to "Start your free trial"
- Replace the product screenshot with this new image [upload]
- Add a "No credit card required" note below the CTA
- Keep all other sections unchanged

Pour les équipes data

Build a custom report dashboard connected to our Snowflake database.
- Query: monthly active users grouped by plan tier for the last 12 months
- Display: stacked bar chart with one color per tier
- Add: total MAU number at top, month-over-month growth percentage
- Export: CSV download button for the underlying data
- Filters: date range picker, plan tier multi-select

Pour les product managers

Create a PRD for a feature flag management tool.
Include: user stories for 3 roles (developer, PM, admin), acceptance criteria, wireframe descriptions for the main screens, API endpoints needed.
Then build a working prototype of the flag dashboard showing:
- List of flags with name, status toggle, environment badges (dev/staging/prod)
- Flag detail: targeting rules, percentage rollout slider, activity log
- Create flag dialog: name, description, type (boolean/multivariate), default value