Prompts de refonte web pour projets existants
Un prompt de refonte doit expliquer la présentation à changer et ce qui doit rester. Documentez l’interface actuelle, choisissez un défaut concret et proposez un plan limité pour obtenir une amélioration vérifiable.
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.
Aster 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èleMeStudio — Modèle HTML de portfolio photographique
Comparez les grilles de projets, le rythme des images et les galeries responsive.
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
Auditer avant de demander une refonte à l’IA
Relevez stack, routes, contrôles partagés, textes et actions principales. Inspectez les vues réelles pour distinguer hiérarchie, lisibilité, mise en page et dysfonctionnement. La demande pourra traiter la cause plutôt qu’ajouter des ornements.
Protéger navigation, formulaires et SEO
Précisez destinations, login, paiement, prix et événements analytiques. Préservez titres, descriptions, canonical/hreflang et liens internes sauf demande contraire. Revérifiez après édition : une nouvelle présentation ne démontre pas de hausse du trafic ni des conversions.
Utiliser les captures comme preuves, sans copier
Fournissez une référence propre ou autorisée, avec section et largeur concernées. Décrivez les changements d’ordre, d’espacement, de contraste ou d’images à adapter au produit et aux composants existants. Conservez les faits sans reprendre l’identité d’une autre entreprise.
Corriger le mobile en une intervention ciblée
Identifiez l’élément qui déborde avant de toucher les styles globaux. Gardez le contenu utile et testez 320, 390, 768 et 1280 px, focus, liens et images. L’exercice est une entrée proposée, pas la preuve que votre site a passé ces contrôles.
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.
Un brief de refonte web
Audit this existing website before redesigning it.
Read its stack, routes, page copy, API calls, forms and shared components.
Protected: canonical URLs, navigation destinations, login/checkout behavior,
prices, analytics events and existing product facts.
Goal: make the offer and primary action easier to understand without new claims.
Record the current desktop and mobile layouts. Identify the three most useful
presentation changes, with section names and screenshot evidence.
Propose a small plan: hierarchy, typography, spacing and reusable component rules.
After approval, change one section first and show the result before expanding.
Retest the original links/forms, 1280/390/320 px layouts, keyboard focus and images.
Preserve headings, metadata, canonical/hreflang and internal links unless the
brief explicitly calls for an SEO change. Report actual checks, not assumed passes.Une correction de mise en page mobile
Repair horizontal overflow at 320 px in the existing hero.
Find the element causing overflow before changing styles.
Preserve desktop layout, copy, image meaning, primary action and all destinations.
Use wrapping, responsive sizing or a stacked layout appropriate to this section;
do not hide meaningful content or disable horizontal scrolling on the whole page.
Check the same hero at 320, 390, 768 and 1280 px, including keyboard focus.
Return the changed files, before/after evidence and unresolved failures.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.
Un prompt Claude pour refondre un site existant
Commencez par un seul hero, la bibliothèque de composants existante et l’action d’origine. Le brief complet protège les faits et les comportements tout en donnant une tâche visuelle précise à Claude Code.
Ouvrir le brief complet de refonte ClaudeLes preuves à conserver
Gardez les fichiers modifiés, les captures aux mêmes largeurs, la destination d’origine et les résultats des contrôles clavier, mobile et contrats protégés. Signalez les vérifications non réalisées.
Ce sont des propositions originales pour Claude Code, pas des sorties Claude mesurées. Choisissez un Skill adapté, vérifiez ses dépendances et conservez les faits du projet. Taste est un projet communautaire indépendant.
Questions fréquentes
Faut-il régénérer tout le site pour un défaut ?
Commencez généralement par le plus petit changement qui traite la cause. Une refonte large exige un plan revu et des contrôles de régression. Conservez la version précédente et comparez les mêmes vues avant acceptation.
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.