Prompts de design web pour ChatGPT

Fournir un brief complet

Précisez le public, l’objectif, les sections, les textes et l’action principale. Décrivez quelques choix visuels concrets. Préservez les faits, prix et liens ; demandez de signaler les informations manquantes plutôt que d’inventer témoignages ou fonctions.

Demander des fichiers et consulter l’aperçu disponible

Demandez les noms des fichiers et leur mode d’ouverture. OpenAI décrit les aperçus HTML du lecteur lorsqu’ils sont disponibles. Si vous recevez du code, enregistrez-le et ouvrez-le localement. Sites est un parcours distinct de création et d’hébergement ; un prompt seul ne publie pas le site.

Corriger un problème visible

Indiquez la largeur, la section et le résultat attendu. Par exemple, corrigez une note qui déborde à 320 pixels en conservant typographie et liens sur ordinateur. Ouvrez le fichier modifié : expliquer un changement CSS ne constitue pas une vérification dans le navigateur.

Transmettre les fichiers et les limites

Donnez les fichiers réels, le brief, les ressources et les problèmes ouverts à l’agent de code. Il doit examiner le framework et les routes, préserver authentification, prix et contrats backend, puis vérifier action, mobile et clavier dans le projet réel.

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.

Create an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.

Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.

Exercice réel : Fieldnote avec Codex

Fieldnote comprend le brief original, le HTML Codex non modifié et les vérifications sur ordinateur et mobile. Aucun Skill frontend-design n’a été fourni ; ce n’est pas un test de ChatGPT ou de Claude Design.

Questions fréquentes

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.

• Explorer la bibliothèque
• Landing pages HTML pour SaaS et prompts
• Modèles de sites portfolio et prompts de design

Références officielles

• OpenAI · Files and previews
• OpenAI · Sites

Les outils et skills externes appartiennent à leurs auteurs. Les liens servent de références, sans partenariat ni accès inclus.