GoodLadTom/navaigate-present

¿Qué hace navaigate-present?

Presentaciones interactivas con la propia marca del miembro. La habilidad no incluye ninguna marca ni estilo predeterminado. Cada presentación se ve como la marca del miembro, nunca como la de NavAIgate. Antes de la primera presentación, descubre el estilo deseado: pregunta, investiga su sitio web y los sitios que le gustan, y muestra direcciones para elegir.

Lo que toda presentación mantiene, independientemente de la marca:

• Una idea por pantalla. Las palabras están a la izquierda: una etiqueta, un titular que aparece palabra por palabra con una frase de acento, y un párrafo corto y sencillo. A la derecha hay un lienzo de demostración en vivo.
• La demo enseña haciendo. El presentador presiona, arrastra o cambia una cosa, y la pantalla responde al instante: los números cuentan, los gráficos se redibujan, las tarjetas se deslizan a nuevos lugares. Cada cambio es suavizado, nada salta.
• Nunca está inactiva. Cada demo reproduce su llegada cuando la diapositiva entra en vista, y mantiene un movimiento suave mientras espera. El fondo de la página se mueve lentamente y ondula donde haces clic.
• Funciona como una charla. La flecha abajo (o Espacio, AvPág o la flecha derecha) avanza exactamente una diapositiva. Arriba e izquierda retroceden, e Inicio y Fin saltan a los extremos. F es pantalla completa. El progreso agrupado corre en la parte inferior, la barra superior nombra la diapositiva, y una diapositiva de mapa salta a cualquier lugar. Esto viene de template\core.js: nunca lo cambies en una diapositiva.
• Se prueba como una película. Cada diapositiva se captura en tres tamaños y se prueba cada control. Nada se superpone, se recorta o lanza un error.

Habla con claridad: la mayoría de los miembros no son programadores. Di lo que está pasando en una línea antes de cada paso, y guarda los comandos para ti a menos que te los pidan. Sus marcas viven en su propia carpeta, ~/.navaigate-present/brands/, por lo que actualizar esta habilidad nunca las toca.

0. ¿Qué marca?

Ejecuta python -I scripts\brand.py list.

• Sin marcas aún, o quieren una nueva: haz la configuración (secciones 1 a 4) primero. Tarda unos 15 minutos.
• Una marca: úsala. Varias: pregunta cuál, a menos que la solicitud lo haga obvio.

1. Preguntas

Diles lo que va a pasar: unas preguntas, un vistazo a su sitio web y los estilos que les gustan, luego dos o tres direcciones para elegir. Pregunta con AskUserQuestion (una llamada, cuatro preguntas):

1. ¿Cómo debería sentirse? Tranquilo y premium / Audaz y enérgico / Amigable y cálido / Limpio y técnico.
2. ¿Claro u oscuro? Claro / Oscuro / Que coincida con mi sitio web / Muéstrame ambos.
3. ¿Esquinas en botones y etiquetas? Totalmente redondeadas (píldoras) / Suavemente redondeadas / Cuadradas / Que coincidan con mi sitio web.
4. ¿Fondo detrás de las diapositivas? Una cuadrícula de puntos suave / Un enrejado fino / Líneas de papel cuadriculado / Liso.

Luego pregunta en el chat, en un mensaje:

• el nombre de la marca y su sitio web;
• el logotipo (una ruta de archivo, o arrástralo aquí). SVG es mejor, de lo contrario un PNG con fondo transparente. Di que puede venir del sitio web si no tienen el archivo;
• guías de marca si las tienen (un PDF o un enlace);
• uno a tres estilos que les encanten: sitios web, presentaciones, marcas o capturas de pantalla, incluso de otras industrias. Di que puede ser cualquier cosa que quieran que sus diapositivas se sientan como;
• cualquier cosa que nunca quieran ver (por ejemplo, píldoras, emojis o neón);
• para quién son las presentaciones, en una línea;
• dónde guardar las presentaciones (sugiere una carpeta <Marca> presentations en sus Documentos).

2. Investigación

