Aller au guide d’utilisation
imagegen-frontend-webpar Leonxlnx

ImageGen Frontend Web Skill.

Un skill Claude Code et Codex pour la conception UI : références de design web section par section via génération d'images.

  • Web et UI
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: 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 / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 36 780 caractères au total

01 Ce qu'il fait

Ce que fait le skill imagegen-frontend-web 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

Le skill génère des références de design de sites web premium sous forme d'images horizontales séparées — une image par section. Il impose une variété de composition au-delà du schéma texte-à-gauche/image-à-droite trop utilisé, exploite avec confiance les fonds pleine page, varie les échelles de hero (géant/moyen/mini) et maintient une palette unique cohérente sur toutes les sections. Conçu pour les landing pages, sites marketing et comps produit que des développeurs ou des modèles de code peuvent recréer.

Il utilise des curseurs de référence configurables : DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. Le skill rompt avec les habitudes par défaut de l'IA grâce à une variation combinatoire — en choisissant un paradigme thématique, un caractère typographique, une architecture de hero, un système de sections et un fil narratif — tout en maintenant une discipline de conversion et un espacement généreux et régulier entre les sections.

Ce qu'il produit

  • Images horizontales (16:9, 16:10 ou 21:9) rendant une section ciblée par cadre en haute fidélité
  • Ensemble d'images étiquetées par section : « Section X of N : <nom> » jusqu'à ce que le nombre total soit livré
  • Univers de marque cohérent sur tous les cadres : même palette, même famille typographique, même identité de CTA, même rayon de bordure, même traitement d'image, même ton
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Lire le brief et adapter les curseurs de référence

    Le skill lit attentivement le prompt de l'utilisateur, puis ajuste les curseurs (variance de design, densité visuelle, direction artistique, clarté d'implémentation, usage de l'image, espacement, variation de mise en page, discipline de conversion), l'échelle du hero, le mode de fond, l'usage des dégradés et la variété de composition pour correspondre au brief.

  2. 02
    Choisir une option dans chaque catégorie combinatoire

    Le skill s'engage sur un paradigme thématique, un caractère de fond, un caractère typographique, une architecture de hero, un système de sections, exactement 4 composants signature, exactement 2 langages de mouvement suggéré, et un fil narratif — tout basé sur le prompt.

  3. 03
    Générer une image horizontale par section

    Chaque section reçoit sa propre image horizontale séparée en 16:9, 16:10 ou 21:9. Le skill ne combine jamais plusieurs sections dans un même cadre et ne renvoie jamais une seule tranche verticale.

  4. 04
    Varier les ancrages de composition et les modes de fond

    D'une section à l'autre, le skill choisit différents ancrages de composition (centré, bas-gauche sur image, tête haut-gauche, empilé au centre, éditorial hors grille, etc.) et modes de fond (uni, image pleine page, image latérale éditoriale, duotone, vignette radiale) afin que la page évite les mises en page répétitives typiques de l'IA.

  5. 05
    Effectuer une vérification de clarté en 21 points avant la sortie

    Avant de finaliser, le skill vérifie la hiérarchie, la netteté du hero, la distinction visuelle, l'absence de signes révélateurs d'IA, le rendu premium, la codabilité, la cohérence multi-images, la force de l'imagerie, l'espace de respiration, l'espacement régulier, la créativité intentionnelle et le nombre correct d'images.

02 Trouvez celui qui vous convient

Quand utiliser le skill imagegen-frontend-web

Utilisez la compétence imagegen-frontend-web dans Claude Code ou Codex lorsque le travail concerne un design d'interface de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier de la compétence.

Bon choix

  • Landing pages, sites marketing et comps produit que des développeurs ou des modèles de code doivent recréer avec précision
  • Designs premium avec des tunnels de conversion clairs — pas de pures planches d'inspiration artistique
  • Designs guidés par l'image qui utilisent la photographie comme matériau de design principal
  • Développeurs ou modèles de code ayant besoin de références UI très codables
  • Sites nécessitant une grande variété de composition entre les sections pour éviter les mises en page répétitives de l'IA

Connaître les limites

  • Demandes souhaitant une seule image verticale combinée au lieu de cadres séparés par section
  • Mises en page commerciales sûres, sans ambition créative ni partis pris forts

Quoi fournir

  • Type de site et objectif de conversionLe skill déduit le type de site (landing page, site marketing, page produit, portfolio, SaaS, e-commerce, agence, éditorial) et l'objectif de conversion principal à partir du prompt pour orienter les choix de design.
  • Nombre de sections ou ambiguïté par défautPrécisez le nombre de sections, sinon le skill applique une valeur par défaut de 6 pour les landing pages et 8 pour les sites complets.
  • Mots-clés d'ambiance de marqueDes mots-clés comme minimaliste, épuré, éditorial, magazine, cinématique, atmosphérique, premium, luxe, SaaS, produit, fintech, agence, studio créatif, e-commerce orientent l'échelle du hero, le mode de fond, l'usage des dégradés et les choix de composition.
  • Secteur ou région pour l'alignement culturelLorsque le brief mentionne un secteur ou une région, le skill oriente la palette et le tempérament typographique en conséquence — sans se replier par défaut sur un style neutre de startup de San Francisco, sauf si un SaaS générique est intentionnel.

03 Dans le skill

