Prompts web Claude Design et transmission au code

Choisir le livrable de design

Demandez une maquette web, un prototype ou une révision et précisez l’appareil. Consultez les parcours actuels de Claude Design dans les documents Anthropic et les fonctions de votre compte. Un bouton dessiné n’est pas une route ou un service connecté.

Fournir le contenu et le système de design

Indiquez public, objectif, sections, destinations des actions et textes exacts. Joignez le système de design et les ressources disponibles. Demandez ordinateur et mobile, une hiérarchie lisible et des contenus provisoires identifiés, sans logos ni chiffres inventés.

Affiner une section à la fois

Désignez la section, la largeur et le problème ainsi que les contenus et règles à préserver. Distinguez les interactions réellement testables des comportements simplement décrits. Examinez le nouveau résultat avant la modification suivante.

Préparer la transmission au développement

Transmettez fichiers de design, ressources, brief et états non résolus. Demandez l’examen du projet et le signalement des dépendances manquantes. Préservez faits et contrats backend, puis vérifiez routes, actions, clavier et mises en page mobiles réelles.

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 a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.

Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.

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

• Anthropic · Claude Design
• Anthropic · Prototypes and UX

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