Image → Code (conception image-first pour sites web)

Ce qu'il fait

Cette compétence impose un flux de travail « image-first » pour une conception et une implémentation de site web haute fidélité. Elle génère des images de conception claires au niveau de la section, effectue une analyse visuelle approfondie (typographie, espacement, couleurs, rythme des composants) et utilise ces références pour implémenter du code frontend responsive. L'objectif est d'obtenir des traductions fidèles et faciles à implémenter de visuels sous direction artistique, plutôt que des sorties de modèles génériques.

Quand l'utiliser

Utilisez cette compétence lorsque la qualité visuelle est primordiale : sections hero, pages d'atterrissage (landing pages), sites marketing, pages éditoriales, pages produits et refontes où des références de conception lisibles et extractibles sont requises avant le codage. Elle est idéale pour les flux de travail où les images peuvent être générées et utilisées comme source principale de vérité.

Ce qui est inclus

• Scripts : aucun script groupé dans le répertoire de la compétence (has_scripts=false).
• Références : règles procédurales concises et une liste de contrôle exhaustive pour la génération d'images, l'analyse et la traduction du design vers le code.
• Instructions : impose la génération d'images en priorité, une section par image dans les flux de travail Codex, l'extraction approfondie du texte/typographie/espacement/couleurs, et des règles de régénération lorsque les détails sont flous.

Agents compatibles

Idéal pour les agents dotés de capacités de génération d'images et d'implémentation frontend (Codex, Claude Code, Cursor, agents de codage de type Copilot et autres agents de design sensibles aux images).