1. Su sitio y sus favoritos. Ejecuta python -I scripts\research.py "~/.navaigate-present/research/<slug>" <su sitio web> <cada referencia>. Para cada sitio guarda una captura de la primera pantalla y de la página, y cualquier logotipo que encuentre en el encabezado. También mide las fuentes, colores de fondo y texto, colores de acento, esquinas y estilo de etiqueta que la página realmente usa. Mira cada captura de pantalla. Los números dicen lo que hay, y las imágenes dicen cómo se siente.
2. Sus guías, si las enviaron. Lee el PDF: sus colores, fuentes y reglas superan cualquier cosa que muestre un sitio web.
3. ¿Sin sitio web ni favoritos? Busca en la web tres o cuatro sitios bien diseñados en su campo e investiga aquellos, solo para inspiración. Si Firecrawl está conectado, firecrawl_search los encuentra, y el raspado con formats: ["branding"] da una segunda lectura de los colores y fuentes de un sitio.
4. Diles lo que encontraste, en palabras sencillas y unas pocas líneas. Por ejemplo: "Tu sitio usa un verde oscuro sobre crema, con una serifa para los encabezados. La presentación que te gusta es oscura y usa esquinas cuadradas y mucho espacio."

Qué tomar de un favorito: su sensación (claro u oscuro, cuánto espacio, el carácter del tipo, esquinas, cuánto color). Nunca tomes su logotipo, nombres de productos, palabras o diseño exacto. Los colores, logotipo y nombre del miembro siguen siendo suyos.

3. Direcciones

Crea dos o tres marcas borrador en ~/.navaigate-present/drafts/<slug>-a, -b y -c. Cada una obtiene un brand.json (ver references\BRAND.md), una copia del logotipo y un nombre de "direction" de pocas palabras. Por ejemplo:

• A, fiel a tu marca: los colores, fuentes y esquinas de su propio sitio.
• B, más cercano a : sus colores y logotipo, con el modo, carácter de tipo, esquinas y fondo del favorito.
• C, una alternativa: un claro contraste, como oscuro si A es claro, o una combinación de tipos diferente. Debe seguir siendo coherente con la marca.

Sigue sus respuestas: la sensación, claro u oscuro, las esquinas y el fondo. Donde dijeron "que coincida con mi sitio web", usa lo que midió la investigación. Luego:

1. Ejecuta python -I scripts\brand.py check <carpeta del borrador> para cada una, y corrige cada línea PROBLEMA.
2. Ejecuta python -I scripts\brand.py compare <borrador a> <borrador b> [<borrador c>]. Construye la apertura y una diapositiva de gráfico en cada dirección y las coloca una al lado de la otra en una imagen, directions.png.
3. Muéstrales la imagen y la ruta completa del index.html de cada dirección, para que puedan navegar por ella. Pregunta cuál les gusta, o qué mezclar ("Los colores de A con el tipo de B"). Ajusta y compara de nuevo hasta que una sea la correcta.

4. Guardar la marca

1. Escribe la dirección elegida, con sus cambios, en ~/.navaigate-present/brands/<slug>/ (brand.json, logotipo y cualquier archivo de fuente).
2. Ejecuta python -I scripts\brand.py check <slug>, luego python -I scripts\brand.py sample <slug>. Esto construye las cinco diapositivas de ejemplo en la marca y las captura.
3. Muestra la hoja de contacto y da la ruta completa del index.html de la muestra. Cuando estén contentos, la configuración está lista, y cada presentación futura usará esta marca.

5. Crear una presentación

1. Brief. Para quién es, qué deben recordar, aproximadamente cuántas diapositivas, dónde se muestra, y los datos que puede usar. Usa solo datos que el miembro te dé o que puedas obtener. Nunca inventes una característica, una cifra o una cita.
2. Esquema. Ejecuta python -I scripts\new_deck.py "<carpeta de la presentación>" "<título>" <slug de la marca>. Inicia la presentación con las diapositivas de ejemplo. Luego escribe _build\deck.json: los grupos (se convierten en la barra de progreso) y el orden de las diapositivas. Para cada diapositiva, decide la única cosa que el presentador presionará y qué demuestra. Una diapositiva sin nada que presionar es una diapositiva débil.
3. Texto. Escribe la label, headline, hl y body de cada diapositiva en una sola pasada, para que la presentación tenga una sola voz, en la voz de la marca de brand.json. Los titulares son de 5 a 10 palabras, con hl (2 a 4 palabras) dentro del titular. Los cuerpos tienen como máximo unas 45 palabras. Palabras sencillas y oraciones cortas, sin guiones largos ni "apalancar", "sin costuras" o "desbloquear". Si las habilidades de estilo de escritura y humanización están instaladas, úsalas.
4. Construcción. Construye cada diapositiva siguiendo references\SLIDE-BUILDER.md. Las diapositivas son carpetas separadas, por lo que los ayudantes pueden construirlas en paralelo. Dale a cada ayudante ese manual, sus identificadores de diapositiva, el slug de la marca, los datos y una idea de demostración por diapositiva.
5. Prueba. Ejecuta python -I scripts\build.py "<presentación>", luego python -I scripts\shoot.py "<presentación>" 1920 1080, luego lo mismo en 1440 900 y 1280 720. Cada ejecución debe imprimir missing copy: none, fit: clean y console: clean. Mira cada captura de pantalla, incluidas las tomadas después de presionar cada control.
6. Revisión. Lee cada diapositiva como lo haría la audiencia. ¿La demo demuestra el titular? ¿Las palabras son sencillas y verdaderas? ¿Las cifras de muestra suman, y están etiquetadas como "Cifras de ejemplo"? Revisa la lista never de la marca.
7. Entrega. Da la ruta completa del index.html de la presentación. Es un solo archivo que funciona sin conexión, aparte de Google Fonts, más assets\ si una diapositiva carga imágenes.

