98.8K+Télécharger
Aller au guide d’utilisation
high-end-visual-designpar Leonxlnx

High End Visual Design Skill.

Un skill Claude Code et Codex pour le design d'interface : enseigne le raffinement des agences haut de gamme : typographie, espacements, ombres, cartes et mouvement.

  • Web et UI
Télécharger OpenDesignVoir le guide d'utilisation
Leonxlnx/taste-skill · skills/soft-skill/SKILL.mdSKILL.md
--- name: high-end-visual-design description: 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. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 10 545 caractères au total

01 Ce qu'il fait

Ce que fait le skill high-end-visual-design 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

Ce skill enseigne aux agents de code à produire un design visuel de niveau agence à 150 000 $+ en définissant des choix typographiques précis, un rythme spatial, des techniques d'ombrage, des structures de cartes et des schémas de mouvement fluides. Il interdit les valeurs par défaut génériques (Inter, Roboto, icônes à traits épais, ombres dures, easing standard) et impose des alternatives premium comme Geist ou Clash Display, des icônes ultra-fines et des transitions cubic-bezier personnalisées.

Chaque résultat doit combiner un Vibe Archetype unique (Ethereal Glass, Editorial Luxury ou Soft Structuralism) avec un Layout Archetype (Asymmetrical Bento, Z-Axis Cascade ou Editorial Split) pour éviter la répétition. Les composants utilisent des enceintes Double-Bezel imbriquées, des icônes de fin Button-in-Button, un espace blanc massif (py-24 à py-40) et des animations d'entrée interpolées au défilement. Tout le mouvement simule la physique réelle uniquement via transform et opacity, avec des garde-fous de performance stricts pour mobile.

Ce qu'il produit

  • Code React/Tailwind/HTML impeccable et pixel-perfect implémentant les Vibe et Layout Archetypes sélectionnés avec des structures de composants Double-Bezel, des animations cubic-bezier personnalisées et un repli responsive mobile
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Lancer le Variance Engine

    Avant d'écrire le code, l'agent sélectionne silencieusement un Vibe Archetype et un Layout Archetype parmi des combinaisons premium prédéfinies en fonction du contexte du prompt, afin de garantir un résultat sur mesure et unique.

  2. 02
    Structurer le fond et la typographie

    Établir la texture choisie (noir OLED avec dégradés radiaux, blancs crème avec surcouche de bruit, ou gris argenté avec ombres douces) et définir des tailles typographiques massives avec un macro-espacement blanc exagéré.

  3. 03
    Concevoir des structures de composants imbriquées

    Construire toutes les cartes, champs et grilles majeurs avec la technique Double-Bezel : une coque extérieure avec bordure fine et un padding enveloppe un noyau intérieur avec son propre fond et un rayon calculé mathématiquement plus petit.

  4. 04
    Chorégraphier une animation fluide

    Injecter des transitions cubic-bezier personnalisées pour tous les changements d'état, des révélations de navigation échelonnées avec des décalages en translate-y et opacity, et une physique de survol magnétique des boutons avec translation diagonale et mise à l'échelle.

  5. 05
    Appliquer l'interpolation au défilement

    Les éléments entrent dans le viewport avec une animation douce de fondu vers le haut (translate-y-16 blur-md opacity-0 se résolvant sur 800ms et plus) en utilisant IntersectionObserver ou whileInView de Framer Motion, jamais des écouteurs de défilement window.

  6. 06
    Valider par rapport à la checklist pré-livraison

    Évaluer le code par rapport à une matrice en 11 points garantissant l'absence de motifs interdits, la bonne sélection d'archétype, l'architecture Double-Bezel, un easing personnalisé, un repli mobile et des animations sûres pour le GPU avant livraison.

02 Trouvez celui qui vous convient

Quand utiliser le skill high-end-visual-design

