Communitygithub.com

leonxlnx/redesign-projets-existants

Améliore les sites Web et applications existants vers une qualité premium. Audite le design actuel, identifie les motifs génériques d'IA et applique des standards de design haut de gamme sans casser la fonctionnalité. Fonctionne avec n'importe quel framework CSS ou CSS vanilla.

Qu'est-ce que redesign-projets-existants ?

Ce skill est conçu pour les agents IA (tels que Claude Code, Cursor, Codex, etc.) qui doivent moderniser et améliorer la qualité visuelle et structurelle de projets Web existants. Il effectue tout d'abord un audit complet du design actuel, en repérant les motifs stylistiques génériques et les faiblesses courantes souvent introduites par des générations automatiques (patterns AI). Ensuite, il applique des standards de design professionnels et cohérents – typographie raffinée, espaces harmonieux, palettes de couleurs équilibrées, micro-interactions subtiles – tout en préservant scrupuleusement la fonctionnalité existante et la logique métier. Il est compatible avec tous les frameworks CSS (Bootstrap, Tailwind, Material UI, etc.) comme avec le CSS vanilla, et ne modifie jamais la structure HTML sous-jacente ni le comportement JavaScript. Le processus est progressif : aux premières utilisations, il nettoie les incohérences visuelles ; dans les itérations suivantes, il affine les détails jusqu'à un rendu premium. L'agent utilise des techniques comme l'analyse de contraste, la révision des espacements, l'uniformisation des border-radius et l'ajout de dégradés ou d'ombres portées subtils. Chaque modification est documentée via des commentaires dans le CSS pour faciliter la relecture humaine. Ce skill est particulièrement utile pour des refontes rapides de prototypes, de sites de démonstration ou de produits en early stage qui nécessitent un saut qualitatif sans réécriture complète.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/leonxlnx/taste-skill/tree/main/skills/redesign-existing-projects
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait redesign-projets-existants ?

Améliore les sites Web et applications existants vers une qualité premium. Audite le design actuel, identifie les motifs génériques d'IA et applique des standards de design haut de gamme sans casser la fonctionnalité. Fonctionne avec n'importe quel framework CSS ou CSS vanilla.

Fonctionnement

Ce skill analyse d'abord le projet existant pour identifier les incohérences visuelles et les motifs génériques d'IA. Ensuite, il applique progressivement des améliorations de design premium :

  • Audit du design actuel (contraste, espacement, typographie, palette de couleurs)
  • Détection des motifs AI génériques (bordures trop simples, ombres excessives, grilles mal alignées)
  • Application de standards de design premium (typographie raffinée, micro-interactions, hiérarchie visuelle claire)
  • Préservation de la fonctionnalité existante (aucune modification du HTML ou du JavaScript)

Compatibilité

  • Fonctionne avec tous les frameworks CSS (Bootstrap, Tailwind, Material UI, Bulma, Foundation, etc.)
  • Compatible aussi avec le CSS vanilla
  • Aucune dépendance externe requise

Instructions d'utilisation

  1. Placez-vous dans le répertoire racine du projet Web existant.
  2. Exécutez le skill en demandant à l'agent IA : Active le skill redesign-projets-existants.
  3. L'agent analysera le projet et proposera des améliorations.
  4. Examinez et validez les modifications proposées (elles seront commentées dans le CSS).
  5. Répétez l'opération pour des itérations successives jusqu'à obtention du rendu premium souhaité.

Note : Le skill ne modifie que les fichiers CSS (ou les blocs de style dans les composants). Il préserve la structure HTML et les fonctionnalités JavaScript.

Exemple de sortie

/* Avant : Motif AI générique */
.card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

/* Après : Design premium */
.card {
  /* Audit : contraste amélioré, espacement harmonieux */
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 24px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

Bonnes pratiques

  • Testez les modifications sur un environnement de développement avant déploiement.
  • Utilisez la fonction d'annotation de l'IA pour comprendre chaque changement.
  • Itérez : commencez par les corrections globales, puis affinez les détails.
  • Consultez la documentation du framework CSS utilisé pour des ajustements spécifiques.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

leonxlnx/design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

leonxlnx/design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/full-output-enforcement

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

leonxlnx/gpt-taste

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

leonxlnx/high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

leonxlnx/image-taste-frontend

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

leonxlnx/taste-skill

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

leonxlnx/taste-skill

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/taste-skill

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/taste-skill

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

leonxlnx/taste-skill

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

leonxlnx/taste-skill

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/taste-skill

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community