📘 El manual de marca, ahora digital
¿Eres nuevo aquí? Una carpeta de marca
(en inglés, brand_assets — «activos de marca») es solo
un directorio (una carpeta dentro del proyecto en tu computadora) donde
se guardan, en un solo lugar, los archivos que definen la identidad visual: el logo en sus distintas versiones, los
colores oficiales, las fuentes elegidas y, a veces, incluso ejemplos de cómo "habla" la marca. Piensa en una imprenta
antigua: toda empresa seria tenía un manual de identidad visual, un cuaderno grueso con el logo en vector,
la paleta con los códigos exactos de tinta y reglas de uso, para que nadie inventara un verde distinto en un
folleto. La carpeta de marca es ese mismo cuaderno, pero en archivos y siempre a mano de tu agente.
La diferencia que importa aquí: el manual físico se quedaba en un cajón, y alguien tenía que ir a buscarlo, hojearlo y copiarlo a mano. La carpeta de marca está dentro del proyecto — el mismo lugar donde Claude Code ya está trabajando. Cuando pides «crea una página de contacto nueva», el agente puede simplemente abrir esta carpeta y leer, sin tener que volver a explicar «usa el azul #0d9488, la fuente es Inter, el logo está en tal lugar» por enésima vez.
💡 Concepto principal
Carpeta de marca = material original y permanente de la identidad visual, guardado dentro del proyecto, listo para que cualquier agente lo consulte sin depender de tu memoria.
- •Sin ella: vuelves a explicar la marca en cada conversación nueva — y a veces olvidas algún detalle.
- •Con ella: el agente lee los archivos y ya lo sabe. Tu parte se limita a revisar el resultado.
🌐 Una fuente central, varios frontends alimentados
¿Eres nuevo aquí? Front-end es la parte de un sitio o una aplicación que aparece en pantalla: lo que el visitante ve y toca. Si construyes varias páginas a lo largo del tiempo (una landing, un dashboard interno, un menú digital), cada una es un front-end diferente, pero todas deberían parecer de la misma marca. Sin una única fuente, cada front-end termina usando el color de una forma, el logo de otra, y el resultado es una «familia» que no se parece en nada entre sí.
La carpeta de marca resuelve eso al convertirse en la única fuente de verdad: cada vez que un agente va a crear un front-end nuevo, consulta esa misma carpeta antes de escribir cualquier CSS. El diagrama de abajo muestra esta relación: una carpeta central, varios proyectos que la consultan.
Leyenda: la carpeta queda en el centro, permanente. Cada nuevo front-end la usa en vez de reinventar la identidad — el resultado visual es consistente entre proyectos diferentes, no solo dentro de uno.
🔍 Por dentro
- Consistencia: el mismo color exacto, el mismo logo, en cada página que creas — sin depender de que recuerdes de memoria el código hex.
- Ahorrar trabajo duplicado: el agente no pierde tiempo «adivinando» la marca a partir de una captura de pantalla antigua; lee el archivo correcto.
🗃️ La estructura de archivos por dentro
No existe una regla única y obligatoria para nombrar las carpetas: lo importante es la organización, no el nombre exacto. Pero una estructura sencilla y probada, que ayuda a que el agente entienda todo de inmediato, es este árbol de carpetas. Cada subcarpeta contiene UN tipo de recurso, y un archivo de texto (Markdown o JSON) documenta las decisiones que no se pueden «ver» con solo mirar el archivo, como el código hex exacto de cada color.
meu-projeto/ ├── brand_assets/ │ ├── logo/ │ │ ├── logo-cor.svg # versão colorida, uso padrão │ │ ├── logo-branco.svg # pra fundos escuros/fotos │ │ ├── logo-preto.svg # pra fundos muito claros │ │ └── icone.svg # só o símbolo, sem o nome │ ├── fontes/ │ │ ├── Inter-Regular.woff2 │ │ └── Inter-Bold.woff2 │ ├── cores.md # paleta com códigos hex + quando usar cada uma │ ├── tipografia.md # qual fonte, quais tamanhos, quais pesos │ └── tom-de-voz.md # exemplos de frases "no estilo da marca" └── index.html, src/, etc. (o resto do projeto)
¿Eres nuevo aquí? Hex es el código de
seis caracteres que representa un color exacto (como #0d9488) —
sin él, «azul verdoso» puede convertirse en cinco tonos diferentes según quién lo mire. El archivo
cores.md existe exactamente para fijar ese
número, una vez y para siempre. Lo mismo se aplica a tipografía — el conjunto
de decisiones sobre qué fuente usar y con qué tamaño y peso (fino, normal, negrita) en cada situación.
✓ cores.md bien redactado
- ✓Nombre + hex + cuándo usarlo: «Teal principal #0d9488 — botones y enlaces destacados»
- ✓Incluye las variantes claras y oscuras ya calculadas, listas para copiar
- ✓Indica qué NO usar (p. ej., «nunca uses ámbar como texto sobre un fondo claro»)
✗ cores.md mal escrito
- ✗Solo el nombre vago: "azul de la marca" — sin código, cada proyecto usa un azul diferente
- ✗El color correcto solo aparece en una captura de pantalla antigua, nunca escrito en texto
- ✗Sin contexto de uso — el agente no sabe si es un color de fondo o de texto
🛠️ Crear la carpeta con el agente
No necesitas armar esta estructura a mano. Puedes pedirle al propio agente que cree la carpeta y documente
las decisiones a partir de un logo que ya tienes (o de una referencia visual, como en el módulo
5.5). El objetivo aquí es terminar este tema con una brand_assets/
de verdad en tu proyecto, no solo la teoría.
Junta lo que ya tienes
Un archivo de logo (aunque solo esté en PNG), una referencia de color de otro sitio tuyo o incluso una captura de Instagram de la marca. No tiene que ser perfecto: el agente te ayuda a organizarlo a partir de eso.
Pide que lo cree con el prompt de abajo
El agente crea las carpetas, extrae los colores del logo (o usa los que le indiques) y ya escribe el cores.md con los hex correctos.
Verifica antes de continuar
Abre brand_assets/cores.md y confirma que los códigos hexadecimales coincidan con tu marca real; si el agente "adivinó" un color por falta de referencia, corrígelo ahí mismo.
Crear la carpeta brand_assets/ completa, con el logo organizado, la paleta documentada con hex y la fuente definida, a partir de un logo/referencia que ya tienes en el proyecto.
Cria uma pasta brand_assets/ na raiz deste projeto pra guardar nossa identidade visual. Meu logo original está em <caminho/do/logo-original.png>. Faça o seguinte: 1. Crie brand_assets/logo/ e salve dentro: uma versão colorida (logo-cor), uma em branco pra fundo escuro (logo-branco) e o ícone isolado (icone). 2. Extraia as 2-3 cores principais do logo, documente em brand_assets/cores.md com nome + código hex + para que serve cada uma (ex.: "cor de destaque: botões e links"). 3. Em brand_assets/tipografia.md, registre a fonte <nome da fonte que você usa> com os tamanhos padrão de título e texto. 4. Não invente nada que não vier do logo/referência — se faltar informação, me pergunte em vez de chutar.
✅ Cómo verificar
Después de ejecutarse, abre la carpeta brand_assets/ en el explorador de archivos: los 4 archivos del logo deben existir de verdad (no estar vacíos), y cores.md debería tener códigos hexadecimales reales (que empiecen con #), no descripciones vagas como «azul claro».
🔗 Skill de diseño + carpeta de marca, juntas
Vale la pena conectar esto con lo que ya viste en la ruta. En el módulo 5.2 creaste una skill de diseño global: un conjunto de instrucciones fijas que enseña al agente cómo construir una interfaz (el proceso: qué componentes usar, cómo estructurar el CSS). En 5.5, diste una referencia visual puntual para un rebranding específico. La carpeta de marca es diferente de las otras dos: es la material bruto y permanente — el "qué", no el "cómo".
Juntas, las tres cosas se complementan: la skill conoce el proceso, la carpeta de marca guarda los datos fijos de la
identidad y una referencia puntual (5.5) resuelve un caso específico cuando es necesario. Cuando pides
"construye una página nueva siguiendo nuestra skill de design", lo ideal es que esa skill ya sepa mirar
para brand_assets/ antes de decidir colores y fuentes,
en vez de reinventarlos en cada llamada.
💡 Concepto principal
- •Skill de diseño (5.2): el proceso: cómo construir.
- •Carpeta de marca (5.6): los datos — qué usar (color, fuente, logo).
- •Referencia visual (5.5): un ajuste puntual — cuando un caso específico requiere algo distinto de lo habitual.
💡 Consejo práctico
En tu skill de diseño (del 5.2), agrega una línea sencilla: «antes de decidir los colores y las fuentes, lee brand_assets/cores.md e tipografia.md si existen». Esto conecta las dos piezas sin tener que reescribir nada cada vez.
⚠️ Mantener actualizada: el error más común
Una carpeta de marca solo vale lo que tiene de actual. El error más frecuente no es crear algo mal:
es crearlo una vez, olvidarlo y dejar que la marca real evolucione sin actualizar los archivos. Seis meses después,
cambiaste el color principal en un sitio nuevo, pero cores.md
todavía tiene el color anterior, y el próximo proyecto sale con el color equivocado, porque el agente confió en el archivo, no
en que recordarías avisarle.
✓ Práctica saludable
- ✓Cada cambio de marca (nuevo color, nuevo logo) actualiza
brand_assets/el mismo día - ✓Un único lugar guarda los activos: todos los proyectos apuntan a él (o los copian de ahí)
- ✓De vez en cuando, le pide al agente que "compruebe si brand_assets coincide con el sitio en producción"
✗ Trampa común
- ✗Carpeta creada una vez, nunca más actualizada — se convierte en una imagen antigua de la marca
- ✗Activos de marca dispersos: un logo en Google Drive, otro en un correo electrónico y otro solo en la memoria de alguien
- ✗Cada proyecto nuevo redescubre la marca desde cero, mirando «por encima» el sitio anterior
Lista de verificación antes de considerar que tu carpeta de marca está lista:
cores.md con códigos hex reales y «cuándo usar cada una»📝 Ejercicio
Si ya tienes algún logo o sitio publicado (aunque sea personal), crea ahora la carpeta brand_assets/ en él usando el prompt del tema 4. Si todavía no tienes nada definido para la marca, elige un color y una fuente que te gustaría usar de aquí en adelante, y documéntalo del mismo modo: es más fácil mantener la coherencia desde el inicio que corregirla después.
Verificación rápida (opcional): ¿cuál es el papel principal de la carpeta de marca en comparación con la skill de diseño del módulo 5.2?