colorize
Ajoutez une Couleur Stratégique à Vos Designs
Transformez les interfaces grises et sans vie en expériences chaleureuses et engageantes. Cette compétence applique une théorie des couleurs intentionnelle pour améliorer la hiérarchie visuelle et le plaisir utilisateur.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "colorize". Un dashboard de gestion de tâches en niveaux de gris sans couleur au-delà du noir, blanc et gris.
Résultat attendu:
- Ajout d'indicateurs de succès vert émeraude pour les tâches terminées
- Application de badges d'avertissement ambre pour les échéances approchantes
- Introduction d'une légère teinte de fond chaude (oklch(97% 0.01 60)) pour remplacer le gris pur
- Coloration des boutons CTA principaux avec le bleu de marque pour la hiérarchie visuelle
Utilisation de "colorize". Une page de paramètres SaaS avec des bordures gris pur et du texte neutre.
Résultat attendu:
- Remplacement des diviseurs gris par des bordures colorées subtiles correspondant à la palette de marque
- Ajout d'accents de bordure gauche colorés aux sections de paramètres actives
- Application de la couleur de marque aux anneaux de focus pour une accessibilité améliorée
- Utilisation d'icônes colorées pour améliorer la reconnaissance des sections
Audit de sécurité
SûrAll static analysis findings are false positives. The detected patterns (external_commands, blocker, env_access) appear in documentation text, not executable code. This skill contains only instructional content for UI color design - no code execution, network requests, or filesystem operations. Safe for publication.
Score de qualité
Ce que vous pouvez construire
Améliorer l'Attrait Visuel d'un Dashboard
Ajouter une couleur stratégique à un dashboard admin monochromatique, améliorant la visualisation des données et les indicateurs de statut tout en maintenant une apparence professionnelle.
Intégration de Marque pour un MVP de Startup
Appliquer les couleurs de marque d'une startup de manière cohérente sur un prototype en niveaux de gris, créant une hiérarchie visuelle et une connexion émotionnelle avec les premiers utilisateurs.
Améliorer une Bibliothèque de Composants SaaS
Introduire un système de couleurs sémantiques dans un design system, garantissant des indicateurs d'état cohérents et des éléments interactifs accessibles.
Essayez ces prompts
Analysez le design actuel de [component/page]. Identifiez les zones où la couleur pourrait améliorer la hiérarchie visuelle, communiquer du sens ou ajouter du plaisir. Listez les opportunités spécifiques et expliquez le but de chaque ajout de couleur.
Nos couleurs de marque sont [list colors]. Appliquez-les de manière cohérente sur [feature], en suivant la règle 60-30-10. Assurez la conformité WCAG pour le contraste et expliquez votre stratégie d'application.
Créez un système de couleurs sémantiques pour [application type]. Définissez les couleurs pour les états de succès, erreur, avertissement et information. Montrez comment chacune s'applique aux composants comme les badges, alertes et indicateurs de statut.
Transformez ce [interface] monochromatique en une expérience chaleureuse et engageante. Utilisez OKLCH pour les définitions de couleur. Appliquez la couleur sur les arrière-plans, la typographie, les bordures et les états interactifs. Justifiez chaque choix et vérifiez l'accessibilité.
Bonnes pratiques
- Définissez toujours le but de la couleur avant l'application - la signification sémantique l'emporte sur la décoration
- Utilisez l'espace colorimétrique OKLCH pour des échelles de couleurs perceptuellement uniformes et une meilleure harmonie
- Testez toutes les combinaisons de couleurs pour la conformité au contraste WCAG et l'accessibilité pour le daltonisme
Éviter
- Utiliser des dégradés violet-bleu par défaut - c'est une esthétique IA générique, pas un design intentionnel
- Appliquer la couleur aléatoirement sans signification sémantique ni système cohérent
- Compter uniquement sur la couleur pour communiquer des informations - ajoutez toujours des icônes ou des étiquettes