ckm:brand

Visión general

Qué es ckm:brand

ckm:brand es un skill centrado en branding del repositorio nextlevelbuilder/ui-ux-pro-max-skill. Te ayuda a definir, mantener y aplicar una marca consistente en contenidos, interfaces y materiales de marketing.

En lugar de tratar la marca como un PDF estático, ckm:brand impulsa un sistema de marca vivo: guías estructuradas, checklists y scripts que conectan tus decisiones de marca con design tokens, CSS y assets reales.

Capacidades clave

Con ckm:brand activado puedes:

• Definir voz y tono de marca con frameworks reutilizables.
• Diseñar la identidad visual: uso de logotipos, colores, tipografía e imágenes.
• Crear y refinar frameworks de mensajes para campañas y productos.
• Ejecutar revisiones de consistencia de marca usando checklists detallados.
• Mejorar la gestión de assets con convenciones de directorios y metadatos.
• Sincronizar las guías de marca con design tokens y CSS mediante scripts.
• Comprobar uso de color y accesibilidad en assets e interfaces.

Para quién es ckm:brand

Este skill encaja especialmente bien para:

• Equipos de marca y marketing que están formalizando o actualizando sus guías de marca.
• Diseñadores de producto y equipos de UI/UX que necesitan un traspaso limpio de marca a front‑end.
• Estrategas de contenido y copywriters responsables de la voz y los mensajes de marca.
• Roles de DesignOps / marketing ops que crean flujos de trabajo de marca repetibles.

Es especialmente útil si tu trabajo de marca abarca tanto contenido editorial como superficies de producto digital donde la consistencia y la accesibilidad son críticas.

Cuándo ckm:brand es (y no es) una buena opción

Usa ckm:brand cuando:

• Quieres una única fuente de verdad para las guías de marca (docs/brand-guidelines.md).
• Necesitas revisiones repetibles de assets de marketing antes de su aprobación.
• Estás listo para traducir decisiones de marca en tokens y variables CSS.
• Necesitas un framework estructurado de voz y mensajes para los equipos de contenido.

Puede no ser la mejor opción si:

• Solo necesitas elegir rápido un logo y una paleta de color sin una gobernanza continua.
• No mantienes tu marca en un repositorio ni en un flujo de trabajo basado en código.
• Buscas una herramienta de diseño visual (Figma, Sketch) más que guías y scripts.

Si tu marca ya está respaldada por Git o quieres avanzar en esa dirección, ckm:brand proporciona un punto de partida con opinión y extensible.

Cómo usarlo

1. Instala el skill ckm:brand

Instala el skill en tu agente o entorno compatible con skills usando la URL del repositorio de GitHub y el slug del skill brand:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Una vez instalado, los workflows y referencias de ckm:brand estarán disponibles para tu agente o herramientas. Usa el estilo argument-hint para guiar las invocaciones:

[update|review|create] [args]

Por ejemplo:

• brand update homepage-hero – actualiza guías o decisiones para una superficie concreta.
• brand review campaign-email – revisa un asset o flujo para comprobar la consistencia de marca.
• brand create launch-messaging – crea mensajes nuevos basados en el framework.

Nota: Usa exactamente el comando de instalación anterior, pero adapta rutas y detalles de integración a tu propio entorno.

2. Entiende los archivos y la estructura principales

Tras la instalación, abre primero estos archivos para entender cómo está configurado ckm:brand:

• SKILL.md – Descripción de alto nivel, cuándo usarlo, comandos de inicio rápido y workflow de sincronización de marca.
• references/ – Guías detalladas, checklists y frameworks de marca.
• scripts/ – Scripts en Node que conectan las guías con assets y design tokens.
• templates/ – Plantillas iniciales para construir tu propia documentación de marca.

Archivos de referencia clave:

• references/brand-guideline-template.md – Estructura completa de las guías de marca.
• references/visual-identity.md – Cómo expresar el lado visual de tu marca.
• references/logo-usage-rules.md – Cuándo y cómo usar cada variante de logo.
• references/color-palette-management.md – Jerarquía de paleta y patrones de documentación.
• references/typography-specifications.md – Escalas tipográficas, pilas de fuentes y usos.
• references/voice-framework.md – Rasgos de voz de marca, qué hacer y qué evitar.
• references/messaging-framework.md – Misión, visión, propuesta de valor y arquitectura de mensajes.
• references/asset-organization.md – Estructura sugerida de carpetas y metadatos para assets.
• references/approval-checklist.md – Checklist de aprobación de assets de extremo a extremo.
• references/consistency-checklist.md – Auditoría de consistencia cross‑canal.

3. Inyecta contexto de marca en tus prompts y workflows

