navaigate-present

Was macht navaigate-present?

Interaktive Präsentationen in der eigenen Marke des Mitglieds. Der Skill wird ohne Marke und ohne Hausstil ausgeliefert. Jedes Deck sieht aus wie die Marke des Mitglieds, niemals wie die von NavAIgate. Vor dem ersten Deck findet er den gewünschten Stil: Er fragt, erforscht die Website des Mitglieds und die Seiten, die es mag, und zeigt Richtungen zur Auswahl.

Was jedes Deck unabhängig von der Marke beibehält:

• Eine Idee pro Bildschirm. Die Wörter stehen links: eine Beschriftung, eine Schlagzeile, die Wort für Wort mit einer Akzentphrase erscheint, und ein kurzer einfacher Absatz. Rechts befindet sich eine Live-Canvas-Demo.
• Die Demo lehrt durch Handeln. Der Vortragende drückt, zieht oder schaltet eine Sache um, und der Bildschirm antwortet sofort: Zahlen zählen neu, Diagramme zeichnen sich neu, Karten gleiten an neue Orte. Jede Änderung ist abgemildert, sodass nichts springt.
• Nichts ist jemals tot. Jede Demo wiederholt ihr Erscheinen, wenn die Folie in den Blick kommt, und behält eine sanfte Bewegung bei, während sie wartet. Der Seitenhintergrund bewegt sich langsam und wellt sich, wo Sie klicken.
• Es läuft wie ein Vortrag. Der Pfeil nach unten (oder die Leertaste, Bild-ab oder der rechte Pfeil) bewegt genau eine Folie. Pfeil nach oben und links gehen zurück, Pos1 und Ende springen zu den Enden. F schaltet Vollbild. Der gruppierte Fortschritt verläuft unten, die obere Leiste nennt den Folientitel, und eine Kartenfolie springt überall hin. Das stammt aus template\core.js: Ändern Sie es nie in einer Folie.
• Es wird getestet wie ein Film. Jede Folie wird auf drei Größen gescreenshottet und jedes Bedienelement wird gedrückt. Nichts überlappt, beschneidet oder wirft einen Fehler.

Sprechen Sie klar: Die meisten Mitglieder sind keine Programmierer. Sagen Sie in einer Zeile, was als Nächstes passiert, und behalten Sie die Befehle für sich, es sei denn, sie fragen danach. Ihre Marken leben in einem eigenen Ordner, ~/.navaigate-present/brands/, sodass ein Update dieses Skills sie nie berührt.

0. Welche Marke?

Führen Sie python -I scripts\brand.py list aus.

• Noch keine Marken vorhanden oder es soll eine neue erstellt werden: Führen Sie zuerst Setup (Abschnitte 1 bis 4) durch. Das dauert etwa 15 Minuten.
• Eine Marke: Verwenden Sie sie. Mehrere: Fragen Sie, welche, es sei denn, die Anfrage macht es offensichtlich.

1. Fragen

Sagen Sie ihnen, was als Nächstes passiert: ein paar Fragen, ein Blick auf ihre Website und die Stile, die sie mögen, dann zwei oder drei Richtungen zur Auswahl. Fragen Sie mit AskUserQuestion (ein Aufruf, vier Fragen):

1. Wie soll es sich anfühlen? Ruhig und edel / Kühn und energiegeladen / Freundlich und warm / Sauber und technisch.
2. Hell oder dunkel? Hell / Dunkel / Wie meine Website / Zeig mir beides.
3. Ecken bei Buttons und Tags? Vollständig abgerundet (Pillen) / Leicht abgerundet / Eckig / Wie meine Website.
4. Hintergrund hinter den Folien? Ein weiches Punkt-Raster / Ein feines Gitter / Linien wie Millimeterpapier / Einfarbig.

Fragen Sie dann im Chat in einer Nachricht:

