Testée sur une vraie tâcheOfficielle de l'éditeurDesign et front-end

Web Interface Guidelines Review

Une liste ligne par ligne de ce qu'il faut corriger dans le code de votre page, vérifiée selon les règles d'interface de Vercel.

Voir ce qu'elle a produit

Installez Web Interface Guidelines Review gratuitement

Laissez votre email et les étapes d'installation s'ouvrent ici même : un prompt à coller dans votre outil d'IA. Valable pour les 149 skills.

Notre note: 6/10
Fonctionne dans: Claude, ChatGPT+7 autres
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf et plus de 60 autres outils d'IA qui lisent les skills.
Faut-il coder ?: Un peu
Temps jusqu'au résultat: 14 min
Créé par: Vercel
Testée le: 19 oct. 2026

Revue de design — La revue : 19 constats classés par importance, 12 réels et corrigés, les autres marqués facultatifs ou sans vrai problème.

La réponse courte

Web Interface Guidelines Review est la skill officielle de Vercel qui fait télécharger à Claude la liste à jour des règles d'interface de Vercel (accessibilité, formulaires, focus, mode sombre, textes et plus) et vérifier le code de votre page par rapport à chacune, en signalant chaque problème avec sa ligne exacte. Elle convient à ceux qui ont déjà une page ou une application en code et veulent une passe de finition avant le lancement. Notre verdict est de 6/10 : lors de notre test, elle a repéré un vrai bug et 11 corrections plus petites, mais 7 de ses 19 constats étaient du bruit ou des préférences de style, et elle ignore les manques de contenu comme des prix ou des règles absents.

Idéal pour : Quelqu'un qui a déjà une page ou une application en code et veut une passe de finition et d'accessibilité avant le lancement, avec les endroits exacts à modifier.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Web Interface Guidelines Review en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Quand l'utiliser

Peaufiner une page de réservation avant le lancement

Lors de notre test, une gérante d'atelier de poterie a fait examiner sa page de réservation d'ateliers. Claude a trouvé que les noms de clients longs étaient coupés sur l'écran de confirmation téléphone et qu'il n'existait aucun lien direct vers un atelier, puis a corrigé les deux plus 10 problèmes plus petits.

Vérifier un formulaire d'inscription ou de contact

Indiquez-lui le fichier qui contient votre formulaire. Vous obtenez une liste des lignes exactes où libellés, types de champs, remplissage automatique, messages d'erreur ou contours de focus enfreignent les règles, pour qu'un développeur ou Claude les corrige vite.

Auditer le mode sombre et les détails mobiles

La liste de règles couvre les couleurs du navigateur en mode sombre, le comportement tactile sur téléphone, les zones de sécurité autour des encoches et le zoom. Utile quand votre site a l'air bien sur votre ordinateur mais que vous n'avez pas vérifié ces détails.

Comment obtenir un excellent résultat

Installez-la (étapes ci-dessous)
Vérifiez que Claude peut accéder à internet, car la skill télécharge la liste de règles de Vercel à chaque exécution.
Indiquez-lui vos fichiers
Nommez la page ou les fichiers à examiner, par exemple votre index.html ou un composant de formulaire. Si vous n'en nommez aucun, la skill demande à Claude de vous demander quels fichiers vérifier.
Demandez un ordre de priorité et des mots simples
La sortie par défaut de la skill est faite de notes laconiques pour développeurs comme 'index.html:452 - missing overflow-wrap'. Demandez à Claude de classer les constats par importance et d'indiquer lesquels sont de vrais problèmes sur votre page.
Demandez à Claude de corriger les vrais
Faites corriger par Claude uniquement les constats marqués comme réels et gardez pour vous les préférences de style. Lors de notre test, il a corrigé 12 problèmes sans changer l'aspect de la page.
Testez la page corrigée
Ouvrez la page sur un téléphone ou demandez à Claude de la tester en largeur téléphone, y compris avec des cas limites comme un nom très long. C'est ainsi que notre test a confirmé le bug du nom coupé et sa correction.

Voici le prompt exact avec lequel nous avons commencé notre test :

Le prompt utilisé

Passe en revue ma page de réservation d'ateliers selon des règles professionnelles de design web et dis-moi exactement quoi corriger, du plus important au moins important. Ensuite, corrige les principaux problèmes.

Tout ce qu'elle a produit

