pack de referencia de marca

¿Qué hace pack de referencia de marca?

El pack es contexto, no contenido. Registra lo que la marca ya es (audiencia, voz, lenguaje visual, tokens y las pantallas y textos de los que proviene cada afirmación) para que luego se puedan tomar decisiones de formato, guiones y diseño a partir de él. No incluye enlaces, guiones ni series. Si una fuente sugiere algo, anota la fuente y deja la decisión abierta.

Dónde se sitúa:

upstream (estrategia) ──→ este skill (marca observada) ──→ downstream (formatos, guiones, reels)
ICP · VOC · voz de marca   lo que las superficies muestran/dicen      guión-a-reel, shader-lab

Este skill no establece el ICP, la voz del cliente ni la voz de marca. Encuentra los artefactos previos, verifica las superficies contra ellos y marca cada uno como verificado / inferido / ausente (pack §0). Las brechas se devuelven al upstream; no las remiendes aquí.

Archivos:

• template.md: la estructura de secciones del pack.
• scripts/: ayudantes genéricos de captura y renderizado.
• apps/<app>/: una carpeta por app con sus URLs, receta de flujo, peculiaridades, reglas de producción y diseño del PDF.
  • Lee apps/<app>/README.md primero. Para una app nueva, créalo durante la admisión.

Los comandos siguientes están escritos en relación con esta carpeta del skill (.claude/skills/brand-reference-pack/), y las rutas de salida son relativas a dondequiera que los ejecutes. Ejecútalos desde la raíz del proyecto y antepone scripts/ con la ruta del skill. pack_pdf.py resuelve su configuración en relación con el skill.

0. Admisión (una ronda de AskUserQuestion, solo para apps nuevas)

Recopila:

• Nombre de la app.
• URL del sitio web.
• Cuentas de redes sociales.
• ID de la App Store y país (ID del paquete de Play si corresponde).
• Cómo ejecutar la app: compilación del simulador, TestFlight, app web o emulador.
• Ruta del repositorio de código, si existe.
• Documentos existentes de marca, ICP o investigación.
• Cuál es el flujo principal.
• Qué está prohibido en producción.
• Carpeta de salida.

Escribe las respuestas en apps/<app>/README.md.

1. Verificación de fundamentos (ICP, VOC, voz de marca)

Para cada fundamento, busca el artefacto previo: una carpeta de wiki o docs, decks de investigación, un libro de marca.

• ICP: un cliente objetivo definido respaldado por datos o investigación. Anota su nivel de confianza y su tamaño de muestra.
• Voz del cliente: las propias palabras de los clientes extraídas de entrevistas, reseñas, soporte o comunidad. Los testimonios en el propio sitio de la marca cuentan solo como evidencia débil: están curados.
• Voz de marca: una guía de voz escrita o reglas de redacción.

Registra cada uno en la tabla §0 del pack. Durante los pasos 2 a 5, comprueba si las superficies en vivo coinciden con el artefacto. Las discrepancias van a Decisiones abiertas. Si falta un artefacto, dilo y nombra el trabajo previo que lo completaría; no inventes el fundamento a partir de las superficies.

2. Superficies públicas (en paralelo cuando sea posible)

Cada afirmación necesita un archivo en refs/.

Sitio web:

node scripts/site.mjs <url> <brand>/refs/web

Esto guarda capturas de pantalla completas y de héroe para escritorio y móvil, además de site-styles.json con fuentes (incluyendo los nombres reales detrás de los IDs de font-host), colores, imágenes, enlaces y el texto de la página. Divide la captura de página completa en aproximadamente 4 partes para leerla.

App Store:

node scripts/store.mjs <id> <brand>/refs/store [país]

Esto guarda la ficha (el posicionamiento oficial), las capturas de pantalla de la tienda y las reseñas como material bruto de VOC.

Redes sociales (en el navegador integrado):

• Rechaza las cookies opcionales.
• Cuadrícula: recopila el src y alt de la imagen de cada publicación, dibújalos en un canvas, reemplaza la página con ello y toma una captura.
• Pies de foto: fetch de mismo origen de la página de cada publicación → og:description.
• Sin sesión iniciada, solo obtienes unas 12 publicaciones. Dilo, y si los reels importan, pide al usuario que inicie sesión o exporte.
• Si obtienes los reels, anota su ritmo, estilo de pie de foto y audio.
• Escribe todo en refs/<plataforma>/.

Documentos existentes: usa un subagente Explore para sintetizar audiencia, promesa, terminología, reglas de voz y afirmaciones, con citas de archivos.

3. Tokens de código (si hay repositorio)

Usa un subagente Explore para encontrar el tema del framework que use la app:

