98.8K+Télécharger
Aller au guide d’utilisation
redesign-existing-projectspar Leonxlnx

Redesign Existing Projects Skill.

Un skill pour Claude Code et Codex destiné à la révision de design : audite un site web ou une application existants et les améliore vers une qualité visuelle premium.

  • Revue de conception et accessibilité
  • Rapport de revue
Télécharger OpenDesignVoir le guide d'utilisation
Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md
--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules
Matière préliminaire et titres de section lus depuis le fichier source le 14/09/2026 · 15 032 caractères au total

01 Ce qu'il fait

Ce que fait le skill redesign-existing-projects dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Fait passer les sites web et applications existants à une qualité visuelle premium en auditant le design actuel, en identifiant les motifs IA génériques et en appliquant des standards de design haut de gamme sans casser les fonctionnalités. Fonctionne avec n'importe quel framework CSS ou du CSS natif.

Le skill scanne la base de code pour identifier le framework et la méthode de style, diagnostique chaque motif générique et point faible via un audit de design complet, puis applique des améliorations ciblées en travaillant avec la stack existante. Les changements sont priorisés par impact visuel et risque, des changements de police et du nettoyage des couleurs jusqu'au remplacement de composants et à l'affinage typographique.

Rapport de revue
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Scanner la base de code

    Lire la base de code pour identifier le framework, la méthode de style (Tailwind, CSS natif, styled-components, etc.) et les motifs de design actuels.

  2. 02
    Diagnostiquer les motifs génériques

    Parcourir l'audit de design pour lister chaque motif générique, point faible et état manquant trouvé dans le projet.

  3. 03
    Corriger avec des améliorations ciblées

    Appliquer des améliorations ciblées en travaillant avec la stack existante sans tout réécrire depuis zéro, en améliorant ce qui existe déjà.

02 Trouvez celui qui vous convient

Quand utiliser le skill redesign-existing-projects

Utilisez le skill redesign-existing-projects dans Claude Code ou Codex lorsque la tâche est une revue de design de ce type. La portée et les limites ci-dessous sont extraites du propre fichier du skill.