Para asegurarte de que el contexto de marca está siempre disponible para tu agente o herramientas, usa el script incluido para inyectar las guías de marca en los prompts:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Usos habituales:

• Anteponer las guías de marca a los prompts de generación de contenido.
• Exportar una representación JSON de las reglas clave de marca para otras herramientas.
• Mantener alineados a copywriters y diseñadores sin pegar manualmente guías extensas.

Si tu entorno lo permite, integra inject-brand-context.cjs en tu pipeline de construcción de prompts para que cada tarea relevante para la marca incluya automáticamente las reglas de marca más recientes.

4. Valida assets de marketing para marca y accesibilidad

Usa el script de validación para comprobar assets concretos contra tu sistema de marca:

node scripts/validate-asset.cjs <asset-path>

Este script está diseñado para trabajar con las estructuras y checklists documentados en references/approval-checklist.md, references/consistency-checklist.md y archivos relacionados. En la práctica, podrías:

• Ejecutarlo sobre un nuevo gráfico de campaña antes del lanzamiento.
• Integrarlo en tu CI para detectar assets fuera de marca en pull requests.
• Usarlo durante revisiones de diseño como checklist estructurado.

Combina la salida del script con el checklist de aprobación para asegurar:

• Uso correcto de logotipos y colores.
• Respeto por las fuentes de marca y la jerarquía tipográfica.
• Imágenes alineadas con el estilo de marca y con estándares de calidad.
• Cobertura de los básicos de accesibilidad (contraste, texto alternativo, visibilidad del foco).

5. Gestiona y documenta tu sistema de color

El color es una parte central de la marca y del UI/UX. ckm:brand incluye orientación y un script de ayuda para mantener tu paleta consistente y bien documentada.

Usa el script de color para inspeccionar o comparar paletas:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Usos habituales:

• Extraer colores de assets existentes para comprobar si coinciden con tu paleta oficial.
• Comparar una nueva paleta propuesta con las guías actuales.
• Construir y mantener tablas y variables CSS como se documenta en references/color-palette-management.md.

La referencia de gestión de color cubre:

• Jerarquía de colores primarios, secundarios, neutros y semánticos.
• Patrones de documentación en tablas Markdown y variables CSS.
• Cómo representar colores en configuraciones estilo Tailwind.
• Estándares de accesibilidad de contraste (WCAG 2.1).

6. Crea o refina tus guías de marca con plantillas

Inicia un documento estructurado de guías de marca usando:

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

Copia una de estas plantillas en tu repositorio como docs/brand-guidelines.md o similar, y luego personaliza:

• Referencia rápida (colores, fuentes, rasgos de voz).
• Paleta de color detallada con notas de uso.
• Pilas tipográficas y escalas tipográficas responsive.
• Variantes de logo, áreas de seguridad y reglas de tamaño mínimo.
• Principios de voz, tono por contexto y ejemplos de frases.
• Jerarquía de mensajes y mensajes específicos por audiencia.

Estas plantillas están pensadas para ser legibles por personas (diseñadores y marketers), pero lo bastante estructuradas como para que las procesen scripts como sync-brand-to-tokens.cjs.

7. Sincroniza las guías de marca con design tokens y CSS

Una de las partes más potentes de ckm:brand es el Brand Sync Workflow descrito en SKILL.md. Conecta tus guías escritas con la implementación en front‑end.

Flujo típico:

# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20

Archivos implicados (como se documenta en el skill):

• docs/brand-guidelines.md → Fuente de verdad para las decisiones de marca.
• assets/design-tokens.json → Definiciones de design tokens generadas o actualizadas.
• assets/design-tokens.css → Variables CSS expuestas al front‑end.

Cómo usarlo en la práctica:

• Actualiza colores, tipografía o espaciado en docs/brand-guidelines.md.
• Ejecuta sync-brand-to-tokens.cjs para propagar esos cambios.
• Importa assets/design-tokens.css en tu código de UI para que las actualizaciones de marca se reflejen en el producto.

Así mantienes alineadas tus guías de marca, tu sistema de diseño y la implementación sin duplicar trabajo manualmente.

8. Ejecuta revisiones y auditorías de marca con checklists

Para equipos o campañas grandes, usa los checklists de referencia como proceso de revisión repetible:

• references/approval-checklist.md – Aprobación de assets paso a paso.
• references/consistency-checklist.md – Consistencia de marca a través de canales.

Puedes:

• Convertirlos en formularios de revisión o checklists en tu herramienta de gestión de proyectos.
• Usarlos como criterios de aceptación en tickets para nuevas páginas o campañas.
• Combinarlos con validate-asset.cjs para comprobaciones semiautomatizadas.

Esto ayuda a que los estándares de marca, UI/UX y accesibilidad se apliquen de forma consistente en web, email, redes sociales e impresos.

