redesign-existing-projects
Améliorer les projets existants avec des standards de design premium
Les sites web générés par IA partagent souvent les mêmes schémas génériques, les rendant indiscernables. Cette compétence audite votre projet existant et applique des améliorations de design ciblées pour créer un aspect poli et premium sans réécrire votre base de code.
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 "redesign-existing-projects". Exécution d'un audit de design sur un site marketing construit avec Tailwind CSS
Résultat attendu:
- Typographie : Utilisation d'Inter pour tout le texte, les titres manquent de variation de poids, les paragraphes s'étendent sur toute la largeur de la fenêtre
- Couleur : Fond noir pur avec accent bleu saturé, mélange incohérent de gris chauds et froids
- Mise en page : Trois colonnes de cartes égales pour les fonctionnalités, tout centré symétriquement, aucune contrainte de largeur maximale
- États : Aucun effet au survol sur les boutons, aucun état de chargement ou vide sur le formulaire de contact
- Contenu : Noms d'entreprise génériques, Lorem Ipsum dans la section blog, points d'exclamation dans tous les messages de succès
Utilisation de "redesign-existing-projects". Amélioration de la typographie sur un tableau de bord Next.js
Résultat attendu:
- Remplacé Inter par Geist pour le texte du corps et Cabinet Grotesk pour les titres
- Définie la largeur maximale des paragraphes à 65ch avec une hauteur de ligne accrue pour la lisibilité
- Ajouté le poids Medium (500) pour les libellés de navigation et SemiBold (600) pour les titres de cartes
- Appliqué font-variant-numeric: tabular-nums à toutes les colonnes de tables de données
- Corrigé les mots orphelins avec text-wrap: pretty sur tous les éléments de paragraphe
Audit de sécurité
SûrAll 77 static analysis findings are false positives. The scanner treated Markdown documentation as executable code. The 49 external_commands detections are Markdown backtick syntax for inline code references (CSS properties, font names like Geist, Outfit). The 27 blocker detections for weak cryptographic algorithms and system reconnaissance have no basis in the file content, which contains only design guidelines and audit checklists. The single network detection is a documentation reference to picsum.photos, a placeholder image service. No executable code, scripts, or network calls exist in this skill. It is a pure Markdown document providing design improvement guidance.
Score de qualité
Ce que vous pouvez construire
Polir un portfolio ou un site marketing
Prenez un site web fonctionnel mais générique et améliorez-le avec une typographie premium, des palettes de couleurs personnalisées et des schémas de mise en page sophistiqués qui se démarquent des designs templatés.
Améliorer une application générée par IA
Identifiez et remplacez les signes révélateurs des interfaces générées par IA, incluant le contenu placeholder, les mises en page en cartes génériques et les schémas de composants clichés, par des alternatives raffinées.
Auditer et corriger la dette de design dans un projet hérité
Revoyez systématiquement un projet existant pour identifier les lacunes en accessibilité, les états d'interaction manquants, les styles incohérents et les problèmes de contenu, puis appliquez les corrections par ordre de priorité.
Essayez ces prompts
Appliquez cette compétence à mon projet. Parcourez la base de code et donnez-moi une liste de tous les schémas de design génériques que vous trouvez, organisés par catégorie. Ne faites pas encore de modifications, montrez-moi uniquement les résultats de l'audit.
Appliquez cette compétence à mon projet. Corrigez tous les problèmes de typographie et de couleurs que vous trouvez. Remplacez les polices génériques par de meilleures alternatives, corrigez la hiérarchie des titres, ajustez les largeurs des paragraphes et nettoyez la palette de couleurs. Travaillez dans le cadre de la configuration CSS existante.
Appliquez cette compétence à mon projet. Effectuez l'audit complet, puis corrigez les problèmes par ordre de priorité : polices, couleurs, états au survol, mise en page et espacement, composants génériques, états de chargement et d'erreur, et polissage de la typographie. Gardez les modifications ciblées et vérifiables.
Appliquez cette compétence à mon projet. Concentrez-vous spécifiquement sur le remplacement des schémas de design les plus courants générés par IA : le dégradé violet-bleu, les trois colonnes de cartes égales, les badges en pilule, les FAQ en accordéon, les témoignages en carrousel et le contenu générique. Remplacez chacun par une alternative plus distinctive.
Bonnes pratiques
- Toujours auditer la base de code existante avant d'apporter des modifications pour comprendre la pile technologique actuelle, la version du framework et l'approche de style
- Appliquer les corrections par ordre de priorité pour un impact visuel maximum avec un risque minimum : polices d'abord, puis couleurs, puis états d'interaction, puis mise en page
- Garder chaque modification petite et ciblée afin que les pull requests restent faciles à vérifier et à annuler si nécessaire
Éviter
- Réécrire entièrement le projet from scratch au lieu d'améliorer le code existant de manière incrémentale
- Migrer vers un nouveau framework CSS ou une nouvelle bibliothèque de style quand le système actuel fonctionne bien
- Apporter de grands changements globaux en une seule validation qui sont impossibles à vérifier ou à déboguer