Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Fondations du design visuel v1.0.0

Utilisez cette ressource pour définir les tokens visuels et le guide de style d'un site ou d'un produit

Nouveau

  • 547 téléchargements
  • 143 mentions J'aime
  • 114 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install visual-design-foundations

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent établit une échelle de tailles, une grille d'espacement de 8 points, des couleurs sémantiques et un système d'icônes. Il applique les seuils de contraste WCAG et prépare le mode sombre. Vous obtenez des variables CSS ou une configuration Tailwind prêtes à l'emploi.

Choisie surtout par

Mise à jour le 2 novembre 2026

Aperçu d'un guide de style avec échelle typographique, palette et grille d'espacement.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md traduit en français : échelles, tokens, contraste, mode sombre, icônes
  • references/typography-systems.md : détail des systèmes typographiques
  • references/color-systems.md et spacing-iconography.md : couleurs, espacement, icônes

Pour qui

  • Créer le socle visuel d'un nouveau site
  • Corriger un design aux espacements et couleurs incohérents
  • Préparer un mode sombre

Pas pour qui

  • Créer un logo ou une identité complète
  • Illustrer ou retoucher des images
  • Concevoir des parcours utilisateur

Étiquettes

  • design tokens
  • typographie
  • couleur
  • espacement
  • accessibilité

À propos

Vous dites

« Crée les tokens de couleur, de typographie et d'espacement de ma page de vente, avec un mode sombre. »

Aperçu d'un guide de style avec échelle typographique, palette et grille d'espacement.

Skill publiée par wshobson sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Votre palette ou vos couleurs de marque et Les polices choisies, le cas échéant

Comment l'utiliser

  1. Donnez votre marque, vos couleurs et vos polices actuelles.
  2. L'agent génère les tokens et les règles d'usage.
  3. Il les applique à vos pages et signale les écarts de contraste.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/color-systems.md10,9 Ko
  • references/spacing-iconography.md10,9 Ko
  • references/typography-systems.md9,1 Ko
  • SKILL.md7,7 Ko

Origine et licence

Modifié par PalateKit

Auteur
wshobson
Source
github.com/wshobson/agents/tree/0874a27b17a22e2b7c2e2bcd725768e0803cad06/plugins/ui-design/skills/visual-design-foundations
Licence
MIT

Notice

Version modifiée de « visual-design-foundations » (wshobson, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il utiliser Tailwind ?

Non. Les tokens sont donnés en variables CSS, et un exemple Tailwind est fourni en option.

Les couleurs d'exemple sont-elles imposées ?

Non, ce sont des valeurs de départ à remplacer par votre palette.