Chaque élément ci-dessous est un vrai résultat de notre test, ouvert comme vous l'ouvririez.

La page de réservation corrigée : les noms longs passent désormais à la ligne, et des liens comme ?workshop=mug l'ouvrent avec cet atelier déjà choisi.

Le déroulé de la session

La conversation de notre test, raccourcie. Environ 14 minutes entre le premier prompt et le résultat final.

Vous: Passe en revue ma page de réservation d'ateliers selon des règles professionnelles de design web et dis-moi exactement quoi corriger, du plus important au moins important. Ensuite, corrige les principaux problèmes.
AI: J'ai rédigé review.md au format de la skill, classé par importance. 19 constats : 12 réels, 1 règle de style maison facultative (Title Case sur les boutons), 6 qui correspondent à une règle mais ne sont pas de vrais problèmes sur cette page (par exemple « mettre le focus sur le premier champ en erreur » alors que la page utilise déjà un résumé d'erreurs avec liens). La page était déjà en bon état : libellés, contours de focus, messages d'erreur, réduction des animations et...
AI: Terminé. Une chose que les règles ne couvrent pas est la plus grosse lacune avant le lancement : heures de début, paiement, politique d'annulation et ce qui est inclus sont encore en [placeholder], et le bouton de confirmation est simulé tant qu'il n'est pas relié à un vrai service de réservation. Remarques : la skill n'est que des instructions plus un lien vers la liste de règles de Vercel. Tout le jugement (quels constats sont réels, dans quel ordre corriger) venait de...

Ce qui a marché et ce qui a coincé

Ce qui a marché

A trouvé un vrai bug : un nom de client long était coupé sur l'écran de confirmation téléphone (361px de texte mesurés dans une case de 301px)
A trouvé une fonctionnalité manquante utile : aucun lien n'ouvrait la page avec un atelier présélectionné, désormais corrigé avec des liens ?workshop= et ?date=
La liste de règles est large et à jour (focus, formulaires, mode sombre, dates, textes), donc de petits détails de finition comme la couleur de la barre du navigateur en mode sombre et les dates saisies à la main ont été repérés
Les corrections étaient sûres et testables : aucun changement de mise en page, aucune erreur console, la page tient toujours en 375px

Ce qui a coincé

6 constats sur 19 étaient des correspondances avec des règles qui ne sont pas de vrais problèmes ici, et 1 de plus relève d'une préférence de style maison (Title Case), donc un humain ou Claude doit filtrer la liste
WebFetch, que la skill dit d'utiliser, n'a renvoyé qu'un résumé condensé des règles, donc une exécution à la lettre peut rater des règles précises et le format de sortie exact
La skill ne vérifie que le code par rapport à des règles d'interface : elle ne dit rien des champs non remplis (heures de début, paiement, politique d'annulation), qui comptent le plus pour cette page, et sa sortie file:line est écrite pour des développeurs

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Web Interface Guidelines Review en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Des prompts qui marchent

Remplacez les parties entre crochets par vos propres informations. Inutile de nommer la skill : demandez la tâche et votre outil d'IA l'utilise tout seul.

Examiner et corriger une page

Passe en revue ma [page de réservation / landing page] dans [nom du fichier] selon des règles professionnelles de design web et dis-moi exactement quoi corriger, du plus important au moins important. Ensuite, corrige les principaux problèmes.

Vérifier uniquement un formulaire