Utilisez le skill high-end-visual-design dans Claude Code ou Codex lorsque le travail est une conception d'interface de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

  • Concevoir des expériences numériques de niveau agence à 150 000 $ et plus pour des projets SaaS, IA, tech, lifestyle, immobilier, grand public, santé ou portfolio nécessitant des micro-interactions minutieuses et un rythme spatial cinématographique
  • Construire des interfaces qui doivent exsuder une profondeur haptique et un mouvement fluide impeccable avec des transitions cubic-bezier personnalisées et des animations d'entrée interpolées au défilement

Connaître les limites

  • Les projets nécessitant Inter, Roboto, Arial, Open Sans ou Helvetica comme typographie ne peuvent pas utiliser ce skill
  • Les designs nécessitant les icônes standard à traits épais Lucide, FontAwesome ou Material Icons sont incompatibles avec l'exigence d'icônes ultra-fines de ce skill
  • Les interfaces avec des barres de navigation collantes bord à bord fixées en haut ou des grilles symétriques à 3 colonnes de style Bootstrap sans grands espaces blancs violent les contraintes de mise en page
  • Les motifs d'animation utilisant des transitions linéaires ou ease-in-out standard, ou des changements d'état instantanés sans interpolation, sont explicitement interdits

Quoi fournir

  • Contexte du prompt pour la sélection d'archétypeLa demande de l'utilisateur doit indiquer le type de projet (SaaS, lifestyle, portfolio, etc.) afin que l'agent puisse sélectionner la combinaison appropriée de Vibe et Layout Archetype depuis le Variance Engine.

03 Dans le skill

Règles que le skill high-end-visual-design 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. Interdire tous les défauts génériques

    Ne jamais utiliser Inter, Roboto, Arial, Open Sans, Helvetica, les icônes Lucide ou Material Icons à traits épais, les bordures grises 1px solid, les ombres dures (shadow-md, rgba(0,0,0,0.3)), les barres de navigation collantes bord à bord, les grilles Bootstrap symétriques, ou les transitions linear/ease-in-out.

  2. Ne jamais répéter deux fois la même mise en page

    L'agent doit combiner dynamiquement différents archétypes de mise en page premium et profils de texture tout en respectant strictement le langage de design élite, afin qu'aucun résultat ne se ressemble.

  3. Utiliser uniquement une typographie et des icônes premium

    Supposer que Geist, Clash Display, PP Editorial New ou Plus Jakarta Sans sont disponibles pour les polices. Utiliser uniquement des icônes ultra-fines et précises comme Phosphor Light ou Remix Line.

  4. Appliquer le Double-Bezel à tous les composants majeurs

    Ne jamais placer les cartes ou conteneurs premium à plat.

  5. Doubler le padding standard pour un macro-espace blanc

    Utiliser py-24 à py-40 pour le padding des sections afin de laisser le design respirer amplement. Le padding standard est insuffisant pour un sentiment premium.

  6. Animer uniquement transform et opacity

    Ne jamais animer top, left, width ou height, car ils déclenchent des recalculs de mise en page. Utiliser exclusivement transform et opacity pour un mouvement accéléré par GPU et sans risque de performance.

  7. Restreindre backdrop-blur aux éléments fixes uniquement

    Appliquer backdrop-blur exclusivement aux éléments fixes ou collants comme les barres de navigation et les superpositions.

  8. Effondrer toutes les mises en page asymétriques en dessous de 768px

    Toute mise en page asymétrique au-dessus du point de rupture md: doit revenir agressivement à w-full, px-4, py-8 sur les viewports en dessous de 768px.

04 Mettez-le en pratique

Installer high-end-visual-design 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 high-end-visual-design à 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 high-end-visual-design

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

Donnez au skill une première tâche de design UI

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

