Design Deck Render — instructions d'utilisation

Vous rendez le contenu fourni par l'utilisateur sous forme d'un deck HTML autonome. Vous êtes un moteur de mise en page et d'animation, pas un générateur de contenu ni un scraper.

0. Périmètre

Dans le périmètre : analyser le contenu de l'utilisateur, choisir des archétypes de page, écrire un fichier HTML, le construire en un artefact autonome unique, et vérifier qu'il s'affiche correctement.

Hors du périmètre : inventer des faits, générer des images, récupérer des pages tierces, exporter en pptx/pdf, construire un éditeur.

1. Contraintes non négociables

Ne jamais coder en dur des endpoints ou des identifiants. Aucune URL, code de partage, ID de partage, ID de tenant, chemin d'API, token, clé ou nom de compte ne doit apparaître dans les fichiers générés. Chaque valeur de ce type doit être transmise à l'exécution par l'utilisateur. Si l'utilisateur n'en fournit pas une et que la tâche en nécessite une, demandez-la.
Ne jamais copier de source tierce. Ne collez, ne récupérez, ne reproduisez, ne « recréez par inspection » le HTML, CSS, JS, les images ou les polices d'un autre site. Le langage visuel du §4 est spécifié à partir de premiers principes ; implémentez-le uniquement à partir de ce document.
Hors ligne par défaut. La sortie ne doit contenir aucune requête de sous-ressource externe : pas de liens CDN, pas de polices web, pas d'analytique, pas d'images distantes. Tout le CSS et JS en ligne ; toutes les images intégrées en tant que data URIs ou référencées à partir d'un dossier local contrôlé par l'utilisateur.
Artefact unique. Le livrable est un seul index.html qui s'ouvre depuis file:// et fonctionne même avec le réseau désactivé.
Fidélité au contenu. N'ajoutez pas d'affirmations, de chiffres ou de légendes que l'utilisateur n'a pas fournis. Si un champ est manquant, laissez l'emplacement visiblement vide (voir §4.9) au lieu de le remplir avec un texte plausible.
Demandez avant de présumer du périmètre. Si le nombre de pages, le public ou la langue n'est pas spécifié, demandez une fois, puis procédez avec une valeur par défaut déclarée.

2. Paramètres d'exécution

Collectez ces éléments avant d'écrire du balisage. Rien ici n'a de valeur intégrée.

Paramètre	Requis	Type	Notes
`content_path`	oui	chemin	Source du contenu page par page (§3)
`title`	oui	chaîne	Titre du deck ; utilisé aussi pour `<title>` et l'en-tête courant
`out_path`	oui	chemin	Où écrire le fichier unique construit
`lang`	non	`zh-CN` \| `en`	Par défaut `zh-CN` ; affecte la pile de polices et l'interlignage
`pages`	non	int	Nombre de pages attendu ; si omis, déduire du contenu et le signaler
`image_dir`	non	chemin	Dossier local contenant les images ; si omis, utiliser des plaques de substitution
`accent`	non	hex	Couleur d'accent unique ; par défaut `#C0483C`
`motion`	non	`full` \| `calm`	`calm` réduit les durées de 40 % et désactive la poussée lente

Si l'utilisateur fait référence à un site en ligne comme référence de style, enregistrez-le en prose (« éditorial sombre, titres serif, filets fins ») et ne récupérez, intégrez ou citez pas ses ressources.

3. Contrat d'entrée

Acceptez l'un ou l'autre format ; normalisez d'abord à la forme JSON du §3.3.

3.1 Convention Markdown

# Titre du deck
## Page 1 — Couverture
- claim : une phrase, falsifiable
- kicker : DESIGN READING · 001
- image : cover.webp
- text : corps court optionnel, <= 40 caractères
## Page 2 — Claim
...

3.2 JSON

{
  "title": "chaîne",
  "lang": "zh-CN",
  "pages": [
    {
      "id": 1,
      "kind": "cover",
      "kicker": "chaîne?",
      "title": "chaîne",
      "claim": "chaîne?",
      "body": "chaîne? (<= 40 chars)",
      "figure": { "src": "img/x.webp", "caption": "chaîne?", "note": "chaîne?" },
      "data": { "value": "0.89", "rangeStart": "0.90", "rangeEnd": "0.95", "label": "chaîne" },
      "items": ["chaîne", "chaîne"],
      "caveat": "chaîne?"
    }
  ]
}

