BeautifulEngine/brand-snapshot

Brand Snapshot

Obtén lo básico visual y verbal de una marca en dos páginas en minutos: colores que puedes usar con confianza, la tipografía y sus alternativas gratuitas, cómo se comportan el logo y la UI, cómo suena la marca, y enlaces a los archivos oficiales. Es la versión rápida de la sección de marca de la habilidad Company Brief.

Uso

/brand-snapshot <url o nombre de la marca> [tokens only]

Las solicitudes sencillas también funcionan:

• "Brand snapshot para linear.app."
• "¿Qué colores y tipografías usa Patagonia?"
• "Extrae tokens de diseño de stripe.com para un mockup de presentación."
• "Snapshot de Oatly y Liquid Death, lado a lado." (hace un snapshot cada una)

"tokens only" omite el PDF y devuelve tokens.json y tokens.css.

Archivos. <skill-dir> significa la carpeta de esta habilidad, donde se encuentra este SKILL.md. Las plantillas están en assets/, los scripts en scripts/, y los pasos compartidos del PDF (tipografías, colores, renderizado, verificación) están en references/rendering.md.

Reglas estrictas

• Primero el sitio en vivo. Los colores y tipografías provienen de los estilos computados del sitio (referencias/brand-extraction.md), etiquetados como Verified y con fecha. Las guías oficiales o un kit de prensa tienen prioridad sobre el sitio cuando discrepan; anota ambos. Fuentes de terceros como Brandfetch se etiquetan como Reported.
• Describe los logos, no los copies. Describe la marca gráfica y el logotipo con palabras y enlaza al kit de prensa oficial o al portal de marca. Nunca redibujes, traces ni incrustes un logo, mascota o imagen publicitaria. Muestras de color y especímenes tipográficos con una fuente alternativa están bien.
• Indica qué es una alternativa. Si la tipografía de la marca es de pago o personalizada, nómbrala, nombra su fundición, y muestra los especímenes con la alternativa gratuita más cercana, etiquetada como tal.
• Se aplican términos de uso. Recuerda al lector que los activos de la marca pertenecen a la marca y que sus guías rigen su uso.
• Línea de crédito: el snapshot termina con un pequeño crédito de Beautiful Engine. Mantenlo a menos que la persona pida omitirlo.

Flujo de trabajo

1. Abre el sitio en un navegador si hay uno disponible (aprueba el dominio una vez si se solicita); de lo contrario, obtén los datos. Confirma que es la marca que la persona quiere.
2. Extrae con el script de references/brand-extraction.md, sección 1, en la página de inicio y una página más (precios, producto o acerca de): estilo de titulares, tipografías cargadas, colores por área en pantalla, colores de la hoja de estilo, propiedades personalizadas CSS, degradados, estilos de botones y tarjetas, e información del logo. Haz zoom en una captura del logo para describirlo, y en el hero para describir las imágenes.
3. Revisa fuentes oficiales: busca el kit de prensa de la marca, portal de marca, sitio del sistema de diseño o PDF de guías, y la fundición de sus tipografías. Anota las submarcas (eventos, líneas de producto) por separado.
4. Elige la paleta: de 4 a 8 colores en orden de importancia (primario, secundario, acentos, neutros), cada uno con un nombre sencillo y su función. Luego ejecuta: python3 <skill-dir>/scripts/palette.py --colors "Nombre:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<Marca>" > swatches.html Esto escribe tokens.json y tokens.css e imprime la tabla de muestras con verificación de contraste.
5. Tipografías para el PDF: instala las fuentes gratuitas de la marca o las alternativas con scripts/fonts.py, y ejecuta scripts/tokens.py con el color primario y de acento de la marca para que el snapshot use los colores de la marca (references/rendering.md).
6. Voz: 3–4 rasgos, cada uno con una cita real del sitio entre comillas.
7. Construye a partir de assets/snapshot-template.html (copia base.css), pega la tabla de muestras, renderiza, audita y verifica la hoja de contacto. Dos páginas; recorta antes de pasar a una tercera.
8. Entrega el PDF, tokens.json y tokens.css. En la respuesta: los colores primario y de acento con su hex, las tipografías y alternativas, y dónde están las guías oficiales (o que no hay ninguna pública).

Nombre de salida: <Marca>-Brand-Snapshot-<YYYY-MM>.pdf.