Exemples de prompts de design web et UI
Un bon prompt décrit la tâche avant de nommer un style. Ces quatre exemples précisent le message, l’action, les faits et le comportement mobile de différentes sections web.
Par Neruve · Mis à jour le
Partez d’une page fonctionnelle
Prévisualisez une page HTML fonctionnelle, puis appliquez ces techniques avec son code et le prompt fourni dans votre agent de programmation.
Framewise — Modèle HTML de landing page pour produit IA
Exercez la présentation du produit, la hiérarchie visuelle et une section d’accueil responsive.
Prévisualiser le modèleAster Hale — Modèle HTML de portfolio pour designer produit
Adaptez les services, les études de cas et le parcours de contact à votre activité.
Prévisualiser le modèleLes Skills restent gratuites à lire et copier sans connexion. Les aperçus des modèles sont publics ; télécharger le code et le prompt fourni nécessite un compte et l’achat ou le forfait correspondant. Voir l’accès au code et les tarifs
Décrire la tâche avant le style
Indiquez le public, l’objectif, le contenu requis et la destination de l’action. Précisez si vous attendez un concept, un prototype ou des fichiers pour un projet existant. Fournissez les faits réels et identifiez les données fictives pour éviter les promesses ou fonctions inventées.
Adapter le prompt à la page et à ses états
Un hero demande une proposition et une prochaine étape ; les tarifs, des différences lisibles ; un tableau de bord, des filtres et des états vides ou d’erreur ; un produit, ses matériaux et l’achat. Choisissez l’exemple proche de votre besoin et remplacez ses données.
Utiliser le style comme direction
Expliquez où appliquer la géométrie Bauhaus, la typographie suisse, les contours néobrutalistes ou le luxe sobre. Faites passer contraste, hiérarchie et lecture mobile avant la décoration. Un nom de style ne suffit pas à définir l’interface.
Ouvrir le résultat et corriger un problème
Vérifiez le résultat sur ordinateur et à 390 et 320 pixels. Testez l’action principale et le focus clavier. Notez l’élément, la largeur et le comportement attendu avant une correction ciblée. Signalez comme non effectués les contrôles impossibles dans l’outil.
Exercices originaux à adapter
Ces exemples originaux de Neruve restent en anglais. Ce sont des entrées proposées, pas des résultats testés ni des prompts de modèles payants. Remplacez les faits fictifs avant utilisation.
Hero Bauhaus : message et action
Design a Bauhaus-inspired hero for a fictional poster studio called Form Study.
Goal: help visitors understand the studio and follow “View the collection” to #collection.
Use one supplied poster placeholder, a compact geometric heading and a red accent.
Keep the offer readable before introducing decorative circles or rules.
At 390 px, stack the poster and text; keep the action visible and use readable contrast.
Use semantic headings, visible keyboard focus and a reduced-motion alternative.
Do not invent awards, customer logos, order counts or a working checkout.
Return the section structure and explain which parts still need implementation.Tarifs de style suisse : comparaison lisible
Design a Swiss-minimalist pricing comparison for a fictional planning app.
Use this labelled demonstration data only: Draft $12/month and Team $28/month,
both USD. These are fictional example prices, not Neruve prices.
Draft includes personal notes; Team adds shared notes and team comments.
Use aligned labels and a clear type scale; do not rely on color alone for differences.
At 320 px, stack cards and keep every price and feature readable.
Buttons link to #plan-details, not a real checkout. Do not invent discounts,
payment processing, trials or annual prices. Mark the entire section as a demo.Tableau de bord néobrutaliste : contrôles et états
Design a neo-brutalist task dashboard for a fictional studio project.
Use bold outlines and one accent without overwhelming the status information.
Include search, a status filter and a task list with title, owner and due date.
Label the data as fictional. Define loading, empty, filtered-empty and error states.
If this is a concept, annotate how each control should behave instead of claiming
it is connected to an API. If implementing, use the existing project contracts.
At 390 px, retain task names and status labels; do not hide necessary fields.
Check keyboard focus and readable contrast. Do not invent productivity metrics.Page produit de luxe : préserver les faits
Design a restrained luxury product page for a fictional ceramic lamp, Still One.
Use warm neutrals, generous spacing and a clearly labelled placeholder photo.
Demonstration facts: $180 USD, matte ceramic base, replaceable LED bulb,
30 cm height. These are fictional facts, not a real offer.
Show dimensions, materials and care near the main product image.
Represent the purchase area as a labelled concept; do not connect payments.
For an existing store, preserve its real price, stock, variants and cart contract.
At 390 px, keep product facts near the image and the action easy to reach.
Do not invent stock urgency, reviews, shipping promises or sustainability claims.Un exemple de UI Prompt à ouvrir : Form Study
Nous avons réalisé cet exercice hero dans Codex, puis vérifié la page réelle. Le fichier inclut le prompt original et une demande supplémentaire de HTML/CSS complet. L’affiche géométrique est un visuel original signalé comme illustration.
Ce qui a été vérifié
À 1280, 390 et 320 px, le texte et l’affiche restent dans la largeur de la page. « View the collection » mène à la collection. Le focus clavier est visible ; la réduction des animations désactive le défilement fluide.
Ouvrez la démo ou téléchargez le HTML pour l’ouvrir localement. Comparez les mêmes largeurs, suivez le lien principal et testez le clavier. En répétant l’exercice avec l’entrée complète, consignez vos propres résultats.
Il s’agit d’un hero fictif et autonome vérifié dans un navigateur. Les trois autres prompts restent des propositions d’entrée. Aucun comparatif de modèles, paiement réel ou gain de conversion n’est démontré.
Questions fréquentes
S’agit-il d’exemples gratuits, de résultats testés ou de prompts de modèles ?
Les quatre prompts sont des exercices originaux gratuits. Le hero Form Study ci-dessous a été vérifié dans un navigateur ; les autres restent des propositions. Les prompts de modèles et téléchargements de code suivent les conditions affichées.
Explorer les designs et leurs prompts
Le catalogue public de Neruve propose des designs web, des prompts associés disponibles et un répertoire de Skills. Les aperçus interactifs sont accessibles sans connexion ; les prompts suivent les droits du contenu et de votre offre. Ce workflow utilise votre propre outil de développement et ne nécessite pas de générateur public de sites Neruve.
Références officielles
Les outils et skills externes appartiennent à leurs auteurs. Les liens servent de références, sans partenariat ni accès inclus.