navaigate-present

Que fait navaigate-present ?

Présentations interactives dans la charte graphique du membre. Le skill n'est livré avec aucune marque ni style prédéfini. Chaque présentation ressemble à la marque du membre, jamais à celle de NavAIgate. Avant la première présentation, il trouve le style souhaité : il pose des questions, analyse leur site et les sites qu'ils aiment, et leur montre des directions parmi lesquelles choisir.

Ce que chaque présentation conserve, quelle que soit la marque :

• Une idée par écran. Les mots sont à gauche : un label, un titre qui s'affiche mot par mot avec une phrase d'accent, et un court paragraphe simple. Une démo canvas en direct se trouve à droite.
• La démo enseigne par la pratique. Le présentateur presse, glisse ou bascule un élément, et l'écran répond immédiatement : les nombres comptent, les graphiques se redessinent, les cartes glissent vers de nouveaux emplacements. Chaque changement est progressif, rien ne saute.
• Rien n'est jamais inactif. Chaque démo rejoue son arrivée lorsque la diapositive apparaît, et conserve un mouvement doux en attendant. L'arrière-plan de la page se déplace lentement et ondule là où vous cliquez.
• Cela fonctionne comme une présentation. La flèche vers le bas (ou Espace, Page suivante ou flèche droite) passe exactement à une diapositive. Haut et gauche reviennent en arrière, Début et Fin sautent aux extrémités. F passe en plein écran. La progression par groupes se trouve en bas, la barre du haut nomme la diapositive, et une diapositive de carte permet d'accéder à n'importe quelle section. Cela provient de template/core.js : ne jamais le modifier dans une diapositive.
• C'est testé comme un film. Chaque diapositive est capturée à trois tailles et chaque contrôle est pressé. Rien ne se chevauche, ne se coupe ou ne génère d'erreur.

Parlez simplement : la plupart des membres ne sont pas programmeurs. Dites ce qui se passe en une ligne avant chaque étape, et gardez les commandes pour vous sauf s'ils les demandent. Leurs marques vivent dans leur propre dossier, ~/.navaigate-present/brands/, donc la mise à jour de ce skill ne les touche jamais.

0. Quelle marque ?

Exécutez python -I scripts/brand.py list.

• Aucune marque encore, ou ils en veulent une nouvelle : faites d'abord la configuration (sections 1 à 4). Cela prend environ 15 minutes.
• Une marque : utilisez-la. Plusieurs : demandez laquelle, sauf si la demande le rend évident.

1. Questions

Dites-leur ce qui va se passer : quelques questions, un coup d'œil sur leur site web et les styles qu'ils aiment, puis deux ou trois directions parmi lesquelles choisir. Posez les questions avec AskUserQuestion (un seul appel, quatre questions) :

1. Quelle ambiance ? Calme et premium / Audacieux et énergique / Amical et chaleureux / Propre et technique.
2. Clair ou sombre ? Clair / Sombre / Correspond à mon site web / Montre-moi les deux.
3. Coins sur les boutons et les tags ? Entièrement arrondis (pilules) / Légèrement arrondis / Carrés / Correspond à mon site web.
4. Arrière-plan derrière les diapositives ? Une grille de points douce / Un fin quadrillage / Des lignes de papier millimétré / Uni.

Puis demandez dans le chat, en un seul message :

• le nom de la marque et son site web ;
• le logo (un chemin de fichier, ou glissez-le). Le SVG est idéal, sinon un PNG avec fond transparent. Dites qu'il peut provenir du site web s'ils n'ont pas le fichier ;
• les directives de marque s'ils en ont (un PDF ou un lien) ;
• un à trois styles qu'ils adorent : sites web, présentations, marques ou captures d'écran, même d'autres secteurs. Dites que cela peut être tout ce à quoi ils aimeraient que leurs diapositives ressemblent ;
• tout ce qu'ils ne veulent jamais voir (par exemple pilules, emojis ou néon) ;
• à qui s'adressent les présentations, en une ligne ;
• où sauvegarder les présentations (suggérez un dossier <Marque> presentations dans leurs Documents).

2. Recherche