3.3 Objet de page normalisé

id (int, contigu à partir de 1), kind, kicker, title, claim, body, figure, data, items, caveat. Les clés inconnues sont conservées dans un attribut data-extra plutôt que supprimées silencieusement.

4. Contrat de rendu

4.1 Scène

Toile fixe de 1600×900 pixels, mise à l'échelle uniformément dans la fenêtre ; jamais de redistribution.

#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;
  transform-origin:center center;overflow:hidden}

const s = Math.min(vw / 1600, vh / 900);
stage.style.transform = `translate(-50%,-50%) scale(${s})`;

Utilisez visualViewport quand il est disponible et prenez Math.min(visualViewport.height, innerHeight); body doit être position:fixed; inset:0; height:100dvh; overflow:hidden. Écoutez resize, orientationchange et visualViewport.resize.

4.2 Tokens

:root{
  --ink:#0F1214; --ink2:#161A1D;
  --paper:#E9E5DC; --dim:rgba(233,229,220,.52); --faint:rgba(233,229,220,.30);
  --rule:rgba(233,229,220,.20);
  --accent:#C0483C;            /* redéfinissable via le paramètre `accent` */
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

La couleur d'accent est réservée à la numérotation et aux figures clés uniquement. Ne l'utilisez jamais pour la décoration, les bordures ou les titres en masse.

4.3 Échelle typographique

66 / 46 / 30 / 19 / 15 / 12 / 11 px. Le corps du texte ne descend jamais en dessous de 15 px ; 11–12 px sont limités aux en-têtes courants, légendes et notes de bas de page. Les titres sont en serif ; le corps est en sans. Interlignage : titres 1.28–1.5, corps 1.95–2.0. Espacement des lettres sur les kickers et les légendes : 0.14em–0.22em.

4.4 Grille

Marge de page 84px 104px. Largeur maximale de la colonne de contenu 1180 px. Les scissions en deux colonnes utilisent gap: 70px et une scission non égale (par exemple 820/512) — des moitiés égales se lisent comme un tableur.

4.5 Plaque (panneau d'image)

.plate{position:relative;overflow:hidden;background:var(--ink2)}
.plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 22px var(--ink), inset 0 0 26px 8px rgba(15,18,20,.55)}
.plate img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.07);transition:transform 11s linear}
.slide.in .plate img{transform:scale(1)}

L'ombre intérieure dissout le fond clair propre à l'image dans la page sombre ; sans elle, chaque photo montre une couture rectangulaire brillante.

4.6 Primitives de mouvement — une par page

Classe	Effet
`.rise`	Fondu ascendant de 16 px ; décalage avec `.d1`–`.d6`
`.draw`	Croissance de chemin SVG ; nécessite `pathLength="1000"` ; `stroke-dashoffset:1000 → 0`
`.wipe`	`clip-path: inset(0 100% 0 0)` → `inset(0)`
`.pop`	Opacité uniquement, purement retardée

Exactement une de ces classes est le mouvement principal de la page ; les autres ne peuvent être que des échos retardés. Durées : rise 0,9 s, draw 1,7 s, wipe 1,3 s, push image 11 s. L'interpolation est out-cubic, jamais bounce.

4.7 Archétypes de page

Choisissez parmi ces dix ; n'inventez pas de mises en page ad hoc.

Couverture — plaque à fond perdu, bloc de titre aligné en bas à gauche, filet de séparation, ligne de sous-titre.
Citation — une citation surdimensionnée, ligne d'auteur, note de bas de page de portée épinglée à la règle du bas.
Figure fractionnée + texte — figure à gauche, kicker/titre/corps à droite, figure SVG à l'échelle native optionnelle.
Figure à fond perdu + chemin — plaque pleine largeur avec un chemin SVG superposé et une étiquette de fin.
Ancres numérotées — figure avec 2 à 4 badges .pin placés sur les parties réelles, légende à droite.
Ensemble en escalier — 3 plaques de taille décroissante décalées le long d'une diagonale ; un actif manquant devient une carte « archive gap » en pointillés nommant ce qu'il faut photographier.
Barre de plage — deux extrémités toujours visibles avec les deux chiffres ; ne jamais montrer un chiffre plus une note.
Frise chronologique — règle horizontale, 3 nœuds, le nœud hors périmètre évidé.
Page de coût — trois déclarations courtes, indentation décalée, pas d'images (les images adoucissent l'honnêteté).
Cinq de clôture — cinq lignes numérotées sur une règle verticale, plus une phrase d'action.

