cognyai/claude-code-marketing-skills

Brand Kit

Construye un brand-kit.json que describe el producto del usuario de una manera que otras habilidades puedan consumir: colores, tipografía, voz, lenguaje de hacer/no hacer, logotipo opcional. Otras habilidades de Cogny (/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review, /ad-copy-writer) leen este archivo cuando está presente.

La habilidad se basa en la realidad de que los usuarios no siempre tienen acceso al código fuente de su sitio. Hay seis rutas para obtener un kit, en orden de prioridad. Detente en la primera que produzca suficiente información.

Uso

/brand-kit https://example.com — extraer de un sitio en vivo /brand-kit ~/git/our-site — extraer de un repositorio local (Tailwind / variables CSS) /brand-kit ~/Desktop/logo.png — extraer paleta de un logotipo o captura de pantalla /brand-kit ~/Desktop/homepage.png logo.png — combinar captura de pantalla del sitio + logotipo /brand-kit — entrevistar al usuario

Salida

Un brand-kit.json escrito en (en orden de prioridad, la ruta que tenga sentido para la configuración del usuario):

1. .agents/brand-kit.json (si .agents/ existe)
2. .claude/brand-kit.json (si .claude/ existe)
3. ./brand-kit.json (de lo contrario — directorio de trabajo actual)

Siempre imprime la ruta a la que escribiste para que el usuario pueda moverlo.

Esquema

