image-to-codepar Leonxlnx

Image to Code Skill.

Un skill Claude Code et Codex pour le design d'interface : génère et analyse d'abord une image de design, puis implémente la page correspondante.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: 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 … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 36 361 caractères au total

01 Ce qu'il fait

Ce que fait le skill image-to-code 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 impose un workflow image-first obligatoire pour les tâches web où le visuel compte. L'agent doit générer lui-même des images de design avant d'écrire tout code, puis analyser en profondeur ces images pour en extraire la typographie, l'espacement, les boutons, les couleurs et la logique de mise en page. Dans Codex, il génère par défaut une grande image lisible par section plutôt que des planches multi-sections compressées, et crée de nouvelles images autonomes pour les sections ou les vues détaillées plutôt que de recadrer.

Il évite résolument les mises en page en boîtes imbriquées, les faux libellés d'interface, les petites pastilles et les sections hero trop serrées. Le hero doit rester épuré avec un titre de 1 à 3 lignes maximum. Le skill impose un espacement généreux, réduit l'encombrement visuel et implémente un frontend qui correspond fidèlement aux références générées plutôt que de dériver vers des mises en page codées génériques.

Service de génération d'imagesCode UI

Voir l'exemple de prompt ↗

Fonctionnement

01
Créer des images de section distinctes dans Codex
Dans Codex, le skill génère une grande image lisible par section plutôt que de compresser plusieurs sections en une seule planche.
02
Générer de nouvelles images, jamais de recadrage
Lorsqu'une section nécessite une vue dédiée, le skill génère une nouvelle image en préservant le même langage de design plutôt que de recadrer une image plus grande générée précédemment.
03
Analyser en profondeur toutes les images générées
Le skill extrait de chaque image le texte visible exact, les relations typographiques, la logique d'espacement, les détails des boutons, la palette de couleurs, la structure de mise en page et le style des composants avant l'implémentation.
04
Implémenter le frontend pour correspondre aux références
Le code traduit fidèlement le design analysé, en préservant la logique de mise en page, le rythme d'espacement, l'ordre des sections, l'atmosphère typographique et le style des composants sans dériver vers des motifs génériques.

02 Trouvez celui qui vous convient

Quand utiliser le skill image-to-code

Utilisez la compétence image-to-code 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

Sections hero, landing pages, sites marketing, sites de startups et pages de marque éditoriales où la qualité visuelle compte
Sites web premium multi-sections et refontes où le goût visuel et la fidélité d'implémentation sont centraux

Connaître les limites

Tâches purement techniques, corrections de bugs ou demandes fournissant déjà un design system précis où la génération visuelle est inutile
Tâches structurelles principalement techniques plutôt que visuelles par nature

Quoi fournir

Nombre de sections ou type de siteLe skill déduit le nombre de sections nécessaires ou le type de site web (hero seul, landing page à 4 sections, site à 8 sections, etc.) pour déterminer combien d'images générer.
Direction visuelle ou préférences de styleLes demandes de l'utilisateur comme « épuré », « créatif fou », « SaaS premium » ou « éditorial » guident l'interprétation par le skill des paramètres de configuration de base DESIGN_VARIANCE, ART_DIRECTION et autres.

03 Dans le skill

Règles que le skill image-to-code donne à Claude Code et Codex

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

La génération d'images est obligatoire en premier
Pour les demandes de design web où la qualité visuelle compte, le skill doit générer des images de design avant d'écrire tout code.
Les titres du hero restent limités à 1-3 lignes maximum
Le titre du hero doit idéalement rester dans 1 à 3 lignes. Si le titre devient trop long, le skill doit réduire le nombre de mots plutôt que de forcer davantage de lignes.
Pas de cartes imbriquées dans des cartes imbriquées dans des cartes
Le skill ne doit pas se rabattre par défaut sur des mises en page en boîtes imbriquées avec d'immenses conteneurs de section arrondis englobant des cartes dans des cartes plus grandes, elles-mêmes dans des cartes extérieures.
Réduire agressivement l'encombrement micro-UI
Le skill ne doit pas encombrer les designs de pastilles inutiles, de faux marqueurs système, de fausses étiquettes de contrôle, de tags décoratifs façon code, ou de métadonnées minuscules sans apport de clarté.
Générer suffisamment d'images pour la qualité
Le skill doit générer autant d'images que nécessaire pour rendre le design lisible et exploitable. Il est préférable de générer trop d'images claires plutôt que trop peu d'images compressées.
Le premier écran doit être net sur les petits ordinateurs portables
La zone héro et la première vue doivent paraître utilisables et nettes sur un petit ordinateur portable.

04 Mettez-le en pratique

Installer image-to-code 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 image-to-code à 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 image-to-code

