Prompts de vibe coding

Launch · Beginner

Landing page SaaS orientée conversion

Transforme une idée produit en page ciblée, avec hiérarchie claire, preuves crédibles et appel à l’action précis.

Vibe Codingv0LovableBolt

Modèle de prompt à copier

Le modèle technique reste en anglais afin de fonctionner directement avec les agents compatibles. Les explications, critères de choix et vérifications sont localisés.

Build a polished, responsive SaaS landing page for [PRODUCT NAME], a product that helps [TARGET USER] achieve [PRIMARY OUTCOME].

Before coding, translate the brief into a clear page hierarchy. Then implement the page as a complete, working experience.

Page structure:
1. A compact navigation with logo, Product, Use cases, Pricing, and one primary CTA.
2. A hero that states the concrete outcome in one sentence, supports it with a short explanation, and includes primary and secondary actions.
3. A product preview that looks like a believable interface—not a decorative empty frame.
4. Three outcome-led benefits with specific supporting details.
5. A simple “how it works” sequence with three steps.
6. Social proof using realistic placeholder companies and quantified results clearly marked as sample data.
7. A pricing preview with [NUMBER OF PLANS] plans and an obvious recommended option.
8. A concise FAQ and final CTA.

Visual direction:
- Brand personality: [BRAND PERSONALITY]
- Primary color: [PRIMARY COLOR]
- Use strong typography, generous whitespace, and restrained motion.
- Avoid excessive gradients, glass cards, floating blobs, and repetitive rounded boxes.
- Make every section visually distinct while keeping one coherent design system.

Quality requirements:
- Mobile-first and accessible: semantic landmarks, visible focus states, sufficient contrast, descriptive labels.
- Include hover, loading, empty, and error states where relevant.
- Use meaningful product copy instead of lorem ipsum.
- Keep the main CTA consistent across the page.
- Verify the layout at mobile, tablet, and desktop widths before finishing.

Adapter avant utilisation

Remplacez chaque variable, retirez les fonctions inutiles et ajoutez vos vrais contenus, contraintes techniques et critères d’acceptation.

  • PRODUCT NAME — Briefly
  • TARGET USER — small product teams
  • PRIMARY OUTCOME — turn customer calls into prioritized product insights
  • BRAND PERSONALITY — calm, precise, quietly confident
  • PRIMARY COLOR — deep indigo
  • NUMBER OF PLANS — 3

Contrôler le résultat méthodiquement

Testez le mobile, le clavier, les états de chargement, vide et erreur, ainsi que le parcours principal avec des données réalistes.

Choisir un outil IA

Source et maintenance

Ressources associées