Règles que le skill imagegen-frontend-web donne à Claude Code et Codex

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

  1. Éviter le Hero texte à gauche/image à droite par défaut

    Le hero par défaut avec texte à gauche et image à droite est le motif IA le plus surexploité.

  2. Varier la Composition — au Moins 3 Ancrages Différents Doivent Apparaître

    Chaque section choisit un ancrage de composition (centré, tête en haut à gauche, bas gauche sur image, groupe de CTA en bas à droite, tiers gauche/deux-tiers droite, tiers droite/deux-tiers gauche, centré bas, éditorial hors-grille, empilé au centre, image en tant que toile).

  3. Nombre de Sections par Défaut Selon le Type de Demande

    Une landing page ou un modèle de site utilise par défaut 6 sections (6 images). Un site complet ou marketing utilise par défaut 8 sections (8 images). Une page produit ou un portfolio utilise par défaut 6 sections.

  4. Garder un Titre de Hero Court et Percutant

    Le H1 doit se lire visuellement comme une déclaration premium. Les titres doivent généralement se lire comme 5 à 10 mots forts, pas comme un paragraphe.

04 Mettez-le en pratique

Installer imagegen-frontend-web 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 imagegen-frontend-web à 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 imagegen-frontend-web

Forme CLI générique skills pour skills/imagegen-frontend-web/SKILL.md ; le dépôt peut documenter son propre chemin.

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

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt
design 8 sections for a fintech website

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

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

  • Le nombre total d'images est égal au nombre de sections — jamais moins
  • La page respire — l'espacement entre les sections est régulier et maîtrisé, pas trop dense
  • La composition varie selon les sections — les ancrages et les modes de fond sont mixés
  • On peut coder à partir de cette référence

Dans OpenDesign, imagegen-frontend-web est inclus : Plugins → Skills, sélectionnez-le dans la barre supérieure.

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/imagegen-frontend-web/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 2026-09-14 pour l'ensemble du dépôt Leonxlnx/taste-skill, qui contient 11 skills dans ce catalogue. Pas une note ou un compteur d'utilisation pour imagegen-frontend-web.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. RÈGLE DE SORTIE STRICTE — À LIRE EN PREMIERGénérer toujours une image horizontale distincte par section, ne jamais combiner plusieurs sections dans un seul cadre
  2. ORIENTATION DE COMPOSITION DU HERO — À LIRE EN PREMIERÉviter le hero par défaut texte à gauche/image à droite, trop utilisé ; privilégier des alternatives comme un centrage sur fond ou un bas gauche sur image
  3. 1. CONFIGURATION DE BASE ACTIVEDéfinit les curseurs : DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, adaptés à partir du prompt
  4. 2. LE MOTEUR DE VARIATION COMBINATOIREChoisissez une option dans chaque catégorie : paradigme de thème, caractère d'arrière-plan, caractère typographique, architecture du hero, système de sections, 4 composants signature, 2 langages de mouvement, colonne narrative
  5. 4. RÈGLES DE MINIMALISME DU HEROGardez le hero épuré, un titre court et percutant, privilégiez l'espace négatif, évitez de surcharger le premier écran de pastilles et de détails
  6. 5. NOMBRE D'IMAGES ET DÉCOUPAGE DE PAGEUne image horizontale par section ; la landing page par défaut en compte 6, le site complet 8 ; variez la taille des sections ; assurez la continuité entre les cadres
  7. 6. RÈGLE D'ESCALADE CRÉATIVEMontrez une véritable ambition créative en accentuant au moins 3 éléments : composition, typographie, contraste d'échelle, concept du hero, traitement des images, rythme des sections, cadrage
  8. 7. DIRECTION ARTISTIQUE CENTRÉE SUR L'IMAGEUtilisez activement les images comme matériau de conception central : photographie dirigée artistiquement, imagerie produit, imagerie éditoriale, recadrages d'images, panneaux encadrés, compositions superposées
  9. 8. RÈGLES ANTI-AI-SLOPInterdit : sections centrées à l'infini, dégradés IA violet/bleu, blobs flottants, glassmorphisme à outrance, titres en dégradé, contenu générique, bandes de logos défilantes, faux KPI
  10. 10. RÈGLE DE RYTHME DES SECTIONSVariez le rythme des sections en changeant la densité, le ratio image/texte, l'alignement, l'échelle, l'espace blanc, le regroupement des cartes, l'intensité de l'arrière-plan ; évitez les blocs de gabarit répétés
  11. 12. DISCIPLINE DE DENSITÉ ET D'ESPACEMENTLa page doit respirer ; utilisez un espacement vertical régulier entre les grandes sections, évitez les sauts d'étroit à vide, l'espace blanc est un outil de design
  12. 13. RÈGLES DE COULEUR ET DE MATIÈREUtilisez une palette maîtrisée : 1 couleur primaire, 1 secondaire, 1 accent, une échelle neutre ; les dégradés tonaux professionnels sont autorisés ; les blobs en maille arc-en-ciel sont interdits
Description du skill lui-même
« Skill élite de direction d'image frontend pour générer des références de design web premium, orientées conversion. RÈGLE DE SORTIE CRITIQUE — générer UNE image horizontale séparée POUR CHAQUE section. Une landing page avec 8 sections produit 8 images. Ne jamais compresser plusieurs sections en une seule image. Impose la variété de composition (pas toujours texte à gauche / image à droite), liberté d'image de fond, CTAs variés, échelles de hero variées (géant / moyen / mini minimaliste), colonne vertébrale conceptuelle narrative, moments de seconde lecture, et une palette unique cohérente sur toutes les images. Optimisé pour les landing pages, sites marketing et comps produit que les développeurs ou modèles de code peuvent recréer avec précision. »

Description front-matter du SKILL.md. Le fichier complet fait environ 36 780 caractères. Lire le fichier complet sur GitHub.

ImageGen Frontend Web

Exécuter imagegen-frontend-web sur une vraie tâche de design UI

Le skill imagegen-frontend-web est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web