GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Site web conçu d'abord par l'image v1.0.0
Utilisez cette ressource pour concevoir une landing page ou un site à partir d'images de référence
Nouveau
- 558 téléchargements
- 172 mentions J'aime
- 224 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install image-first-website-designSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent génère d'abord une image de design par section (hero, tarifs, témoignages…), puis en extrait le texte, la typographie, les espacements et les couleurs. Il code ensuite le site en suivant ces références, avec un hero épuré et sans cartes imbriquées. Vous obtenez un site plus fidèle à une vraie direction artistique qu'un gabarit générique.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md traduit en français : le flux image, analyse, code, étape par étape
- Des réglages de départ (densité, variance, générosité des espaces) à adapter à la demande
- Un moteur de variation : thème, typographie, type de hero et 4 composants signature
- Des listes de contrôle anti-clichés et des packs de sections de 4, 8 et 12 sections
Pour qui
- Créer une landing page ou un site de marque où le rendu visuel compte
- Refaire un site pour qu'il paraisse moins générique
- Produire un portfolio ou une page produit avec une vraie direction artistique
Pas pour qui
- Corriger un bogue ou une tâche purement technique
- Travailler sans outil de génération d'images dans l'agent
- Appliquer une charte graphique déjà figée à la lettre
Étiquettes
- landing page
- design web
- hero
- direction artistique
- maquette
À propos
Vous dites
« Conçois une landing page en 8 sections pour mon studio de céramique, avec un hero épuré et une palette chaude. »
Skill publiée par leonxlnx sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Une description du site, de son public et de l'ambiance souhaitée et Un agent capable de générer des images
Comment l'utiliser
- Installez la skill dans le dossier de skills de votre agent.
- Décrivez le site, son public et l'ambiance voulue.
- Validez les images de référence générées, puis laissez l'agent coder le site.
Aperçu du contenu
Fichiers
- LICENSE1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- SKILL.md44,8 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- leonxlnx
- Source
- github.com/leonxlnx/imagegen-skills/tree/beb16b0d0f4dae9a6f5cb04ea41e97b93a54ab8e/skills/image-to-code
- Licence
- MIT
Notice
Version modifiée de « image-to-code » (leonxlnx, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il un outil de génération d'images ?
Oui. La méthode repose sur des images de référence générées par l'agent. Sans cet outil, la skill perd l'essentiel de son intérêt. Elle est écrite pour Codex, mais le principe vaut pour d'autres agents capables de générer des images.
Peut-on changer les réglages par défaut ?
Oui. Les valeurs de densité, de variance ou d'espacement sont des points de départ : demandez « plus épuré » ou « plus audacieux » et l'agent les adapte.