Bon choix

  • Sites web et applications existants nécessitant une mise à niveau vers une qualité premium
  • Projets présentant des motifs de design IA génériques à identifier et remplacer
  • Projets utilisant un framework CSS quelconque (Tailwind, styled-components) ou du CSS pur

    03 Dans le skill

    Règles que le skill redesign-existing-projects donne à Claude Code et Codex

    8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

    1. Travailler avec la pile technique existante

      Ne migrez pas les frameworks ni les bibliothèques de style. Gardez les changements compatibles avec la configuration actuelle.

    2. Tester après chaque modification

      Ne cassez pas les fonctionnalités existantes. Testez après chaque modification pour vous assurer que le projet fonctionne toujours.

    3. Vérifier les dépendances avant d'importer

      Avant d'importer une nouvelle bibliothèque, vérifiez d'abord le fichier de dépendances du projet pour voir ce qui est déjà disponible.

    4. Vérifier la version de Tailwind

      Si le projet utilise Tailwind, vérifiez s'il s'agit de la v3 ou de la v4 avant de modifier le fichier de configuration.

    5. Utiliser du CSS pur en l'absence de framework

      Si le projet n'a pas de framework, utilisez du CSS pur plutôt que d'introduire un nouveau système de style.

    6. Ne jamais utiliser de Lorem Ipsum

      N'utilisez jamais de texte latin de remplissage. Rédigez un véritable texte de brouillon plutôt qu'un contenu générique de substitution.

    7. Respecter l'ordre de priorité des corrections

      Appliquez les changements dans l'ordre de priorité : d'abord le remplacement des polices (amélioration instantanée la plus importante, risque le plus faible), puis le nettoyage des couleurs, les états au survol, la mise en page, le remplacement des composants, les états, et enfin la finition typographique.

    8. Garder des changements faciles à relire

      Gardez des changements faciles à relire et ciblés. Privilégiez de petites améliorations ciblées plutôt que de grandes réécritures.

    04 Mettez-le en pratique

    Installer redesign-existing-projects dans Claude Code ou Codex

    Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

    Ajouter redesign-existing-projects à Claude Code, Codex ou votre agent

    Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    Formulaire générique de la CLI skills pour skills/redesign-skill/SKILL.md ; le dépôt peut documenter son propre chemin.

    Donner au skill une première tâche de révision de conception

    Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

    Starter prompt
    Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

    Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

    Vérifiez le premier résultat

    Ce que le SKILL.md lui-même présente comme un résultat correct :

    • Vérifiez que toutes les icônes ont des épaisseurs de trait cohérentes dans tout le projet
    • Vérifiez que toutes les images ont un texte alternatif descriptif pour les lecteurs d'écran

    Dans OpenDesign, importez redesign-existing-projects depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

    Télécharger OpenDesignLire le démarrage rapide

    05 Open source, traçable

    Source, licence et vérification

    D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

    Author
    Leonxlnx
    Repository
    github.com/Leonxlnx/taste-skill Branche main
    Fichier du skill
    skills/redesign-skill/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit ccbc156
    License
    MIT D'après LICENSE.
    Étoiles du dépôt
    86 946 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt Leonxlnx/taste-skill, qui contient 11 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour redesign-existing-projects.
    Vérifié par OpenDesign
    2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

    Dans le SKILL.md

    1. Comment ça fonctionneProcessus en trois étapes : analyser le code, diagnostiquer les motifs, corriger avec des améliorations ciblées
    2. Audit de designChecklist complète couvrant la typographie, la couleur, la mise en page, l'interactivité, le contenu, les composants, les icônes, la qualité du code et les omissions stratégiques
    3. TypographieCorriger les styles par défaut du navigateur, la présence des titres, la largeur du corps de texte, la variété des graisses, le formatage des nombres, l'espacement des lettres et les mots orphelins
    4. Couleur et surfacesRemplacer le noir pur, les accents sursaturés, les gris mélangés, les dégradés IA, les ombres génériques, le design plat et l'éclairage incohérent
    5. Mise en pageRompre la symétrie, remplacer les cartes à trois colonnes, utiliser CSS Grid, ajouter des conteneurs, varier les rayons, créer de la profondeur, corriger l'alignement
    6. Interactivité et étatsAjouter des états de survol, actif, focus, chargement, vide et erreur avec des transitions fluides et des animations accélérées par le GPU
    7. ContenuUtiliser des noms et des données réalistes, supprimer les clichés IA, écrire à la voix active, varier les dates, éviter le Lorem Ipsum
    8. Modèles de composantsRemplacer les cartes génériques, les paires de boutons, les badges, les accordéons, les carrousels, les modales, les avatars, les commutateurs et les fermes de liens en pied de page
    9. IconographieAller au-delà des valeurs par défaut de Lucide/Feather, éviter les métaphores clichées, standardiser les largeurs de trait, ajouter un favicon, utiliser de vraies photos
    10. Qualité du codeUtiliser du HTML sémantique, un style cohérent, des unités relatives, du texte alternatif, un z-index propre, supprimer le code mort, ajouter des balises meta
    11. Omissions stratégiquesAjouter des liens légaux, une navigation de retour, une page 404 personnalisée, une validation de formulaire, des liens d'évitement et le consentement aux cookies si nécessaire
    12. Techniques de mise à niveauTechniques à fort impact pour améliorer la typographie, la mise en page, le mouvement et les surfaces afin de remplacer les motifs génériques
    Description du skill lui-même
    « Améliore les sites web et applications existants vers un niveau premium. Audite le design actuel, identifie les motifs IA génériques et applique des standards de design haut de gamme sans casser les fonctionnalités. Fonctionne avec n'importe quel framework CSS ou du CSS vanilla. »

    Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 15 032 caractères. Lire le fichier complet sur GitHub.

    Redesign Existing Projects

    Exécutez redesign-existing-projects sur une vraie tâche de revue de design.

    Téléchargez OpenDesign, importez redesign-existing-projects depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

    Télécharger OpenDesignParcourir tous les skills
    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    OpenDesign Desktop

    Un seul design system. Votre marque, cohérente partout

    Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

    • Sites, slides, prototypes, dashboards, images et vidéos
    • Plus de 140 design systems et la bibliothèque complète de modèles et skills
    • Codex local et plus de 21 agents de code · Gratuit
    Télécharger gratuitement

    Disponible sur macOS et Windows