Preguntas frecuentes

¿Qué hace realmente ckm:brand para mi equipo en el día a día?

ckm:brand te aporta tres beneficios prácticos:

1. Guías de marca codificadas – Plantillas y referencias estructuradas para redactar reglas de marca claras.
2. Workflows operativos – Scripts y checklists que convierten el trabajo de marca en algo repetible en vez de ad hoc.
3. Alineación con la implementación – Sincroniza las guías con design tokens y CSS para que tu UI refleje las decisiones de marca.

En lugar de ser un checklist genérico de branding, está orientado a cómo se usa la marca en workflows modernos de UI/UX y marketing.

¿Cómo instalo ckm:brand desde GitHub?

Usa el instalador de skills con el repositorio publicado y el slug del skill:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Esto descarga el skill brand desde .claude/skills/brand en el repositorio. Después, consulta SKILL.md y la carpeta references/ para integrarlo con tu propio repo y procesos.

¿Puedo personalizar las guías de marca y seguir usando los scripts?

Sí. ckm:brand está pensado para adaptarse. Deberías:

• Copiar las plantillas proporcionadas en tu propio directorio docs/ o brand/.
• Editarlas con los colores, tipografía, mensajes y reglas de tu marca.
• Mantener una estructura en líneas generales similar para que scripts como sync-brand-to-tokens.cjs puedan seguir analizarlas.

Si cambias de forma significativa nombres de archivos o estructura, quizá debas ajustar los scripts para alinearlos con tus nuevas ubicaciones o formatos.

¿ckm:brand sustituye a nuestro design system o a nuestro CMS?

No. ckm:brand se sitúa junto a tu design system y tu CMS:

• Define las reglas de marca y los tokens que tu design system implementa.
• Documenta la voz y los mensajes que el contenido de tu CMS debería seguir.

Tu design system (por ejemplo, una librería de componentes) y tu CMS siguen siendo los mecanismos de entrega. ckm:brand mantiene la lógica de marca detrás de ellos consistente y legible por máquina.

¿Cómo ayuda ckm:brand con la accesibilidad?

La accesibilidad está integrada en varias referencias:

• references/approval-checklist.md incluye comprobaciones de accesibilidad visual y de contenido.
• references/color-palette-management.md documenta requisitos de contraste y uso de colores semánticos.

Úsalas en revisiones de diseño y aprobación de assets para asegurar que contraste de color, visibilidad del foco, texto alternativo y estructura de contenido cumplen estándares habituales como WCAG 2.1 AA.

¿ckm:brand puede ayudar a que personas no diseñadoras se mantengan dentro de la marca?

Sí. Aunque algunos assets están pensados para diseñadores y front‑end engineers, muchos documentos se escriben para marketers, equipos de contenido y perfiles generales:

• Los frameworks de voz y mensajes proporcionan patrones listos para usar.
• Los checklists dan criterios claros de sí/no sin jerga de diseño.
• El contexto de marca inyectado ayuda a que personas no diseñadoras usen herramientas de IA respetando la marca.

Al centralizar estos recursos, ckm:brand reduce la necesidad de dar indicaciones de marca caso por caso.

¿Qué pasa si ya tenemos un PDF de marca o una guía externa de estilo?

Puedes usar ckm:brand para operativizar tus materiales existentes:

• Traslada secciones clave de tu PDF a docs/brand-guidelines.md usando las plantillas incluidas.
• Codifica tus reglas de logo, paleta y tipografía en las referencias estructuradas.
• Usa los scripts de sincronización y validación para llevar esas reglas a tokens y controles de assets.

No tienes que descartar tu documento de marca actual; en su lugar, trata ckm:brand como la versión respaldada por repositorio y preparada para automatización.

¿ckm:brand es solo para productos de UI o también sirve para marketing general?

ckm:brand cubre ambas cosas:

• Para UI/UX y front‑end, ofrece sincronización con design tokens, variables CSS y especificaciones de color y tipografía.
• Para marketing y contenido, proporciona frameworks de mensajes, checklists de aprobación y organización de assets.

Si tu marca está presente en web, producto y campañas de marketing, ckm:brand ayuda a mantener todo alineado bajo un mismo sistema.

¿Con qué frecuencia deberíamos actualizar las guías de marca al usar ckm:brand?

El workflow parte de que tu marca es un sistema vivo. Un enfoque práctico es:

• Actualizar las guías cada vez que hagas un cambio significativo visual o de mensajes.
• Ejecutar el Brand Sync Workflow justo después de los cambios para mantener tokens y CSS sincronizados.
• Realizar periódicamente auditorías de consistencia usando los checklists en los canales clave.

Como todo vive en tu repositorio, las actualizaciones pueden seguir tus prácticas normales de control de versiones y revisión.