Formulaire CLI skills générique pour skills/image-to-code-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 me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

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 que des images de design ont été générées avant toute implémentation de code pour les tâches visuellement importantes
Confirmer que le texte reste lisible, et si ce n'est pas le cas, vérifier que des images de détail supplémentaires ou de nouvelles régénérations ont été créées plutôt qu'un recadrage
Vérifier que suffisamment d'images ont été générées et que leur nombre n'a pas été réduit par facilité
Vérifier que le héro reste net avec des titres de 1 à 3 lignes maximum et ne paraît pas surchargé sur un petit ordinateur portable
Confirmer que les boîtes imbriquées inutiles, les pastilles superflues, les étiquettes et les faux micro-éléments techniques ont été retirés
Vérifier que le code implémenté correspond fidèlement aux références générées sans dériver vers des mises en page codées génériques

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

Télécharger OpenDesign Lire 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/image-to-code-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 de ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'utilisation pour image-to-code.
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

DIRECTIVE FONDAMENTALE : DESIGN DE SITE WEB IMAGE-FIRST VERS CODEDéfinit le rôle du skill comme la génération de références de site web premium, faciles à implémenter, avant de les transformer en véritable frontend
CONFIGURATION DE RÉFÉRENCE ACTIVEDéfinit des valeurs numériques par défaut pour la variance de design, la densité visuelle, la direction artistique, la clarté d'implémentation et d'autres paramètres de contrôle
RÈGLE OBLIGATOIRE IMAGE-FIRSTExige de générer une image d'abord pour les tâches visuelles de site web ; le code n'est que la couche de traduction après analyse de l'image
RÈGLE : GÉNÉRER SUFFISAMMENT D'IMAGESIndique de générer autant d'images que nécessaire pour la lisibilité et l'extraction ; ne jamais réduire leur nombre par facilité
RÈGLE SPÉCIFIQUE À CODEX POUR LES IMAGES DE SECTIONDans Codex, privilégier une grande image par section plutôt que de compresser plusieurs sections dans un tableau illisible
RÈGLE : NE PAS RECADRER LES ANCIENNES IMAGESGénérer de nouvelles images spécifiques à chaque section plutôt que de recadrer ou découper des images plus grandes déjà générées
RÈGLE DE RÉGÉNÉRATIONSi une section n'est pas claire, la régénérer comme une nouvelle image autonome en conservant le même langage visuel
RÈGLE OPTIONNELLE : IMAGE DE DÉTAIL / D'EXTRACTIONCréer des images de détail supplémentaires plus rapprochées pour les sections lorsque la qualité d'extraction nécessite un texte plus grand ou un espacement plus clair
EXIGENCE D'ANALYSE APPROFONDIE DES IMAGESTraiter les images générées comme des spécifications de design ; extraire le texte, la typographie, l'espacement, les boutons, les couleurs et la mise en page avant d'implémenter
WORKFLOW DE SITE CODEX AXÉ SUR L'IMAGEDéfinit l'ordre d'exécution : générer les images des sections, analyser en profondeur, extraire le design system, implémenter le frontend pour qu'il corresponde
LE MOTEUR DE VARIATION COMBINATOIREPropose des choix de direction visuelle pour le thème, l'arrière-plan, la typographie, l'architecture du hero, le système de sections et les composants signature
RÈGLES DE MINIMALISME DU HEROImpose des heros épurés et cinématiques avec un titre de 1 à 3 lignes maximum, sans encombrement, lisibles sur les petits ordinateurs portables

Description du skill lui-même

« Compétence d'élite image-to-code pour sites web pour Codex. Pour les tâches web visuellement importantes, elle doit d'abord générer elle-même la ou les images de design, les analyser en profondeur, puis implémenter le site web pour les correspondre aussi fidèlement que possible. Dans Codex, elle doit privilégier des images grandes, lisibles et spécifiques par section plutôt que de minuscules boards compressées, générer des images autonomes fraîches pour les sections ou vues de détail au lieu de recadrer les anciennes, éviter la sous-génération paresseuse, éviter l'interface cartes-dans-cartes-dans-cartes, et garder le hero propre, spacieux, lisible et visible sur un petit ordinateur portable. »

Description de l'en-tête du fichier SKILL.md. Le fichier complet fait environ 36 361 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill image-to-code

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

Avec quel agent de code dois-je utiliser ce skill ?

Le skill est conçu pour Codex et fait explicitement référence à des comportements spécifiques à Codex. Il précise qu'à l'intérieur de Codex, il doit privilégier des images de section grandes et lisibles plutôt que des planches compressées, et génère par défaut une image par section. En dehors de Codex, il peut autoriser une composition multi-sections plus compacte.

Que se passe-t-il si l'image de design générée est floue ou si le texte est trop petit ?

Le skill doit générer des images de détail ou d'extraction supplémentaires pour cette section, ou régénérer la section sous forme d'une nouvelle image autonome.

Il ne doit jamais découper à partir d'une image plus grande générée précédemment. Si davantage d'images peuvent améliorer la lisibilité ou la qualité d'extraction, il en génère davantage plutôt que de faire preuve de paresse sur le nombre d'images.

Image vers Code

Exécutez image-to-code sur une vraie tâche de design UI.

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

Télécharger OpenDesign Parcourir tous les skills