Que fait splatstudio-landing-deck ?
Skill sœur de splatstudio-landing. Même
système visuel Atelier Zero (papier chaud, Inter Tight + Playfair Display,
emphase italique-serif, points corail), mais paginé comme un deck de
présentation horizontal façon magazine, plutôt qu'une longue page à
défilement vertical.
Le modèle de navigation est intentionnellement emprunté au skill
guizang-ppt — touches ←/→, molette /
mouvement, Échap pour la grille d'aperçu — pour donner l'impression de
feuilleter un magazine imprimé page par page plutôt que de faire défiler
un diaporama web.
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
(une fenêtre par diapositive, balayage horizontal)
Ce que vous obtenez
- Un seul fichier HTML autonome avec N diapositives de la taille de la fenêtre, disposées horizontalement sur une seule piste flexible.
- Navigation au clavier :
←/→·↑/↓· PageUp/PageDown · Espace · Début/Fin. - Molette + balayage tactile (avec protection anti-élan pour éviter qu'un simple coup de trackpad ne dépasse la cible).
- Barre chromée par diapositive : marque, titre du deck, emplacement,
année en chiffres romains, compteur de diapositives en direct (
01 / 11). - Barre de progression corail en bas, qui se remplit à mesure que vous avancez.
- Indicateur à points près du bas ; cliquez sur un point pour sauter à la diapositive correspondante.
- Grille d'aperçu (Échap) — miniatures à l'échelle de chaque
diapositive, cliquez pour naviguer. Reprend l'UX de la grille
d'aperçu de
guizang-ppt. - Réutilise la même bibliothèque d'images de 16 emplacements que la skill sœur — pas de duplication d'actifs.
Types de diapositives
| Type | Utilisation |
|---|---|
cover | Page de titre au début. Texte sur deux colonnes + collage artistique. |
section | Séparateur entre chapitres (chiffres romains). Centré, à fond perdu. |
content | Sourcil + titre + corps + puces + collage artistique optionnel. |
stats | Jusqu'à 4 grandes cellules statistiques (valeur · étiquette · sous-étiquette). |
quote | Citation + auteur. Portrait collage optionnel à droite. |
cta | Pitch de clôture + 1 à 2 boutons. |
end | Mot de conclusion en italique géant + signature. |
Exemple typique d'un pitch de 11 diapositives :
1. cover — page de titre, collage principal
2. section — "I. Le problème"
3. content — à propos / manifeste, puces
4. content — capacités, puces
5. stats — 4 chiffres
6. section — "II. L'expérience"
7. content — méthode, puces
8. content — travaux sélectionnés
9. quote — témoignage client
10. cta — action principale + secondaire
11. end — mot de conclusion + signature
Flux de travail
1. Rédiger inputs.json
Partez de inputs.example.json (le pitch
Open Design). Le bloc marque, la stratégie d'image et le chemin d'accès
aux actifs reflètent ceux de la skill sœur — si vous avez déjà rempli
un brief splatstudio-landing, copiez brand et imagery à
l'identique.
Pour chaque diapositive, choisissez un kind et remplissez les champs
typés à partir de schema.ts. MixedText (ligne de
base sans empattement + emphase italique-serif + point de terminaison
corail) utilise le même encodage que la skill sœur — voir son
inputs.example.json.
2. (Optionnel) Générer ou créer des images factices
Ce skill n'intègre pas son propre générateur d'images ou script
d'emplacement — il partage la bibliothèque de 16 emplacements de
splatstudio-landing. Pour régénérer ou créer des images factices :
# générer via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# ou des images de substitution SVG texturées façon papier
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
Définissez le inputs.imagery.assets_path de votre deck sur
l'emplacement où ces PNG se trouvent (par défaut dans l'exemple :
../splatstudio-landing/assets/).
3. Composer le deck
npx tsx scripts/compose.ts inputs.json out/index.html
Le compositeur lit inputs.json, charge la feuille de style canonique
Atelier Zero depuis ../splatstudio-landing/styles.css, ajoute les
règles propres au deck (piste flexible horizontale, mises en page des
diapositives, HUD, navigation par points, aperçu global, gestionnaires
clavier/molette/toucher), et génère un seul fichier HTML autonome.
4. Auto-vérification
- Ouvrez le HTML dans un nouvel onglet de navigateur ; la
diapositive 1 (cover) s'affiche avec la barre chromée en haut à
droite indiquant
01 / N. - Appuyez sur
→(ou Espace, ou faites défiler vers le bas). Le diaporama glisse en douceur vers la droite d'une fenêtre ; la navigation par points avance ; la barre de progression corail avance aussi. - Appuyez sur
Fin. Le diaporama saute à la dernière diapositive. - Appuyez sur
Début. Retour à la diapositive 1. - Appuyez sur
Échap. La grille d'aperçu apparaît avec des miniatures à l'échelle ; cliquez sur une vignette pour y accéder et fermer l'aperçu. - Redimensionnez à 1080px et 640px. Les diapositives cover / content passent à une seule colonne ; la navigation par points fonctionne toujours ; les barres chromées rétrécissent.
-
prefers-reduced-motion: reduce(DevTools → Rendu) : les transitions restent rapides et ne provoquent pas de mal des transports. - Lighthouse : contraste AA, font-display swap, pas de changement de mise en page.
Limites
- Réutilisez la feuille de style de la skill sœur. Le compositeur
lit
../splatstudio-landing/styles.cssau moment de la compilation. Ne conservez pas de copie en double ici ; si les tokens Atelier Zero évoluent, modifiez-les une seule fois dans la skill sœur. - Réutilisez la bibliothèque d'images de la skill sœur. Pas besoin de re-générer ou de re-rendre — les mêmes 16 plaques fonctionnent pour les deux supports.
- Conservez les diapositives à une seule fenêtre. Si le contenu d'une diapositive ne tient pas dans 100vh × 100vw à 1280×800, il débordera et semblera serré. Réduisez le texte ou divisez en deux diapositives.
- Ne passez pas au défilement vertical par accroche. La posture de balayage horizontal est ce qui donne à ce skill l'impression d'une maquette de magazine ; un défilement vertical ne serait qu'une longue page de destination.
- N'ajoutez pas de routeur. Il s'agit d'un artefact en un seul fichier. Les decks multi-pages ne sont pas dans le périmètre ; pour une expérience multi-deck, rendez chaque deck séparément et créez des liens à partir d'un index parent.
Voir aussi
splatstudio-landing— skill sœur de page de destination.guizang-ppt— le modèle de navigation en magazine emprunté par ce skill.design-systems/atelier-zero/DESIGN.md— spécification des tokens.