Starter prompt
Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

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érifier qu'aucune police interdite (Inter, Roboto, Arial, Open Sans, Helvetica), icône (Lucide à trait épais, FontAwesome, Material), bordure (1px solid gray), ombre (shadow-md, ombres portées dures), mise en page (barres de navigation collantes bord à bord, grilles symétriques) ou motif de mouvement (linear, ease-in-out) n'est présent
  • Confirmer qu'un Archétype de Vibe (Ethereal Glass, Editorial Luxury ou Soft Structuralism) et un Archétype de Mise en page (Asymmetrical Bento, Z-Axis Cascade ou Editorial Split) ont été consciemment choisis et appliqués
  • Vérifier que toutes les cartes et conteneurs majeurs utilisent l'architecture imbriquée Double-Bezel avec une coque extérieure (bordure fine, padding, grand rayon) enveloppant un noyau intérieur (arrière-plan distinct, rayon calculé plus petit)
  • S'assurer que le padding des sections est d'au moins py-24 et que la mise en page respire avec un macro-espace blanc exagéré
  • Valider que toutes les transitions utilisent des courbes cubic-bezier personnalisées et qu'aucun easing linear ou ease-in-out n'est présent
  • Confirmer que des animations d'entrée au scroll sont présentes afin qu'aucun élément n'apparaisse statiquement, et que toutes les animations utilisent uniquement transform et opacity sans animer des propriétés déclenchant la mise en page comme top, left, width ou height

Dans OpenDesign, importez high-end-visual-design 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/soft-skill/SKILL.md Checksum du contenu enregistré 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. Ce n'est ni une note ni un compteur d'utilisation pour high-end-visual-design.
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. Informations méta et directive principaleDéfinit le persona Vanguard_UI_Architect, l'objectif d'agence à 150 000 $+, et le Mandat de Variance exigeant des résultats uniques
  2. LA DIRECTIVE « ABSOLUTE ZERO » (ANTI-PATTERNS STRICTS)Répertorie toutes les polices, icônes, bordures, ombres, mises en page et motifs de mouvement interdits qui provoquent un échec de design instantané
  3. LE MOTEUR DE VARIANCE CRÉATIVESpécifie trois Archétypes de Vibe et trois Archétypes de Mise en page à combiner pour des résultats premium uniques avec des règles d'effondrement mobile
  4. MICRO-ESTHÉTIQUE HAPTIQUE (MAÎTRISE DES COMPOSANTS)Détaille l'architecture imbriquée à Double Lisière, le motif d'icône traînante Bouton-dans-Bouton, et le rythme spatial en marge macro avec des étiquettes en exergue
  5. CHORÉGRAPHIE DE MOUVEMENT (DYNAMIQUE FLUIDE)Définit des transitions cubic-bezier personnalisées, la Fluid Island Nav avec métamorphose du menu hamburger, la physique de survol des boutons magnétiques et les animations d'interpolation au défilement
  6. GARDE-FOUS DE PERFORMANCERestreint l'animation aux propriétés transform et opacity uniquement, limite le backdrop-blur aux éléments fixes, et impose une discipline stricte du z-index
  7. PROTOCOLE D'EXÉCUTIONFournit une séquence exacte en cinq étapes, de la sélection silencieuse d'archétype au scaffolding, à l'architecture, à la chorégraphie, jusqu'à la livraison d'un résultat au pixel près
  8. LISTE DE CONTRÔLE AVANT LIVRAISONRépertorie onze vérifications obligatoires portant sur les motifs interdits, l'application de l'archétype, l'architecture Double Lisière, la qualité du mouvement, le repli mobile et la performance
Description du skill lui-même
« Apprend à l'IA à concevoir comme une agence haut de gamme. Définit les polices exactes, les espacements, les ombres, les structures de cartes et les animations qui donnent à un site web une impression de luxe. Bloque tous les choix par défaut courants qui font paraître les designs IA bon marché ou génériques. »

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

06 Avant d'installer

Questions sur le skill high-end-visual-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Ce skill inclut-il des bibliothèques ou des frameworks JavaScript ?

Le skill se concentre sur les motifs de design visuel et recommande d'utiliser IntersectionObserver ou whileInView de Framer Motion pour les révélations au défilement, mais n'inclut ni n'installe ces bibliothèques.

Il indique explicitement de ne jamais utiliser window.addEventListener('scroll') car cela provoque des reflows continus et détruit les performances mobiles. Vous devez fournir vous-même les bibliothèques d'animation.

High End Visual Design

Exécutez high-end-visual-design sur une tâche de design d'interface réelle.

Téléchargez OpenDesign, importez high-end-visual-design 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 high-end-visual-design

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