{
  "name": "cogny",
  "site": "https://cogny.com",
  "logo": {
    "path": "./brand/logo-square.png",
    "use_in_video": false
  },
  "colors": {
    "background": "#1f1d1d",
    "foreground": "#ede8e3",
    "primary":    "#b09acd",
    "accent":     "#c9badf",
    "muted":      "#9a9494",
    "card":       "#282525",
    "fuchsia":    "#d4848a",
    "success":    "#7ec8a4",
    "amber":      "#d4a857"
  },
  "type": {
    "family":   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
    "weight_display": 700,
    "weight_body":    500,
    "letter_spacing_display": "-0.02em"
  },
  "voice": {
    "register":   "técnico, directo, anti-jerga, estética-CLI",
    "person":     "primera persona del plural (nosotros / tu)",
    "do":         ["números concretos", "nombrar la compensación", "nombrar la herramienta"],
    "dont":       ["apalancamiento", "desbloquear", "revolucionario", "próxima generación"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

Kit mínimo viable: colors.background, colors.foreground, colors.primary, type.family, voice.register. No entregues sin los cinco.

---

Ruta 0 — Árbol de contexto de Cogny MCP (más barato, ejecutar primero si está conectado)

Úsalo cuando: el servidor MCP de cogny está en .mcp.json. El usuario puede haber documentado ya su marca — voz, paleta, tono — en su árbol de contexto, en cuyo caso el scraping es redundante.

mcp__cogny__get_context_tree_overview              # ver qué está documentado
mcp__cogny__search_context query="brand"           # paleta, voz, tono, tokens de diseño
mcp__cogny__search_context query="positioning"     # voz + registro a menudo viven aquí
mcp__cogny__read_context_node node_id="…"

Si el árbol devuelve nodos de marca / paleta / voz, hidrata el kit a partir de esos valores. Verifica con la Ruta 1 o 3 solo si algo parece desactualizado o contradictorio.

Si el MCP de cogny no está conectado, o el árbol no tiene nada relacionado con la marca, pasa a la Ruta 1.

Ruta 1 — Repositorio con variables Tailwind / CSS (mejor señal)

Úsalo cuando: el usuario tiene acceso al código fuente del sitio.

Busca, en orden:

# Configuración de Tailwind — espacios de nombres de color personalizados
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# Propiedades personalizadas de CSS (la mayoría de los stacks modernos)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# Tokens de diseño
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Cuando encuentres una configuración de Tailwind, busca un espacio de nombres de color personalizado (comúnmente el nombre de la marca, p. ej., cogny: {...}):

// tailwind.config.ts (ejemplo cogny)
colors: {
  cogny: { dark: "#1f1d1d", purple: "#b09acd", secondary: "#7E69AB", light: "#c9badf" }
}

Cuando encuentres un archivo CSS, busca las propiedades personalizadas canónicas:

grep -E '^\s*--(background|foreground|primary|accent|muted|card)' <archivo-css>

Mapea los valores al esquema del kit. Si encuentras tanto --primary (HSL o hex) como un espacio de nombres de Tailwind, prefiere el espacio de nombres de Tailwind — generalmente es la intención explícita de la marca en lugar de un valor predeterminado de shadcn.

Detección de tipografía en los mismos archivos:

grep -E "(font-family|fontFamily|--font-)" <repo>/src/**/*.{css,ts,tsx,js} 2>/dev/null | head

---

Ruta 2 — URL del sitio en vivo (funciona sin acceso al código fuente)

Úsalo cuando: el usuario solo tiene una URL pública.

Pasos:

1. Obtén la página de inicio con WebFetch <url> y extrae cualquier bloque <style> en línea y los enlaces a hojas de estilo del <head>.
2. Obtén la hoja de estilo principal (el enlace CSS más grande en el <head>, típicamente). curl -sL <css-url> | head -c 200000 es suficiente — busca propiedades personalizadas de CSS (--primary, --background, etc.) y reglas @font-face.
3. Busca un manifiesto en /site.webmanifest, /manifest.json, o /manifest.webmanifest. Los manifiestos contienen theme_color, background_color y una lista de iconos — oro para kits de marca.
4. Busca un favicon y un logotipo de alta resolución:

   curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
   curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
   # O extrae de <link rel="icon"> en el HTML de la página de inicio
   

   El icono PNG más grande del sitio (Apple touch icon, icono del manifiesto) es la marca.
5. Detecta la tipografía: busca en el CSS en línea declaraciones de font-family en body, html, o h1. Si ves enlaces de Google Fonts en <head>, el nombre de la familia está en la URL.

Si el sitio sirve un frontend estático (Next.js, etc.), el CSS empaquetado a menudo contiene las mismas propiedades personalizadas que la fuente de desarrollo — por lo que aún podrías recuperar la paleta de marca completa sin acceso al repositorio.

Si solo obtienes información parcial (p. ej., obtuviste theme_color del manifiesto pero no la paleta completa), procede a la Ruta 3 para llenar los vacíos desde el logotipo / una captura de pantalla.

---

Ruta 3 — Extracción de paleta de logotipo o captura de pantalla (el plan de respaldo que siempre funciona)

Úsalo cuando: el usuario sube una imagen de logotipo, una captura de pantalla de su página de inicio, o un archivo PNG/JPG de activo de marca.

El usuario generalmente tiene alguna imagen — un logotipo en el escritorio, un avatar de Slack, una captura de pantalla del sitio web. Extrae una paleta directamente con FFmpeg:

# Genera una imagen de paleta pequeña (máximo 6 colores distintos) de cualquier imagen.
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# Lee esos colores de paleta como hex. El encabezado PPM es
#   P6\n<W> <H>\n255\n  → 13 bytes para la paleta estándar de 16x16.
ffmpeg -y -i /tmp/_palette.png -c:v ppm -f image2 -update 1 - 2>/dev/null \
  | tail -c +14 \
  | xxd -c 3 -p \
  | awk '!seen[$0]++' \
  | head -8 \
  | awk '{print "#" toupper($1)}'

Salida para el logotipo de cogny (degradado C sobre fondo oscuro cálido):

#1D1B1B   ← fondo
#5F4953   → ciruela profunda
#BB93B9   → lavanda (marca principal)
#CA8B9D   → rosa coral
#D2858C   → coral (acento)

Reglas de mapeo — la paleta está ordenada por frecuencia, pero la asignación de roles es tuya:

• Color más oscuro → colors.background (si cubre >40% de los píxeles)
• Color más brillante que no sea blanco → colors.foreground (si no hay blanco apagado, predeterminado #fafafa)
• Croma más saturado → colors.primary
• Segundo más saturado → colors.accent

Echa un vistazo a la imagen original una vez y confirma: la asignación algorítmica de roles acierta ~70% de las veces.

Para tipografía desde una captura de pantalla: la detección de fuentes basada en imágenes no es confiable. O bien:

• Pregunta al usuario ("la fuente del titular en esta imagen es…?"), o
• Usa una herramienta gratuita como WhatTheFont o Fontspring Matcherator — muestra la URL al usuario, no intentes hacerlo mediante programación.

Opcional: paleta semántica mediante node-vibrant (un npm install, proporciona categorías vibrante/apagado/vibrante-oscuro/vibrante-claro — más útiles para el mapeo de roles primario/acento):

npm install -g node-vibrant
node -e "
  const Vibrant = require('node-vibrant');
  Vibrant.from(process.argv[1]).getPalette().then(p => {
    const out = {};
    for (const k of ['Vibrant','Muted','DarkVibrant','LightVibrant','DarkMuted','LightMuted']) {
      if (p[k]) out[k] = p[k].hex;
    }
    console.log(JSON.stringify(out, null, 2));
  });
" <input.png>

Usa el que esté disponible. FFmpeg ya viene con las habilidades de video, así que ese es el predeterminado.

---

Ruta 4 — Selector de color / entrada manual (siempre disponible)

Úsalo cuando: nada más funcionó, o el usuario quiere anular el kit explícitamente.

Pregunta, en este orden, y acepta respuestas parciales:

1. ¿Hex del fondo? (el fondo de página que los usuarios ven más)
2. ¿Hex del primer plano? (color del texto del cuerpo)
3. ¿Hex de la marca principal? (el color que usa un botón o enlace)
4. ¿Hex del acento? (opcional — si hay un segundo color de marca)
5. ¿Familia tipográfica? ("una sans como Inter", "JetBrains Mono", etc. — mejor esfuerzo, los respaldos del sistema están bien)

Tres colores y una fuente son suficientes para entregar.

---

Ruta 5 — Extracción de voz (siempre se ejecuta, independientemente de la ruta de color)

La voz es la parte de un kit de marca que las herramientas de copiar y pegar olvidan. Cambia qué ritmos escribiría un video o qué titulares produciría una habilidad de redacción de anuncios.

Fuente para la voz: el héroe de la página de inicio + 1–2 páginas más profundas (acerca de, precios, blog).

Pasos:

1. Obtén el texto del héroe de la página de inicio (h1, h2, el primer párrafo después del CTA del héroe).
2. Obtén una página profunda (/about o /pricing típicamente).
3. Lee el texto y produce tres campos:

"voice": {
  "register": "<descripción de una línea>",
  "do":   ["patrón 1", "patrón 2", "patrón 3"],
  "dont": ["palabra prohibida 1", "palabra prohibida 2"]
}

Ejemplos (estos son reales, derivados de la página de inicio de cada empresa):

Marca	registro	hacer	no hacer
cogny	"técnico, directo, anti-jerga, estética-CLI"	números concretos, nombrar la compensación, nombrar la herramienta	apalancamiento, desbloquear, revolucionario, próxima generación
Linear	"operador, opinado, rápido"	segunda persona, conciso, lenguaje de modo-construcción	empresarial, sinergia, robusto
Mailchimp	"cálido, conversacional, inglés-simple"	primera persona, contracciones amigables, CTA claros	utilizar, paradigma, apalancamiento

Si no puedes inferir la voz de la página (p. ej., página de inicio muy delgada), pídele al usuario una oración que describa cómo quiere sonar. No lo inventes.

---

Pasos (el flujo real)

1. Detecta qué entrada te dio el usuario:

   • URL → Ruta 2 → pasa a la 3 / 5 si es necesario
   • Ruta del repositorio → Ruta 1 → pasa a la 5
   • Ruta de la imagen → Ruta 3 + pide URL del sitio o repositorio para la voz (Ruta 5)
   • Nada → Ruta 4 + pregunta si tiene un logotipo para extraer

2. Construye el kit incrementalmente. Imprime el estado parcial después de cada paso para que el usuario pueda intervenir:

   ◆ Brand kit (cogny)
   ✓ colors    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
   ✓ type      JetBrains Mono / mono
   ◇ voice     pendiente — obteniendo /about para análisis…
   

3. Muestra al usuario el resultado antes de escribir el archivo. Debería aprobar las asignaciones de roles de color (fondo vs principal, etc.) — estas son las decisiones de alto apalancamiento.

4. Escribe brand-kit.json en la ubicación más apropiada (consulta la sección Salida). Si ya existe un kit, haz un diff y pregunta antes de sobrescribir.

5. Imprime una pista de instalación de una línea para las habilidades consumidoras:

   Guardado → .agents/brand-kit.json
   Usado por: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
              /ad-copy-writer, /landing-page-review
   

Errores comunes

1. Tratar un solo color hex como la marca — la mayoría de las marcas tienen un color principal + un acento + un par fondo-primer plano. Mínimo tres colores.
2. Entregar sin voz — los colores llevan la marca 30%; la voz la lleva 70%. No saltes la Ruta 5.
3. Usar valores predeterminados de shadcn como la marca — si el archivo CSS del usuario tiene el literal --primary: 240 5.9% 10% de shadcn, eso es un marcador de posición, no una marca. Verifica con la captura de pantalla de la página de inicio.
4. Sobresaturar el kit con artefactos de degradado del logotipo — la extracción de paleta de un logotipo degradado devolverá 4–5 colores de transición. Elige los extremos (principal + acento), descarta los intermedios.
5. Dejar que el azul de LinkedIn / azul de Twitter / rosa de TikTok se cuelen en el kit — esos son colores de la interfaz de usuario de la plataforma que se filtran en las capturas de pantalla, no colores de marca.
6. Confiar ciegamente en theme-color — los sitios a veces establecen theme-color para que coincida con la barra de direcciones de Safari móvil, que es decorativo y puede no coincidir con el color principal real de la marca.

Relacionados

• /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video — consumen el kit
• /ad-copy-writer — usa las reglas de voz para escribir texto apropiado para la plataforma
• /landing-page-review — verifica la consistencia entre una página de aterrizaje y el kit de marca
• /non-commodity-content — la extracción de voz se superpone con el paso de entrevista de esta habilidad