• den Namen und die Website der Marke;
• das Logo (ein Dateipfad, oder ziehen Sie es hinein). SVG ist am besten, sonst ein PNG mit transparentem Hintergrund. Sagen Sie, dass es von der Website kommen kann, wenn sie die Datei nicht haben;
• Markenrichtlinien, falls vorhanden (ein PDF oder ein Link);
• einen bis drei Stile, die sie lieben: Websites, Präsentationen, Marken oder Screenshots, auch aus anderen Branchen. Sagen Sie, dass es alles sein kann, wie sie sich ihre Folien fühlen sollen;
• alles, was sie nie sehen wollen (z. B. Pillen, Emojis oder Neon);
• für wen die Präsentationen sind, in einem Satz;
• wo Decks gespeichert werden sollen (schlagen Sie einen Ordner <Marke>-Präsentationen in ihren Dokumenten vor).

2. Recherche

1. Ihre Website und ihre Favoriten. Führen Sie python -I scripts\research.py "~/.navaigate-present/research/<slug>" <ihre-website> <jede-referenz> aus. Für jede Website speichert es einen Screenshot des ersten Bildschirms und der gesamten Seite sowie alle Logos, die es im Header findet. Es misst auch die Schriftarten, Hintergrund- und Textfarben, Akzentfarben, Ecken und den Beschriftungsstil, den die Seite tatsächlich verwendet. Sehen Sie sich jeden Screenshot an. Die Zahlen sagen, was da ist, und die Bilder sagen, wie es sich anfühlt.
2. Ihre Richtlinien, falls gesendet. Lesen Sie das PDF: Seine Farben, Schriftarten und Regeln schlagen alles, was eine Website zeigt.
3. Keine Website und keine Favoriten? Suchen Sie im Web nach drei oder vier gut gestalteten Websites in ihrem Bereich und recherchieren Sie diese, nur zur Inspiration. Wenn Firecrawl verbunden ist, findet firecrawl_search sie, und Scraping mit formats: ["branding"] gibt eine zweite Lesung der Farben und Schriftarten einer Website.
4. Erzählen Sie ihnen, was Sie gefunden haben, in einfachen Worten und ein paar Zeilen. Zum Beispiel: „Ihre Website verwendet ein tiefes Grün auf Creme, mit einer Serife für Überschriften. Das Deck, das Sie lieben, ist dunkel und verwendet eckige Ecken und viel Platz.“

Was von einem Favoriten mitnehmen: sein Gefühl (hell oder dunkel, wie viel Platz, der Charakter der Schrift, Ecken, wie viel Farbe). Niemals sein Logo, Produktnamen, Wörter oder exaktes Layout übernehmen. Die eigenen Farben, das Logo und der Name des Mitglieds bleiben erhalten.

3. Richtungen

Erstellen Sie zwei oder drei Entwurfsmarken in ~/.navaigate-present/drafts/<slug>-a, -b und -c. Jede erhält eine brand.json (siehe references\BRAND.md), eine Kopie des Logos und einen "direction"-Namen aus ein paar Wörtern. Zum Beispiel:

• A, treu zu Ihrer Marke: Die eigenen Farben, Schriftarten und Ecken der Website.
• B, näher an : Ihre Farben und ihr Logo, mit dem Modus, Schriftcharakter, Ecken und Hintergrund des Favoriten.
• C, eine Alternative: Ein klarer Kontrast, z. B. dunkel, wenn A hell ist, oder eine andere Schriftkombination. Es muss immer noch markenkonform sein.

Folgen Sie ihren Antworten: dem Gefühl, hell oder dunkel, den Ecken und dem Hintergrund. Wo sie „Wie meine Website“ gesagt haben, verwenden Sie, was die Recherche gemessen hat. Dann:

1. Führen Sie python -I scripts\brand.py check <entwurfsordner> für jeden aus und beheben Sie jede PROBLEM-Zeile.
2. Führen Sie python -I scripts\brand.py compare <entwurf-a> <entwurf-b> [<entwurf-c>] aus. Es baut die Eröffnungs- und eine Diagrammfolie in jeder Richtung und legt sie nebeneinander in einem Bild, directions.png.
3. Zeigen Sie ihnen das Bild und den vollständigen Pfad des index.html jeder Richtung, damit sie es durchklicken können. Fragen Sie, welche ihnen gefällt oder was gemischt werden soll („A‘s Farben mit B‘s Schriftart“). Passen Sie an und vergleichen Sie erneut, bis eine richtig ist.

