Design & visuel

Design Web Pro

/design-web-pro

Ce qu’il fait

Vercel est l'une des entreprises tech les plus reconnues pour la qualité de ses interfaces — leurs produits sont régulièrement cités comme référence de design professionnel. Ce skill charge leur guide de design interne et l'applique à ton projet : comment structurer la mise en page, quelles règles de typographie suivre, comment utiliser les couleurs de façon cohérente, comment gérer les animations et les transitions, et comment respecter les critères d'accessibilité (pour que ton site soit utilisable par tous). Conçu pour les interfaces produit, pas les sites vitrines.

Quand l’utiliser

Utilise-le quand tu construis ou améliores une interface produit (tableau de bord, application web, espace client) et que tu veux que le design soit professionnel et cohérent. Particulièrement utile si tu n'as pas de designer et que tu codes toi-même.

Un exemple concret

Tu construis un tableau de bord pour tes clients coaching — tu veux que ça ressemble à un vrai produit SaaS professionnel, pas à une page WordPress bricolée.

Mise en page : grille 12 colonnes, marges de 24px sur mobile / 48px sur desktop
Typographie : taille de base 16px, titres en Inter 600, corps en Inter 400, hiérarchie sur 4 niveaux
Couleurs : palette limitée à 5 valeurs (primaire, secondaire, neutre, succès, erreur)
Espacement : système de 8px (tous les espaces sont multiples de 8)
Accessibilité : contraste minimum 4.5:1 pour le texte, focus visible sur tous les éléments interactifs

→ Une interface qui respecte les standards des meilleures équipes produit, même sans designer dans l'équipe.

Comment l’installer

Colle ces deux lignes dans Claude Code, puis lance le skill avec /design-web-pro.

/plugin marketplace add ismax-ai/claude-code-skills-fr
/plugin install ismax-skills-fr@ismax
/design-web-pro

Skill open-source de nexu-io, sous licence Apache-2.0. Voir la source d’origine. Je l’ai sélectionné, traduit et adapté en français pour la bibliothèque.

Tu débutes avec Claude Code ?

J’ai écrit un guide de démarrage qui t’explique, pas à pas, ce qu’est un skill, comment installer la bibliothèque et faire tes premiers pas.

Lire le guide de démarrage

L’IA pour les Débutants · SubstackLa marketplace de skills Claude Code gratuits (en français)Lire sur Substack →

← Toute la bibliothèque