1. Leur site et leurs favoris. Exécutez python -I scripts/research.py "~/.navaigate-present/research/<slug>" <leur site web> <chaque référence>. Pour chaque site, il enregistre une capture d'écran du premier écran et de la page, ainsi que les logos trouvés dans l'en-tête. Il mesure également les polices, les couleurs de fond et de texte, les couleurs d'accent, les coins et le style de label réellement utilisés par la page. Regardez chaque capture d'écran. Les chiffres disent ce qu'il y a, et les images disent comment cela se ressent.
2. Leurs directives, s'ils les ont envoyées. Lisez le PDF : ses couleurs, polices et règles l'emportent sur tout ce qu'un site web montre.
3. Pas de site web ni de favoris ? Recherchez sur le web trois ou quatre sites bien conçus dans leur domaine et étudiez-les, pour inspiration uniquement. Si Firecrawl est connecté, firecrawl_search les trouve, et le scraping avec formats: ["branding"] donne une seconde lecture des couleurs et polices d'un site.
4. Dites-leur ce que vous avez trouvé, en mots simples et quelques lignes. Par exemple : « Votre site utilise un vert profond sur crème, avec une police serif pour les titres. La présentation que vous aimez est sombre, utilise des coins carrés et beaucoup d'espace. »

Ce qu'il faut retenir d'un favori : son ambiance (clair ou sombre, quantité d'espace, caractère typographique, coins, utilisation de la couleur). Ne jamais prendre son logo, noms de produits, mots ou mise en page exacte. Les couleurs, logo et nom du membre restent les siens.

3. Directions

Créez deux ou trois marques provisoires dans ~/.navaigate-present/drafts/<slug>-a, -b et -c. Chacune reçoit un brand.json (voir references/BRAND.md), une copie du logo, et un nom de "direction" de quelques mots. Par exemple :

• A, fidèle à votre marque : les couleurs, polices et coins de leur propre site.
• B, plus proche de : leurs couleurs et logo, avec le mode, le caractère typographique, les coins et l'arrière-plan du favori.
• C, une alternative : un contraste clair, par exemple sombre si A est clair, ou un autre appariement typographique. Doit toujours rester cohérent avec la marque.

Suivez leurs réponses : l'ambiance, clair ou sombre, les coins et l'arrière-plan. Là où ils ont dit « correspond à mon site web », utilisez ce que la recherche a mesuré. Ensuite :

1. Exécutez python -I scripts/brand.py check <dossier provisoire> pour chacun, et corrigez chaque ligne PROBLÈME.
2. Exécutez python -I scripts/brand.py compare <provisoire a> <provisoire b> [<provisoire c>]. Cela construit la diapositive d'ouverture et une diapositive de graphique dans chaque direction et les dispose côte à côte dans une seule image, directions.png.
3. Montrez-leur l'image et le chemin complet du index.html de chaque direction, afin qu'ils puissent naviguer dedans. Demandez laquelle ils préfèrent, ou quoi mélanger (« les couleurs de A avec la typographie de B »). Ajustez et comparez à nouveau jusqu'à ce qu'une direction soit bonne.

4. Sauvegarder la marque

1. Écrivez la direction choisie, avec leurs modifications, dans ~/.navaigate-present/brands/<slug>/ (brand.json, logo et fichiers de polices éventuels).
2. Exécutez python -I scripts/brand.py check <slug>, puis python -I scripts/brand.py sample <slug>. Cela construit les cinq diapositives d'exemple dans la marque et les capture.
3. Montrez la planche contact et donnez le chemin complet du index.html de l'échantillon. Lorsqu'ils sont satisfaits, la configuration est terminée, et chaque future présentation utilisera cette marque.

5. Créer une présentation

1. Brief. À qui elle s'adresse, ce qu'ils doivent retenir, nombre approximatif de diapositives, où elle est projetée, et les faits qu'elle peut utiliser. Utilisez uniquement les faits que le membre vous donne ou que vous pouvez sourcer. N'inventez jamais une fonctionnalité, un chiffre ou une citation.
2. Plan. Exécutez python -I scripts/new_deck.py "<dossier présentation>" "<titre>" <slug marque>. Cela démarre la présentation avec les diapositives d'exemple. Ensuite, écrivez _build/deck.json : les groupes (ils deviennent la barre de progression) et l'ordre des diapositives. Pour chaque diapositive, décidez la chose unique que le présentateur pressera et ce qu'elle prouve. Une diapositive sans rien à presser est une diapositive faible.
3. Texte. Écrivez le label, headline, hl et body de chaque diapositive en un seul passage, afin que la présentation ait une voix unique, dans la voix de la marque depuis brand.json. Les titres font 5 à 10 mots, avec hl (2 à 4 mots) à l'intérieur du titre. Les corps font au maximum environ 45 mots. Mots simples et phrases courtes, sans tirets cadratins ni « tirer parti », « seamless » ou « unlock ». Si les compétences d'écriture et d'humanisation sont installées, utilisez-les.
4. Construction. Construisez chaque diapositive selon references/SLIDE-BUILDER.md. Les diapositives sont des dossiers séparés, afin que les assistants puissent les construire en parallèle. Donnez à chaque assistant ce cahier des charges, ses identifiants de diapositives, le slug de la marque, les faits et une idée de démo par diapositive.
5. Test. Exécutez python -I scripts/build.py "<présentation>", puis python -I scripts/shoot.py "<présentation>" 1920 1080, puis la même chose à 1440 900 et 1280 720. Chaque exécution doit afficher missing copy: none, fit: clean et console: clean. Regardez chaque capture d'écran, y compris celles prises après avoir pressé chaque contrôle.
6. Révision. Lisez chaque diapositive comme le ferait le public. La démo prouve-t-elle le titre ? Les mots sont-ils simples et vrais ? Les chiffres d'exemple s'additionnent-ils, et sont-ils étiquetés « Exemples de chiffres » ? Vérifiez la liste never de la marque.
7. Livraison. Donnez le chemin complet du index.html de la présentation. C'est un fichier unique qui fonctionne hors ligne, à part Google Fonts, plus assets/ si une diapositive charge des images.

Règles

• Les couleurs et polices proviennent uniquement de la marque. En CSS, utilisez les tokens (--accent, --accent-ink, --s1, --text, --muted, --line et les autres). Dans canvas, utilisez E.COL et E.FONT, E.HEAD et E.LABEL. Ne tapez jamais une couleur hexadécimale dans une diapositive : c'est ce qui permet à une diapositive de fonctionner dans toutes les marques.
• Les mots d'accent utilisent --accent-ink (ou E.COL.accentInk), l'accent ajusté jusqu'à ce qu'il soit lisible sur le fond. Les remplissages utilisent --accent, et les mots sur un remplissage accentué utilisent --on-accent.
• Les coins suivent la marque. Utilisez var(--rp) pour les boutons et tags, var(--r) pour les cartes, et E.R dans canvas. Ne tapez jamais 999px.
• Le logo est toujours le fichier réel du membre, intégré par la construction (<!--LOGO--> dans une section). Ne le redessinez jamais et ne demandez jamais à un générateur d'images de le créer. Sans fichier logo, le nom de la marque est défini dans sa police de titre. Donnez au logo une boîte fixe et faites-le tenir à l'intérieur (object-fit: contain).
• Les chiffres sont réels ou étiquetés. Les maths d'exemple doivent s'additionner et indiquer « Exemples de chiffres ».
• L'argent et les nombres utilisent la locale et la currency de la marque (E.money, E.num). La langue est celle de la marque (anglais britannique par défaut).

Fichiers

• template/page.html : la coque et tout le système de conception CSS, entièrement en tokens de marque.
• template/engine.js (E) : le kit de dessin (courbes, cartes, texte, labels, curseur, ondulation, graduations, lignes de graphiques lisses, grilles, argent, arrière-plans).
• template/core.js (P) : copie, le titre mot par mot, étapes, clavier et progression, contrôles, boucle.
• scripts/research.py : captures d'écran et mesures des sites web.
• scripts/brandkit.py : transforme brand.json en tokens, polices et logo, avec vérification de contraste.
• scripts/brand.py : liste, vérifie, compare et échantillonne les marques.
• scripts/new_deck.py démarre une présentation, scripts/build.py en construit une, et scripts/shoot.py en teste une.
• references/BRAND.md : le format brand.json. references/SLIDE-BUILDER.md : le contrat de diapositive et les règles de démo (donnez-le à chaque assistant).
• examples/slides/ : start (le dévoilement du logo), path (la carte), idea (curseurs pilotant un graphique), switch (un avant-après qui se réorganise) et close. Ce sont les standards que chaque nouvelle diapositive doit respecter.

Leçons déjà apprises

• </script n'importe où dans du code intégré, même dans un commentaire, termine prématurément le script de la page. build.py l'échappe.
• Le pas d'une entrée de plage doit tomber sur sa valeur par défaut, sinon le navigateur l'accroche au pas le plus proche.
• Un logo donné uniquement avec une largeur et une hauteur maximale dépasse sa boîte, et le masque du dévoilement le coupe alors. Donnez-lui une largeur et une hauteur, et faites-le tenir à l'intérieur.
• Les contrôles que shoot.py presse ne doivent jamais être vraiment disabled. Utilisez plutôt aria-disabled="true".
• Certaines polices Google manquent de graisses (Space Mono n'a que 400 et 700). brand.py check trouve les graisses disponibles pour chaque police et les sauvegarde.
• De nombreuses marques gardent leurs boutons en noir et placent la couleur d'accent sur les mots et les icônes. research.py regarde aussi là, donc lisez sa liste d'accents en parallèle des captures d'écran.
• Les documents « ici » dans un shell peuvent manger les barres obliques inverses et les guillemets. Écrivez les fichiers de diapositive et les scripts avec un outil d'écriture de fichier.