4. Marke speichern

1. Schreiben Sie die gewählte Richtung mit ihren Änderungen nach ~/.navaigate-present/brands/<slug>/ (brand.json, Logo und alle Schriftdateien).
2. Führen Sie python -I scripts\brand.py check <slug> und dann python -I scripts\brand.py sample <slug> aus. Das baut alle fünf Beispielfolien in der Marke und screenshottet sie.
3. Zeigen Sie das Kontaktblatt und geben Sie den vollständigen Pfad des index.html des Samples an. Wenn es ihnen gefällt, ist das Setup abgeschlossen, und jedes zukünftige Deck verwendet diese Marke.

5. Ein Deck erstellen

1. Brief. Für wen es ist, was sie mitnehmen müssen, grob wie viele Folien, wo es gezeigt wird, und die Fakten, die es verwenden darf. Verwenden Sie nur Fakten, die das Mitglied Ihnen gibt oder die Sie recherchieren können. Erfinden Sie nie ein Feature, eine Zahl oder ein Zitat.
2. Gliederung. Führen Sie python -I scripts\new_deck.py "<deck-ordner>" "<titel>" <marken-slug> aus. Es startet das Deck mit den Beispielfolien. Schreiben Sie dann _build\deck.json: die Gruppen (sie werden zur Fortschrittsleiste) und die Folienreihenfolge. Entscheiden Sie für jede Folie, was der Vortragende drücken wird und was es beweist. Eine Folie ohne etwas zum Drücken ist eine schwache Folie.
3. Text. Schreiben Sie label, headline, hl und body jeder Folie in einem Durchgang, damit das Deck eine Stimme hat, in der Stimme der Marke aus brand.json. Schlagzeilen sind 5 bis 10 Wörter, mit hl (2 bis 4 Wörter) innerhalb der Schlagzeile. Körper haben höchstens etwa 45 Wörter. Einfache Wörter und kurze Sätze, ohne Gedankenstriche und ohne „Hebelwirkung“, „nahtlos“ oder „freischalten“. Wenn die Schreibstil- und Humanizer-Skills installiert sind, verwenden Sie sie.
4. Bauen. Bauen Sie jede Folie gemäß references\SLIDE-BUILDER.md. Folien sind separate Ordner, sodass Helfer sie parallel bauen können. Geben Sie jedem Helfer dieses Runbook, seine Folien-IDs, den Marken-Slug, die Fakten und eine Demo-Idee pro Folie.
5. Testen. Führen Sie python -I scripts\build.py "<deck>", dann python -I scripts\shoot.py "<deck>" 1920 1080, dann dasselbe bei 1440 900 und 1280 720 aus. Jeder Durchlauf muss missing copy: none, fit: clean und console: clean ausgeben. Sehen Sie sich jeden Screenshot an, auch die nach dem Drücken jedes Bedienelements.
6. Überprüfen. Lesen Sie jede Folie so, wie das Publikum es tun würde. Beweist die Demo die Schlagzeile? Sind die Worte einfach und wahr? Stimmen die Beispielfiguren, und sind sie als „Beispielzahlen“ gekennzeichnet? Überprüfen Sie die never-Liste der Marke.
7. Ausliefern. Geben Sie den vollständigen Pfad des index.html des Decks an. Es ist eine Datei, die offline funktioniert, abgesehen von Google Fonts, plus assets/, wenn eine Folie Bilder lädt.

Regeln

