Guide pratique des prompts de design web pour Claude Code

Un processus simple à vérifier

1. Ouvrez Claude Code dans le projet et faites examiner stack, routes et composants avant toute modification. Précisez les contrats backend et comportements existants.
2. Fournissez le prompt et un brief distinct avec public, objectif, textes, ressources, action et contraintes. Demandez une proposition avant l'édition.
3. Vérifiez le résultat dans le navigateur. Décrivez un défaut précis, sa taille d'écran et sa section, demandez une correction ciblée puis revérifiez.

Briefs originaux SaaS et portfolio

Ce brief fictif est rédigé par Neruve, séparément des prompts payants. Le texte anglais est conservé pour la reproductibilité.

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Que vérifier dans le résultat

Vérifiez les vues mobile de 390 px et ordinateur : titre clair, texte lisible, liens fonctionnels, focus clavier visible et aucune largeur excessive. Remplacez les affirmations de démonstration par des faits vérifiés.

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.

Ce brief fictif est rédigé par Neruve, séparément des prompts payants. Le texte anglais est conservé pour la reproductibilité.

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

Les 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.

• Le Skill Frontend Design n’apparaît pas ou ne se déclenche pas ?
• Taste Skill — conception frontend (v2 expérimentale)
• Prompts de refonte web pour projets existants

Exercice réel : Fieldnote avec Codex

Nous avons exécuté le brief original de Fieldnote avec Codex et conservé toute la sortie. Cette page fictive de notes de recherche permet de vérifier le même brief avec un autre agent. L’essai avec Claude Code a renvoyé une erreur de connexion et n’a produit aucune page.

Enregistré le 4 octobre 2026 avec Codex CLI 0.145.0 : une génération réussie, 35,92 secondes, sans outils de fichiers ni shell. La CLI n’a pas indiqué l’identifiant du modèle. Entrée, sortie et captures restent en anglais.

Nous avons vérifié dans le navigateur les mises en page de 1280, 390 et 320 pixels, l’ancre du processus et le lien d’évitement au clavier. Un seul h1, une note signalée comme fictive, aucun formulaire d’inscription, prix ou témoignage. Contraste et règles de réduction des mouvements ont aussi été examinés ; ce n’est pas un audit complet d’accessibilité.

Téléchargez l’entrée complète en anglais et exécutez-la dans un agent connecté. Ouvrez le HTML dans un navigateur, vérifiez les mêmes largeurs et liens, puis consignez les échecs avant de demander une correction ciblée. Le code conserve notre résultat réel ; un autre essai peut avoir un aspect différent.

Il s’agit d’un exercice HTML/CSS autonome, pas d’une réussite de Claude Code ni d’un test du générateur de Neruve. Aucun DESIGN.md ni Skill frontend-design n’a été fourni. Le résultat ne prouve ni supériorité, ni conversion, ni croissance SEO, ni citation par l’IA.

DESIGN.md et SKILL.md ont des rôles différents

DESIGN.md de Google associe tokens YAML et explications Markdown pour décrire l'identité visuelle. Demandez explicitement à Claude Code de lire le fichier ; aucune découverte automatique ni exportation Neruve n'est annoncée. Le format et la CLI sont actuellement en phase alpha et peuvent évoluer.

Une skill Claude Code fournit des instructions réutilisables dans SKILL.md avec un frontmatter. Vérifiez source, licence et permissions avant installation. Le fichier d'identité apporte le contexte ; la skill apporte la méthode ou capacité.

Ce que Neruve propose aujourd'hui

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.

La référence est un point de départ. Le résultat varie selon le modèle, l'outil et la version ; fichiers et accès dépendent du produit et du forfait.

Références officielles

• Claude Code
• SKILL.md
• DESIGN.md