Ir al contenido

brand

  • Grupo: Diseño gráfico y marca
  • Cuándo se activa: Voz de marca, identidad visual, guías de marca
  • Se instala: Opcional: llega con un paquete de skills.

Documentación completa upstream (inglés): SKILL.upstream.md (97 líneas). No la leas entera: usa el mapa y lee solo la sección que necesites (Read con offset/limit o Grep).

  • Usar: definir o actualizar voz, mensajes y guía de estilo de marca (senzu/design-system/<slug>/brand-guidelines.md).
  • Usar: auditar consistencia, validar naming/tamaño/formato de assets, comparar colores de una imagen con la paleta.
  • Usar: inyectar contexto de marca en prompts de otras skills (banners, slides, social) o sincronizar la guía a tokens.
  • NO usar: tokens semánticos y CSS vars de un design system → design-system; componentes Tailwind/shadcn → ui-styling.
  • NO usar: generar logos o mockups con IA → design (Logo/CIP).
Tarea Lee solo
Empezar una marca nueva SKILL.upstream.md L23-40 (§Quick Start) + templates/brand-guidelines-starter.md
Actualizar marca y sincronizar tokens SKILL.upstream.md L42-61 (§Brand Sync Workflow, §Subcommands) + references/update.md
Definir voz o mensajes references/voice-framework.md + references/messaging-framework.md
Revisar consistencia / aprobar assets references/consistency-checklist.md + references/approval-checklist.md
Depurar un script SKILL.upstream.md L78-85 (§Scripts) y el .cjs correspondiente
Líneas Sección Para qué
14-21 When to Use Casos de uso del skill
23-40 Quick Start Comandos node para inyectar contexto, validar assets y extraer colores
42-55 Brand Sync Workflow Flujo guía → design-tokens.json/.css y archivos implicados
57-61 Subcommands Subcomando update → references/update.md
63-76 References Tabla tema → archivo de referencia
78-85 Scripts Propósito de cada script
87-91 Templates Plantilla de arranque
93-97 Routing Cómo se resuelve el subcomando desde $ARGUMENTS
  • references/voice-framework.md — voz y tono. references/messaging-framework.md — pilares de mensaje.
  • references/visual-identity.md — identidad visual. references/logo-usage-rules.md — uso correcto del logo.
  • references/color-palette-management.md — paleta. references/typography-specifications.md — tipografía.
  • references/asset-organization.md — naming y carpetas. references/approval-checklist.md y references/consistency-checklist.md — auditoría.
  • references/brand-guideline-template.md — estructura de la guía. references/update.md — flujo del subcomando update.
  • scripts/inject-brand-context.cjs — extrae contexto de marca para prompts (node scripts/inject-brand-context.cjs senzu/design-system/<slug>/brand-guidelines.md [--json]).
  • scripts/sync-senzu.mjs (Senzu) — guía → design-tokens.json y .css junto a la guía, en Claude y en Codex (node <skills-dir>/brand/scripts/sync-senzu.mjs [--slug x] [--dry-run]). Úsalo SIEMPRE en lugar de sync-brand-to-tokens.cjs: el original tiene rutas fijas (docs/, assets/, .claude/skills) y en Codex no genera el CSS.
  • scripts/validate-asset.cjs — valida naming, tamaño y formato (node scripts/validate-asset.cjs <ruta>).
  • scripts/extract-colors.cjs — extrae/compara colores (node scripts/extract-colors.cjs --brand-file senzu/design-system/<slug>/brand-guidelines.md --palette | <imagen>); scripts/tests/ — test de regresión (py -3 -m pytest).
  • templates/brand-guidelines-starter.md — plantilla completa para marcas nuevas. No hay assets/.
  • senzu/design-system/<slug>/brand-guidelines.md (junto a MASTER.md y gustos.md) es la única fuente de verdad; los tokens se regeneran con sync-senzu.mjs, nunca a mano. Proyecto con la guía en docs/ (ubicación antigua de la skill): funciona, pero muévela.
  • Logo ya elegido (senzu/design-system/<slug>/logos/final/): la guía lo cita por su ruta; no se proponen logos nuevos sin que el usuario lo pida.
  • Tras editar la guía, ejecutar sync-brand-to-tokens.cjs y verificar con inject-brand-context.cjs --json.
  • Todo asset nuevo pasa por validate-asset.cjs antes de aprobarse; colores fuera de paleta se detectan con extract-colors.cjs.
  • Cualquier pieza creativa de otra skill (banner, slides, social) debe inyectar contexto de marca antes de diseñar.
  • Detecta el stack como indica la skill front-activation/skill-router (senzu/senzu.json → package.json). Skill agnóstica de framework (scripts Node); los tokens CSS generados se consumen igual en React, Vue, Astro o vanilla. Requiere Node en el entorno.