Neruve
Accueil

Frontend Design Skills : configurer Claude Code et Codex

Choisissez un skill adapté, installez son dossier complet, puis donnez une demande précise à votre agent. Ce guide propose une configuration locale, un exemple vérifié dans le navigateur et six ressources sans connexion.

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èle

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èle

Les 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

Choisir le skill avant de l’installer

frontend-design d’Anthropic fournit des conseils de design visuel. Taste est un projet communautaire distinct ; les skills Framer et d’animation ont d’autres usages. Un README n’est pas un SKILL.md à installer. Vérifiez la source, la licence et les dépendances. Les étapes ci-dessous prennent le skill d’Anthropic comme exemple, sans constituer un installateur universel.

Installer dans Claude Code

Une installation dans le projet limite sa portée au dépôt. Conservez la structure, la licence et les fichiers annexes. Copier vers l’Agent copie une demande d’installation ; le site n’installe rien sur votre ordinateur.

  1. Ouvrez la source frontend-design ci-dessous et lisez SKILL.md, sa licence et les fichiers référencés.
  2. Copiez le dossier complet dans .claude/skills/frontend-design/ à la racine du projet. Comparez un dossier existant avant de remplacer des fichiers.
  3. Ouvrez Claude Code dans ce projet. Saisissez / pour vérifier la présence de frontend-design, puis sélectionnez-le avec votre demande.
.claude/skills/frontend-design/SKILL.md

Dans cet exemple, ajoutez votre demande à /frontend-design. S’il manque, vérifiez le chemin, le nom SKILL.md, le dépôt et les règles de l’espace de travail. Les plugins peuvent préfixer la commande.

Documentation officielle de configuration

Installer dans Codex

Codex utilise un autre dossier de projet. Réutilisez les instructions compatibles, mais vérifiez les commandes et dépendances propres à chaque outil. Un skill ne fournit ni backend ni compte pour un autre service.

  1. Copiez le dossier vérifié dans .agents/skills/frontend-design/ à la racine du projet, avec sa licence et ses fichiers annexes.
  2. Vérifiez que SKILL.md commence par un en-tête YAML avec name et description, suivi des instructions. Le nom de cet exemple est frontend-design.
  3. Dans Codex CLI ou l’extension IDE, utilisez /skills ou $ pour le choisir. Dans l’application, utilisez le sélecteur de skills. Redémarrez Codex si la modification n’est pas détectée.
.agents/skills/frontend-design/SKILL.md

Dans CLI/IDE, sélectionnez $frontend-design et ajoutez votre demande. Vérifiez que l’Agent lit ce fichier : le nom du dossier ne prouve pas son utilisation.

Documentation officielle de configuration

Exécuter une demande et vérifier la page

Précisez la page, le public, l’action principale et les faits à préserver. Utilisez une demande ou l’exemple ci-dessous. Vérifiez l’affichage à 1280, 390 et 320 px, le lien principal et le clavier. Conservez le code, les captures et les échecs constatés.

Le Skill Frontend Design n’apparaît pas ou ne se déclenche pas ?

Identifiez d’abord son mode d’installation. Un dossier du projet et un plugin Claude Code ont des emplacements et des noms de commande différents.

Un dossier Skill dans le projet
L’exemple manuel Claude Code place SKILL.md et ses fichiers associés dans .claude/skills/frontend-design/. Codex utilise l’exemple .agents/skills/ ci-dessus. Le README n’est pas le fichier à installer.
Un Skill fourni par un plugin
Dans Claude Code, ouvrez /plugin et vérifiez l’installation, l’activation et la portée du projet ou de l’utilisateur. Utilisez la commande affichée ; elle peut avoir un espace de noms. Suivez les instructions propres au plugin.

Vérifiez dans cet ordre

  1. Vérifiez le projet courant, la source du Skill et sa portée. Conservez les fichiers nécessaires et comparez les dossiers de même nom avant de les remplacer.
  2. Vérifiez le nom SKILL.md et le YAML dès la première ligne. Pour Claude Code, contrôlez name, description et les options d’invocation. Un YAML invalide peut empêcher la sélection automatique même si l’appel manuel fonctionne.
  3. Confirmez que le Skill est listé. Demandez à Claude Code quels Skills sont disponibles et consultez le menu /. S’il est listé mais inutilisé, appelez la commande avec une tâche correspondant à sa description et vérifiez disable-model-invocation et user-invocable.
  4. Confirmez que l’agent lit le bon Skill et exécute la tâche. Gardez le chemin ou la trace d’outil avec le résultat, puis vérifiez la page dans un navigateur. Un nom de dossier ou une belle capture ne prouve pas son utilisation.

Le cas Codex ci-dessous a lu manuellement un fichier à version fixe. Il ne vérifie ni la découverte automatique ni l’installation d’un plugin Claude Code. Consultez la documentation de votre version.

Documentation officielle de configuration

Choisir un Skill associé

Les six pages permettent une lecture et une copie sans connexion. Vérifiez leurs prérequis : intégrations Framer, outils vidéo et modules annexes ne sont pas interchangeables avec un skill frontend général.

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 pour une skill de design frontend

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

Une revue de design ciblée

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

Exemple documenté : Fieldnote avec frontend-design

Une page fictive de notes de recherche : une note, un parcours collecter–comparer–décider et un lien interne fonctionnel. Ouvrez l’exemple ou téléchargez la demande originale et le HTML. L’exemple reste en anglais.

Réalisé dans Codex le 13 octobre 2026 après lecture manuelle du skill d’Anthropic à une révision précise, puis vérifié dans le navigateur. Source utilisée : Anthropic frontend-design · dbd4588

Télécharger l’entrée complète (anglais)Télécharger le HTML inchangé (anglais)Ouvrir l’exercice généré (anglais)
Exemple Fieldnote sur ordinateur avec un titre à côté d’une note fictive
1280 × 900 : titre et note de recherche côte à côte.
Exemple Fieldnote sur mobile avec la note sous l’introduction
390 × 844 : la note suit l’introduction et l’action reste accessible.

Pour reproduire l’exercice, installez le skill vérifié comme indiqué puis fournissez la demande téléchargée. Comparez le résultat à 1280, 390 et 320 px ; vérifiez le lien et le focus clavier. Notez les différences.

Un seul exemple guidé manuellement : il ne valide ni la détection automatique, ni Claude Code, Taste ou un générateur Neruve. Aucune comparaison de modèles, inscription ou hausse de conversion n’est démontrée.

Questions fréquentes

Une skill garantit-elle un meilleur site ?

Non. Cet exemple montre une réalisation dans Codex après lecture manuelle d’une version fixe du skill d’Anthropic. Il ne comporte pas de comparaison sans skill et ne prouve pas une amélioration universelle. L’ancien exemple Fieldnote n’utilisait pas de skill de design.

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.