Utilise les règles de design web pour examiner le formulaire [d'inscription / de contact / de paiement] dans [nom du fichier]. Explique chaque problème simplement et dis lesquels un client remarquerait vraiment.

Passe d'accessibilité avant le lancement

Avant mon lancement, vérifie [fichier ou dossier] selon les règles d'interface web pour l'accessibilité et l'usage au clavier. Marque chaque constat comme réel ou non pertinent pour ma page, puis corrige les réels.

Vérification mode sombre et mobile

Examine [nom du fichier] selon les règles d'interface web, en te concentrant sur le mode sombre, les écrans de téléphone et le tactile. Teste-la en largeur téléphone avec un nom et un e-mail très longs dans le formulaire.

Conseils tirés de notre test

Demandez à Claude de marquer chaque constat comme réel, facultatif ou non pertinent. Lors de notre test, 6 constats sur 19 correspondaient à une règle sans être de vrais problèmes sur cette page.
Attendez-vous à des suggestions de Title Case pour les titres et boutons. C'est le style maison de Vercel, pas une règle d'ergonomie, gardez donc votre propre style si vous préférez les majuscules de phrase.
Demandez un test avec des saisies extrêmes comme un nom très long. La revue a signalé le risque, et un vrai test dans le navigateur en largeur téléphone a prouvé que le nom était coupé.
Interrogez Claude séparément sur le contenu. Les règles ne vérifient pas les heures de début, prix ou règles manquants, qui étaient la plus grosse lacune de notre page de test.
Si les règles semblent maigres, demandez à Claude de lire la liste complète. Lors de notre test, l'outil de récupération web nommé par la skill n'a renvoyé qu'un résumé, et la liste complète compte environ 100 règles.

Ce qu'il vous faut : Le code de votre page (HTML ou fichiers de projet) que Claude doit lire ; une simple URL en ligne n'est pas ce qu'elle examine, Un accès internet pour que Claude récupère à chaque fois la liste de règles à jour, Claude Code demande Pro ou plus ; les skills de l'application Claude fonctionnent avec toutes les offres avec l'exécution de code activée.

Comment l'installer

Les skills suivent le standard ouvert Agent Skills, celle-ci n'est donc pas liée à une seule entreprise. Choisissez l'outil d'IA que vous utilisez. Vous hésitez ? Le premier onglet couvre la plupart d'entre eux en une étape.

Le plus simple : collez ceci dans votre outil d'IA

Installe cette skill pour qu'elle fonctionne dans tous mes projets : exécute `npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g -y` dans mon terminal. S'il manque Node.js, explique-moi d'abord comment l'installer. Une fois terminé, confirme que la skill est installée et dis-moi comment commencer à l'utiliser.

Ou faites-le vous-même :

Une seule commande installe la skill dans les outils d'IA de votre ordinateur. Elle détecte ceux que vous avez et vous demande où l'ajouter : Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode et plus de 60 autres.

$npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g

Node.js doit être installé (gratuit, sur nodejs.org). L'option -g rend la skill disponible dans tous vos projets.

Bon à savoir : L'une des skills les plus installées du registre skills.sh.

Débloquez les étapes d'installation

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes d'installation des 149 skills, et recevez chaque mois les meilleures nouvelles skills.

Comment nous l'avons vérifié

Nous avons vérifié la skill à sa source d'origine le 18 octobre 2026 : le SKILL.md est au bon endroit, les fichiers ont été mis à jour au cours de l'année et la licence () autorise son usage. Puis, le 19 octobre 2026, nous l'avons installée, utilisée sur la tâche ci-dessus sans la modifier, et noté ce qui s'est passé, y compris ce qui n'a pas marché.

Questions fréquentes

Faut-il savoir coder pour l'utiliser ?

Vous n'avez pas à écrire de code, mais il vous faut les fichiers de code de votre page, et le rapport par défaut est écrit pour des développeurs avec noms de fichiers, numéros de ligne et termes CSS. Demandez à Claude d'expliquer les constats simplement et de faire les corrections pour vous.

Quelle offre ou quels outils demande-t-elle ?

Dans Claude Code, il faut une offre Pro ou plus. Dans l'application Claude, les skills fonctionnent avec toutes les offres avec l'exécution de code activée. Dans les deux cas, Claude a besoin d'un accès internet pour télécharger la liste de règles à chaque fois.

Fonctionne-t-elle dans Claude.ai ou seulement dans Claude Code ?

Les deux. Dans Claude.ai, vous importez la skill en zip dans Customize, Skills. Dans Claude Code, vous l'installez une fois et elle est disponible dans tous les projets.

Quelle différence avec une simple demande de revue de ma page à Claude ?

Elle donne à Claude une checklist fixe et à jour d'environ 100 règles de Vercel, il vérifie donc de petites choses qu'une revue rapide saute souvent, comme la couleur de la barre du navigateur en mode sombre ou les dates saisies à la main. Claude doit tout de même juger quelles correspondances comptent : lors de notre test, il en a gardé 12 sur 19.

Vérifiera-t-elle mes textes, mes prix ou le design global ?

Très peu. Ses règles de texte couvrent des choses comme la voix active, le Title Case et l'usage des chiffres, mais elle ne juge ni votre offre, ni votre mise en page, ni les informations manquantes. Lors de notre test, elle n'a rien dit des heures de début et règles non remplies.