• Flutter ThemeData y constantes de color
• Configuración de Tailwind
• Variables CSS
• Catálogos de assets de iOS
• colors.xml de Android

También cubre fuentes, radios, convenciones de movimiento, shaders, archivos de logotipo y textos notables de la interfaz de usuario. Verifica los códigos hex tú mismo. Escribe tokens.json con roles de color, la escala tipográfica (escalada a 1080×1920), forma, movimiento y lienzo.

Texto dentro de la app: extrae cada cadena visible para el usuario del código de la interfaz, textualmente con archivo:línea, para el cerebro de persona (paso 7):

python3 scripts/app_copy.py <raíz del src> <persona>/raw/app-copy/app-copy-<fecha>.md <directorios/archivos de interfaz…>

(Flutter: app/lib con pages widgets constants models enums main.dart; --ext=.tsx etc. para otras pilas.) Filtra registros, claves e ids; aún así revisa la salida para detectar algo secreto antes de que llegue al cerebro.

4. Recorrido por la app en vivo

La fuente más rica: aquí es donde se muestra la gramática visual y verbal real del producto.

• Consentimiento primero: indica exactamente qué escribe la ejecución en producción (cuenta, respuestas de evaluación, informes generados, finalizaciones) y obtén un sí. El usuario hace cada registro e inicio de sesión. Nunca escribas credenciales, nunca te suscribas, nunca envíes mensajes a un coach de IA.
• Observa y graba: conecta el panel del simulador (mcp__Claude_Code_iOS_Simulator__control attach).
  • Inicia xcrun simctl io <UDID> recordVideo --codec=h264 --force <archivo> en segundo plano.
  • Dételo durante el inicio de sesión e inicia uno nuevo después, para que no haya que recortar nada.
  • Detén con pkill -INT -f recordVideo.
• Conduce por etiquetas de accesibilidad, no por coordenadas: UDID=… OUT=<marca>/refs/app scripts/ui.sh tree|shot|label|tap|swipe|hold.
  • Toma una captura de cada nueva pantalla, nombrada según su encabezado.
  • Espera a que las animaciones y el texto del CMS se estabilicen antes de capturar; si una línea no se ha renderizado, es "no capturada".
  • Crea una hoja de contactos por etapa (PIL, unas pocas líneas) y lee esa, no cada PNG.
• Sigue la receta de la app en apps/<app>/README.md. Añade cualquier nueva peculiaridad que encuentres en ella.
• Audio: la grabación del simulador no tiene. Si la app tiene voz o audio, pide al usuario un archivo de origen.
• Después:
  • Renumera las capturas de pantalla en orden de captura.
  • Construye refs/app-flow-sheet.jpg.
  • Comprime las grabaciones: scale=540:-2,fps=30,crf 26.

5. Escribe el pack

Rellena template.md en <marca>/README.md.

• Cita solo lo que viste.
• Donde las superficies difieran, la superficie en vivo más reciente es el valor por defecto operativo y la discrepancia va a Decisiones abiertas.
• §0 proviene del paso 1.

6. Verifica

Pasa a un subagente nuevo el README y la carpeta refs/, no tus conclusiones. Pídele que verifique cada línea citada, hex y afirmación contra un archivo, y que liste cualquier cosa sin fuente. Corrige o marca cada elemento antes de devolverlo.

7. Salida

• PDF: escribe apps/<app>/pdf.json (copia el de GetAhead: portada, fuente, acento, grupos de paleta que apuntan a tokens.json, líneas de muestra, páginas de capturas de pantalla). Luego ejecuta:

  python3 scripts/pack_pdf.py apps/<app>/pdf.json
  

  Verifica el resultado como una hoja de contactos pdftoppm -r 40.
• Docs: si el proyecto tiene un wiki o docs, archiva el pack allí siguiendo sus propias convenciones (página, índice, registro, banderas de contradicción en las páginas que reemplaza).
• Cerebro de persona: si el proyecto tiene uno (p. ej. persona/, el cerebro de la marca como persona desde el que habla la generación de guiones), copia las capturas del recorrido de la app en su raw/app-run-<fecha>/ y el texto de la app en raw/app-copy/ (con el sí del usuario: raw/ es suyo), luego ejecuta el flujo de ingesta del cerebro (su CLAUDE.md): páginas de origen, páginas de concepto, reconstrucción de tarjetas con líneas textuales de la app. El pack registra cómo se ve la marca; el cerebro registra cómo habla: los guiones se basan en el cerebro.
• Envía: el PDF y el README, con SendUserFile.
• Informa:
  • qué se escribió en producción
  • qué no se capturó
  • el estado de los fundamentos
  • las decisiones abiertas