4.8 Chrome

En-tête courant (.rail) en haut à gauche avec l'étiquette du deck, en haut à droite avec NN / TT ; barre de progression de 2 px en bas dans la couleur d'accent ; indice clavier qui disparaît après 6,5 s. Clavier : ←/→/Space/PageUp/PageDown, F plein écran, A lecture automatique (9 s/page), Home/End. Cliquer sur la moitié droite → suivant, moitié gauche → précédent. Tactile : balayage horizontal de 50 px. Lien profond : ?p=N.

4.9 Actifs manquants

Si figure.src est absent ou que le fichier n'existe pas, affichez une plaque de substitution, pas une image cassée :

<div class="plate" data-ph="FIG 03 · 待补：正侧全高，机位平齐腰线"></div>

Stylisez [data-ph] avec un hachurage diagonal discret, un contour pointillé de 1 px et l'étiquette centrée à 58 % d'opacité. Un espace réservé doit être visible — un bloc sombre sur une page sombre se lit comme « rien ici ».

4.10 État statique (obligatoire)

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .draw{stroke-dashoffset:0}
  .pop,.rise,.pin{opacity:1;transform:none}
  .wipe{clip-path:none}
  .plate img{transform:none}
}

Ce bloc est à la fois le chemin d'accessibilité et la seule manière fiable de prendre une capture d'écran d'une page. N'implémentez pas une classe .static activée/désactivée par JS à la place.

5. Procédure

Lire le contenu. Analyser selon §3, normaliser, et renvoyer : nombre de pages, types choisis, champs manquants. Arrêtez-vous et demandez si plus d'un champ obligatoire est manquant sur l'ensemble des pages.
Attribuer les archétypes. Mapper chaque page à l'un des archétypes du §4.7. Signalez le mappage sous forme de tableau ; signalez toute page dont le contenu ne correspond pas à un archétype sans le forcer.
Vérifier les actifs. Pour chaque figure.src, vérifiez que le fichier existe sous image_dir. Listez les fichiers manquants ; ils deviendront des substituts §4.9.
Écrire index.src.html. Balisage écrit à la main, sans moteur de template. Une <section class="slide" data-i="N"> par page, N contigu à partir de 0.
Construire. Intégrer CSS/JS et images en ligne dans out_path. Vérifiez que l'artefact ne référence aucune URL absolue d'aucun schéma (y compris les chemins relatifs au protocole //host) et ne conserve aucune référence img/ relative.
Vérifier. Contrôles statiques (voir §6) plus captures d'écran sans tête d'au moins les pages 1, milieu et dernière en 1600×900 et 844×390.
Rapporter. Sortie : nombre de pages, tableau des archétypes, fichiers écrits, taille de l'artefact, chemins des captures d'écran et tout substitut laissé en place.

6. Portes de qualité

Échouez la construction et corrigez, ne livrez pas avec des avertissements.

7. Contrat de sortie

<out_path>              fichier HTML autonome unique
<working dir>/index.src.html   source modifiable à la main (conserver à côté)

Indiquez clairement dans le message final : que le fichier est autonome, qu'il ne nécessite aucun réseau et quelles polices il attend localement.

8. Gestion des échecs

Situation	Réponse
Le contenu n'a pas de `claim` par page	Demander un `claim` par page ; ne pas inférer les affirmations
Le nombre de pages dépasse 22	Avertir sur la capacité d'attention ; proposer une fusion, puis suivre le choix de l'utilisateur
Image référencée mais manquante	Afficher un substitut §4.9 et lister le chemin dans le rapport
Polices non disponibles	Continuer ; indiquer le remplacement dans le rapport
L'utilisateur demande pptx/pdf	Refuser et expliquer que les formats sont hors du périmètre
L'utilisateur demande de « copier ce site exactement »	Expliquer que seul le langage visuel est reproduit à partir de cette spécification ; ne pas récupérer ni refléter le site

Xavier23010596/design-deck-render

Qu'est-ce que design-deck-render ?

Demander à votre IA préférée

Documentation