image-to-code

Compétence image-vers-code de site web élite pour Codex. Pour les tâches web visuellement importantes, elle doit d'abord générer elle-même la ou les images de conception, les analyser en profondeur, puis implémenter le site web pour les faire correspondre aussi précisément que possible. Dans Codex, elle doit privilégier des images grandes, lisibles et spécifiques à chaque section plutôt que de minuscules planches compressées, générer de nouvelles images autonomes pour les sections ou les vues détaillées au lieu de recadrer d'anciennes images, éviter la sous-génération paresseuse, éviter l'interface utilisateur de cartes dans des cartes dans des cartes, et garder le...

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code

Télécharger ZIP GitHub

Plus de skills de leonxlnx

design-taste-frontend

Ingénieur UI/UX senior. Architecture d'interfaces numériques surpassant les biais par défaut des LLM. Applique des règles basées sur des métriques, une architecture de composants stricte, l'accélération matérielle CSS et une ingénierie de design équilibrée.

developmentdesigncreative

high-end-visual-design

Apprend à l'IA à concevoir comme une agence haut de gamme. Définit les polices, espacements, ombres, structures de cartes et animations exacts qui donnent à un site web une apparence coûteuse. Bloque tous les paramètres par défaut courants qui rendent les conceptions IA bon marché ou génériques.

designcreativedevelopment

redesign-existing-projects

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.

designdevelopmentcode-review

Interfaces épurées de style éditorial. Palette monochrome chaleureuse, contraste typographique, grilles bento plates, pastels doux. Pas de dégradés, pas d'ombres marquées.

designcreativedevelopment

Ingénieur UX/UI d'élite et en motion avancée GSAP. Applique une véritable randomisation pilotée par Python pour la variation des mises en page, une structure de page AIDA stricte, une typographie éditoriale large (interdit les retours à la ligne sur 6 lignes), des grilles bento sans espace, des déclencheurs de défilement GSAP stricts (pinning, stacking, scrubbing), des micro-images en ligne, et un espacement massif entre les sections.

developmentdesigncreative

Compétence de génération d'images de kit de marque premium pour créer des planches de charte graphique haut de gamme, des systèmes de logos, des présentations d'identité et des présentations de monde visuel. Entraînée pour les systèmes de marque minimalistes, cinématographiques, éditoriaux, dark-tech, luxe, culturels, sécurité, jeux, outils développeurs et applications grand public. Optimisée pour le concept de logo intentionnel, la composition raffinée, la typographie épurée, la signification symbolique forte, les maquettes premium, l'imagerie dirigée artistiquement et les mises en page en grille flexibles.

creativedesignmarketing

imagegen-frontend-web

Compétence frontend d'image élite pour générer des références de conception de sites web premium et orientées conversion. RÈGLE DE SORTIE CRITIQUE — générer UNE image horizontale distincte POUR CHAQUE section. Une page d'accueil avec 8 sections produit 8 images. Ne jamais compresser plusieurs sections en une seule image. Applique une variété de compositions (pas toujours texte à gauche / image à droite), liberté d'arrière-plan, CTA variés, échelles de héros variées (géant / moyen / mini minimaliste), colonne vertébrale narrative conceptuelle, moments de seconde lecture, et un...

creativedesigndevelopment

full-output-enforcement

Remplace le comportement par défaut de troncature du LLM. Impose une génération complète de code, interdit les motifs de substitution et gère proprement les divisions liées à la limite de tokens. À appliquer à toute tâche nécessitant une sortie exhaustive et non abrégée.

developmentcode-reviewtesting