Reglas

• Los colores y fuentes provienen solo de la marca. En CSS usa los tokens (--accent, --accent-ink, --s1, --text, --muted, --line y el resto). En canvas usa E.COL y E.FONT, E.HEAD y E.LABEL. Nunca escribas un color hexadecimal en una diapositiva: eso es lo que permite que una diapositiva funcione en todas las marcas.
• Las palabras de acento usan --accent-ink (o E.COL.accentInk), el acento ajustado hasta que se lea sobre el fondo. Los rellenos usan --accent, y las palabras sobre un relleno de acento usan --on-accent.
• Las esquinas siguen la marca. Usa var(--rp) para botones y etiquetas, var(--r) para tarjetas, y E.R en canvas. Nunca escribas 999px.
• El logotipo es siempre el archivo real del miembro, insertado en línea por la construcción (<!--LOGO--> en una sección). Nunca lo redibujes, ni le pidas a un generador de imágenes que lo haga. Sin archivo de logotipo, el nombre de la marca se establece en su fuente de titular. Dale al logotipo un cuadro fijo y ajústalo dentro (object-fit: contain).
• Las cifras son reales o están etiquetadas. Las matemáticas de muestra deben sumar y decir "Cifras de ejemplo".
• El dinero y los números usan el locale y currency de la marca (E.money, E.num). El idioma es el de la marca (inglés británico por defecto).

Archivos

• template\page.html: el shell y todo el sistema de diseño CSS, todo en tokens de marca.
• template\engine.js (E): el kit de dibujo (curvas, tarjetas, texto, etiquetas, cursor, ondulación, ticks, líneas de gráfico suaves, cuadrículas, dinero, los fondos).
• template\core.js (P): copia, el titular palabra por palabra, etapas, teclado y progreso, controles, el bucle.
• scripts\research.py: capturas de pantalla y mediciones de sitios web.
• scripts\brandkit.py: convierte brand.json en tokens, fuentes y el logotipo, con verificación de contraste.
• scripts\brand.py: lista, verifica, compara y muestrea marcas.
• scripts\new_deck.py inicia una presentación, scripts\build.py construye una y scripts\shoot.py prueba una.
• references\BRAND.md: el formato de brand.json. references\SLIDE-BUILDER.md: el contrato de diapositivas y las reglas de demostración (dáselo a cada ayudante).
• examples\slides\: start (la revelación del logotipo), path (el mapa), idea (controles deslizantes que manejan un gráfico), switch (un antes y después que se reorganiza) y close. Son el estándar que cada nueva diapositiva debe cumplir.

Lecciones ya aprendidas

• </script en cualquier lugar del código insertado en línea, incluso en un comentario, termina el script de la página antes de tiempo. build.py lo escapa.
• El paso de una entrada de rango debe coincidir con su valor predeterminado, o el navegador lo ajusta al paso más cercano.
• Un logotipo al que se le da solo un ancho y una altura máxima desborda su cuadro, y la máscara de la revelación lo corta. Dale un ancho y una altura, y ajústalo dentro.
• Los controles que shoot.py presiona nunca deben estar realmente disabled. Usa aria-disabled="true" en su lugar.
• Algunas fuentes de Google carecen de pesos (Space Mono solo tiene 400 y 700). brand.py check encuentra los pesos que tiene cada fuente y los guarda.
• Muchas marcas mantienen sus botones en negro y ponen el color de acento en palabras e iconos. research.py también busca allí, así que lee su lista de acentos junto con las capturas de pantalla.
• Los documentos aquí en un shell pueden comerse barras invertidas y comillas. Escribe los archivos de diapositivas y scripts con una herramienta de escritura de archivos.