Apple Bento Grid
Problème
Créer des graphiques de présentation visuellement soignés nécessite généralement des outils de design comme Figma ou Keynote. Cette compétence génère des mises en page en grille bento de qualité Apple sous forme de fichiers HTML autonomes qui donnent des images parfaites après capture d'écran – sans avoir besoin d'outil de design.
Présentation
Générez des fichiers HTML autonomes qui affichent des grilles de cartes bento inspirées d'Apple. Chaque sortie est un fichier HTML unique avec CSS intégré – aucune dépendance hormis Google Fonts. Les cartes remplissent une grille CSS serrée avec des espacements minimaux, prêtes pour l'export d'écran Playwright en résolution 2x. Les thèmes clair et sombre sont disponibles.
Flux de travail
- Lisez le système de design sélectivement : Consultez
design-system.mdselon les besoins :- Toujours lire : Section 2 (Grille sans espace) + Section 3 (Modèles de mise en page) – la base de la grille
- Lire par type de carte : Sections 5.1–5.7 selon les cartes utilisées
- Lire pour le thème : Section 1 (jetons clairs) ou Section 9 (jetons sombres)
- Lire une fois pour la première génération : Section 8 (Squelette HTML) comme point de départ structurel
- Recueillez le contenu de l'utilisateur – quelles statistiques, jalons, catégories et citations mettre en avant
- Choisissez un thème – proposez le thème clair, sombre, ou les deux selon le contexte (voir Sélection du thème ci-dessous)
- Choisissez une mise en page – sélectionnez parmi les 3 modèles de mise en page en fonction du nombre de cartes et de l'orientation
- Composez les cartes – choisissez les types de cartes et remplissez-les avec le contenu de l'utilisateur ; privilégiez la densité (pas de cartes vides)
- Demandez les logos/images – si l'utilisateur a un logo ou des images, intégrez-les (voir Logos & Images ci-dessous)
- Générez le HTML – produisez un fichier HTML unique autonome
- Relecture visuelle – ouvrez le HTML dans un navigateur et faites une capture d'écran pour vérifier les problèmes (voir Relecture visuelle ci-dessous)
- Proposez une version verticale – après avoir généré une grille paysage, demandez : « Vous voulez une version verticale (portrait) pour les réseaux sociaux ? » et générez une adaptation du modèle C si oui
- Capture d'écran (optionnelle) – utilisez le script Playwright pour capturer des PNG en 2x
Relecture visuelle
Après avoir généré le HTML, visualisez toujours le résultat pour détecter les problèmes visuels avant de le présenter à l'utilisateur. Utilisez Playwright, les outils MCP du navigateur ou open pour afficher le fichier, puis vérifiez :
Lignes orphelines – Une seule étiquette ou un mot qui se retrouve seul sur une nouvelle ligne. Corrigez en supprimant une étiquette pour que les étiquettes restantes remplissent uniformément, ou ajoutez suffisamment d'étiquettes pour remplir deux lignes complètes.
Espace vide – Des cartes qui semblent clairsemées avec trop d'espace blanc. Corrigez en ajoutant un sous-titre, un badge ou un texte de description supplémentaire pour remplir la carte.
Débordement de texte – Des nombres ou des étiquettes trop longs pour la largeur de leur carte. Corrigez en réduisant la taille de la police ou en abrégeant (par exemple, « 2,4 M$ » au lieu de « 2 400 000 $ »).
Grille cassée – Espaces de ligne visibles ou cartes mal alignées. Vérifiez : pas de align-items: start, l'espacement est exactement de 6px, toutes les cellules de la grille sont occupées.
Police de secours – Texte rendu avec les polices système au lieu de Sora/DM Sans. Assurez-vous que le lien Google Fonts est présent et que la page a accès au réseau.
Découpage de la capture d'écran – Les bords droit ou inférieur des cartes sont coupés dans le PNG exporté. Corrigez en vous assurant que la largeur de la zone d'affichage correspond exactement à la largeur CSS de la grille et que le clip utilise box.x/box.y de boundingBox(), pas x: 0, y: 0.
Si des problèmes sont détectés, corrigez le HTML et revérifiez. Ne présentez pas le résultat à l'utilisateur tant que la sortie n'a pas passé la relecture visuelle.
Sélection du thème
Proposez un thème en fonction du contexte. En cas de doute, générez les deux.
| Contexte | Thème suggéré |
|---|---|
| Diaporama / présentation | Sombre – impact visuel plus fort sur les projecteurs |
| Réseaux sociaux / portfolio | Sombre – se démarque dans les flux |
| Rapport / intégration dans un document | Clair – correspond aux fonds de page blancs |
| Impression / PDF | Clair – économise l'encre, meilleure lisibilité |
| L'utilisateur dit « style Apple » | Clair – l'apparence signature d'Apple |
| L'utilisateur dit « moderne » ou « élégant » | Sombre – aspect contemporain |
| Aucune préférence exprimée | Les deux – générez deux fichiers, laissez l'utilisateur choisir |
Voir design-system.md Section 9 pour les jetons complets du thème sombre, ou Section 1 pour les jetons du thème clair.
Format de sortie
Produisez toujours un fichier HTML unique autonome avec :
<!DOCTYPE html>+<html lang="fr">- Balises
<link>Google Fonts dans<head> - Tout le CSS dans un seul bloc
<style> - Tout le contenu dans
<body>– pas de JavaScript nécessaire
Types de cartes disponibles
| Carte | Utilisation | Fonctionnalité clé |
|---|---|---|
| Hero | Slogans, titres | Bordure supérieure dégradée, s'étend sur 2 lignes |
| Stat | Nombres + libellés | Accent coloré par catégorie |
| Catégorie | Éléments groupés (phases, équipes, trimestres) | Étiquette de couleur + sous-titre + étiquettes |
| Graphique à barres | Croissance / comparaison dans le temps | Barres dégradées, badge d'en-tête |
| Badge | Attribution d'outil, appel mis en avant | Icône d'étiquette + nombre stat |
| Citation | Mission, témoignage | Fond sombre, texte blanc, <em> vert |
| Highlight | Nombre vedette (3x, 10x, 100%) | Fond entièrement dégradé |
Modèles de mise en page
| Modèle | Colonnes | Largeur | Ratio d'aspect | Idéal pour |
|---|---|---|---|---|
| A : Horizontale | 4 col | 1200px | 52/25 | 12-16 cartes, diapositives |
| B : Horizontale | 3 col | 1100px | 52/22 | 8-10 cartes, ciblé |
| C : Verticale | 2 col | 600px | aucun (contenu) | 8-14 cartes, réseaux sociaux |
Règles critiques : Grille sans espace
Ces 5 règles sont obligatoires pour une apparence de type Apple. Voir la section 2 de design-system.md pour les détails.
- NE JAMAIS définir
align-items: start– la valeur par défautstretchremplit les cellules - Utilisez
aspect-ratiosur les mises en page horizontales pour verrouiller la forme du conteneur - Lignes :
1frpour l'horizontal,autopour le vertical - Espacement :
6px(pas 8px) - Chaque cellule de la grille doit être occupée – pas de cellules vides
Export d'écran
Utilisez le script Playwright à l'emplacement scripts/screenshot.mjs pour capturer des PNG parfaits.
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
Modifiez le tableau pages dans screenshot.mjs pour pointer vers vos fichiers HTML. Chaque entrée a besoin de : file (chemin HTML), output (chemin PNG), viewportWidth (correspond à la largeur de la grille).
Critique : La zone d'affichage doit correspondre à la largeur de la grille. Si la zone d'affichage est plus large que la grille, la grille se centre et le clip peut couper le bord droit. Définissez toujours viewportWidth sur la largeur exacte de la grille CSS (1200 pour 4 col, 1100 pour 3 col, 600 pour 2 col).
Critique : Le clip doit utiliser la position de l'élément. Lors du clip sur l'élément de grille, utilisez box.x et box.y de boundingBox(), pas x: 0, y: 0. Si la grille est centrée dans une zone d'affichage plus large, x: 0 commencera le clip avant la grille et coupera le côté droit.
Après la capture, visualisez toujours l'image de sortie pour vérifier qu'aucun bord n'est coupé. Vérifiez que les cartes les plus à droite et en bas sont entièrement visibles avec leur bordure intacte.
Logos & Images
Les utilisateurs peuvent ajouter leurs propres logos ou images aux cartes de la grille bento. Demandez à l'utilisateur s'il a des logos ou images à inclure.
Options de placement :
| Emplacement | Comment faire | Idéal pour |
|---|---|---|
| Coin de la carte Hero | <img> avec position: absolute; top: 20px; right: 20px; width: 40px; | Logo de l'entreprise |
| Icône de la carte Badge | Remplacez le SVG dans .badge-pill par une balise <img> (width: 16px; height: 16px; border-radius: 4px;) | Logo d'outil/framework |
| Fond de carte entier | background-image: url(...) avec dégradé de superposition pour la lisibilité du texte | Captures d'écran de fonctionnalités |
| Carte image autonome | <img> remplissant la carte avec object-fit: cover; border-radius: 18px; | Photos de produits |
Recommandations :
- Utilisez
<img src="chemin/vers/fichier.png">avec un chemin de fichier local – le HTML est destiné à l'export d'écran, pas à l'hébergement - Gardez les logos petits (24–48px) pour qu'ils ne dominent pas la carte
- Pour le thème sombre, assurez-vous que les logos fonctionnent sur des fonds sombres (utilisez des versions blanches/claires)
- Ajoutez toujours un texte
altpour l'accessibilité
Adaptation du contenu
| Données de l'utilisateur | Modèle recommandé | Combinaison de cartes |
|---|---|---|
| 3–5 statistiques, pas de catégories | C (2 col vertical) | 1 Hero + 3–5 Stats + 1 Citation |
| 6–8 statistiques, 1–2 catégories | B (3 col horizontal) | 1 Hero + 4–6 Stats + 1–2 Catégories + 1 Graphique |
| 8–12 statistiques, 3+ catégories | A (4 col horizontal) | Mélange complet : Hero, Stats, Catégories, Graphique, Badge, Citation, Highlight |
| Réseaux sociaux / format portrait | C (2 col vertical) | N'importe quel mélange, polices plus petites |
Règle de densité : Chaque carte doit sembler pleine. Si une carte paraît clairsemée, ajoutez un sous-titre, un badge ou des étiquettes. Si la grille comporte de l'espace vide visible, soit étendez une carte sur plusieurs cellules, soit ajoutez une carte de support.
Liste de personnalisation
- Recueillez le contenu – statistiques, catégories, jalons, citations
- Choisissez le thème – clair, sombre ou les deux
- Choisissez la mise en page – 4 col, 3 col ou 2 col
- Nommez les zones de la grille – noms lisibles correspondant au contenu
- Sélectionnez les types de cartes – Hero, Stat, Catégorie, Graphique, Badge, Citation, Highlight
- Attribuez les couleurs d'accent – une par catégorie, maximum 3–4 accents
- Définissez les dimensions – la largeur de la zone d'affichage correspond à la largeur de la grille
- Verrouillez le ratio d'aspect – horizontal uniquement ; omettez pour le vertical
- Vérifiez la densité – pas de cartes vides, pas de cellules de grille inutilisées, espacement 6px
- Adaptez à l'orientation – le vertical obtient des polices, espacements et rayons plus petits
- Capture d'écran – Playwright en 2x, la zone d'affichage correspond à la largeur de la grille
Vérification
Après avoir généré un fichier HTML de grille bento :
- Ouvrez dans Chrome ou Safari – vérifiez que toutes les cellules de la grille sont remplies sans espace de ligne visible
- Vérifiez le chargement des polices – Sora et DM Sans doivent s'afficher (pas de secours système)
- Pour le thème sombre – vérifiez que les fonds des cartes sont #1a1a1a, pas #fff
- Capture d'écran à la bonne largeur de zone d'affichage (1200/1100/600) en résolution 2x
- Confirmez la densité – aucune carte ne doit avoir d'espace blanc excessif
Notes
- Google Fonts nécessite un accès Internet ; les grilles utilisent les polices système hors ligne
- La capture d'écran Playwright est optionnelle ; les utilisateurs peuvent faire des captures d'écran manuelles dans le navigateur
aspect-ratioest uniquement pour les mises en page horizontales ; les mises en page verticales s'adaptent à la hauteur du contenu- Maximum 3–4 couleurs d'accent par grille pour conserver la retenue d'Apple
- Cette compétence produit du HTML statique pour l'export d'écran, pas des tableaux de bord interactifs
- Pour les grilles avec moins de 6 points de données, le modèle C (2 col vertical) fonctionne généralement le mieux
Fichiers de référence
design-system.md– Jetons de design complets (clair + sombre), CSS/HTML des cartes, modèles de mise en page et squelettescripts/screenshot.mjs– Script de capture d'écran Playwright