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
Grille de page centrée sur l'image v1.0.0
Utilisez cette ressource pour concevoir une page d'accueil portée par une grande photographie
Nouveau
- 332 téléchargements
- 135 mentions J'aime
- 119 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install image-first-grid-layoutSans 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 construit une page autour d'une image pleine page, voilée par des dégradés sombres pour garder le texte lisible. Il ajoute des rails de grille discrets, ancre le titre et l'appel à l'action en bas, puis place un encadré secondaire (citation, chiffre ou preuve) à côté. Vous obtenez une page cinématographique, calme, qui laisse la photo au premier plan.
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 : la direction de design complète, traduite en français
- Une cible visuelle : image pleine page, voiles dégradés, rails et repères de grille
- Des motifs recommandés (hero ancré en bas, boutons translucides, lignes WebGL légères)
- Des réglages à ajuster et une liste de pièges à éviter
Pour qui
- Page d'accueil d'un lieu, d'une marque ou d'un produit qui dispose de belles photographies
- Page de lancement ou portfolio à l'ambiance cinématographique
- Refonte d'un hero centré et banal vers une composition plus structurée
Pas pour qui
- Galerie d'images ou boutique avec beaucoup de produits à comparer
- Page très riche en texte ou en tableaux
- Projet sans image forte à mettre en avant
Étiquettes
- hero
- grille
- photographie
- page d'accueil
- design
À propos
Vous dites
« Refais le hero de ma page d'accueil avec la skill image-first-grid-layout : ma photo du chantier en pleine page, titre en bas à gauche et une citation client à droite. »
Skill publiée par MengTo sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Une photographie large de bonne qualité et Le titre, l'appel à l'action et une citation ou un chiffre
Comment l'utiliser
- Installez la skill dans le dossier de skills de votre agent.
- Donnez à l'agent votre image principale et le texte du hero.
- Demandez-lui d'ajuster l'opacité des voiles et la visibilité de la grille.
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- SKILL.md5,1 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/image-first-grid-layout
- Licence
- MIT
Notice
Version modifiée de « image-first-grid-layout » (MengTo, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il une photo précise ?
Il faut une image large et forte, de préférence un paysage ou une architecture. Sans image de qualité, le résultat perd tout son effet.
Les effets WebGL sont-ils obligatoires ?
Non. Les lignes animées sont facultatives : vous pouvez les retirer pour une page plus simple et plus légère.