• Farben und Schriftarten kommen nur von der Marke. Verwenden Sie in CSS die Tokens (--accent, --accent-ink, --s1, --text, --muted, --line und die restlichen). Verwenden Sie in Canvas E.COL und E.FONT, E.HEAD und E.LABEL. Geben Sie nie einen Hex-Farbwert in eine Folie ein: Das ist es, was eine Folie in jeder Marke funktionieren lässt.
• Akzentwörter verwenden --accent-ink (oder E.COL.accentInk), den Akzent, der angepasst ist, bis er auf dem Hintergrund lesbar ist. Füllungen verwenden --accent, und Wörter auf einer Akzentfüllung verwenden --on-accent.
• Ecken folgen der Marke. Verwenden Sie var(--rp) für Buttons und Tags, var(--r) für Karten und E.R in Canvas. Geben Sie nie 999px ein.
• Das Logo ist immer die echte Datei des Mitglieds, eingebettet durch den Build (<!--LOGO--> in einem Abschnitt). Zeichnen Sie es nie neu und bitten Sie nie einen Bildgenerator darum. Ohne Logodatei wird der Name der Marke in ihrer Überschriftenschrift gesetzt. Geben Sie einem Logo eine feste Box und passen Sie es darin ein (object-fit: contain).
• Zahlen sind echt oder gekennzeichnet. Beispielmathematik muss stimmen und „Beispielzahlen“ sagen.
• Geld und Zahlen verwenden das locale und currency der Marke (E.money, E.num). Die Sprache ist die der Marke (standardmäßig britisches Englisch).

Dateien

• template\page.html: die Hülle und das gesamte CSS-Designsystem, alles in Marken-Tokens.
• template\engine.js (E): das Zeichenset (Kurven, Karten, Text, Beschriftungen, Cursor, Welligkeit, Ticks, glatte Diagrammlinien, Raster, Geld, die Hintergründe).
• template\core.js (P): Text, die Wort-für-Wort-Schlagzeile, Phasen, Tastatur und Fortschritt, Bedienelemente, die Schleife.
• scripts\research.py: Screenshots und Messungen von Websites.
• scripts\brandkit.py: wandelt brand.json in Tokens, Schriftarten und das Logo um, kontrastgeprüft.
• scripts\brand.py: listet, prüft, vergleicht und sampelt Marken.
• scripts\new_deck.py startet ein Deck, scripts\build.py baut eines, und scripts\shoot.py testet eines.
• references\BRAND.md: das brand.json-Format. references\SLIDE-BUILDER.md: der Folienvertrag und die Demoregeln (geben Sie es jedem Helfer).
• examples\slides\: start (die Logoenblendung), path (die Karte), idea (Schieberegler, die ein Diagramm steuern), switch (ein Vorher-Nachher, das neu anordnet) und close. Sie sind der Standard, den jede neue Folie erfüllen muss.

Bereits gelernte Lektionen

• </script an einer beliebigen Stelle in eingebettetem Code, selbst in einem Kommentar, beendet das Skript der Seite vorzeitig. build.py escaped es.
• Der Schritt eines Bereichs-Inputs muss auf seinem Standardwert landen, sonst springt der Browser zum nächsten Schritt.
• Ein Logo, dem nur eine Breite und eine maximale Höhe gegeben werden, läuft über seine Box, und die Maske der Enthüllung schneidet es dann ab. Geben Sie ihm eine Breite und eine Höhe und passen Sie es darin ein.
• Bedienelemente, die shoot.py drückt, dürfen niemals wirklich disabled sein. Verwenden Sie stattdessen aria-disabled="true".
• Einigen Google-Schriften fehlen Gewichte (Space Mono hat nur 400 und 700). brand.py check findet die Gewichte, die jede Schrift hat, und speichert sie.
• Viele Marken behalten ihre Buttons schwarz und setzen die Akzentfarbe auf Wörter und Symbole. research.py schaut auch dort hin, also lesen Sie seine Akzentliste zusammen mit den Screenshots.
• Here-Dokumente in einer Shell können Backslashes und Anführungszeichen fressen. Schreiben Sie Foliendateien und Skripte mit einem Dateischreibwerkzeug.