# Brand > Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo. Fuente: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand Markdown: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md Repositorio: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill Autor: nextlevelbuilder Licencia: MIT Actualizado: hace 23 días Coste de contexto: 46 tok instalada, 881 tok al activarse, 22.9k tok con todos los archivos del bundle Bundle: 18 archivos, 89 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent claude-code # Cursor npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent cursor # Codex npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent codex # Gemini CLI npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent gemini # Windsurf npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent windsurf # Cline npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent cline ``` ## Qué hace - Inyecta contexto de marca en los prompts a partir de docs/brand-guidelines.md - Sincroniza las guías de marca con assets/design-tokens.json y .css - Valida el naming, tamaño y formato de assets - Extrae y compara colores de imágenes contra la paleta de marca ## Cuándo usarla - Definir voz de marca y tono de contenido - Crear guías de identidad visual y estilo - Elaborar frameworks de mensajería - Revisar consistencia de marca u organizar/aprobar assets ## Qué la activa - "Actualiza la identidad de marca y sincroniza los design tokens" - "Valida este asset contra las reglas de naming y formato" - "Extrae la paleta de colores de este logo y compárala" ## Antes de instalar - Requiere Node.js para ejecutar los scripts .cjs y un archivo docs/brand-guidelines.md como fuente de verdad. - Necesita en el PATH: node - Variables de entorno: DEFAULT_GUIDELINES_PATH, DESIGN_TOKENS_CSS, DESIGN_TOKENS_JSON, RULES - reads environment config ## Archivos - SKILL.md — 3 KB - references/approval-checklist.md — 4 KB - references/asset-organization.md — 5 KB - references/brand-guideline-template.md — 3 KB - references/color-palette-management.md — 4 KB - references/consistency-checklist.md — 2 KB - references/logo-usage-rules.md — 5 KB - references/messaging-framework.md — 2 KB - references/typography-specifications.md — 5 KB - references/update.md — 3 KB - references/visual-identity.md — 2 KB - references/voice-framework.md — 2 KB - scripts/extract-colors.cjs — 9 KB - scripts/inject-brand-context.cjs — 9 KB - scripts/sync-brand-to-tokens.cjs — 10 KB - scripts/tests/test_sync_brand_to_tokens.py — 4 KB - scripts/validate-asset.cjs — 10 KB - templates/brand-guidelines-starter.md — 6 KB ## SKILL.md Reproducido tal cual desde nextlevelbuilder/ui-ux-pro-max-skill bajo MIT. Esta sección es el documento original y está en inglés. # Brand Brand identity, voice, messaging, asset management, and consistency frameworks. ## When to Use - Brand voice definition and content tone guidance - Visual identity standards and style guide development - Messaging framework creation - Brand consistency review and audit - Asset organization, naming, and approval - Color palette management and typography specs ## Script Paths Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/` is this skill's own `scripts/` folder, and `..//scripts/` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it. ## Quick Start **Inject brand context into prompts:** ```bash node scripts/inject-brand-context.cjs node scripts/inject-brand-context.cjs --json ``` **Validate an asset:** ```bash node scripts/validate-asset.cjs ``` **Extract/compare colors:** ```bash node scripts/extract-colors.cjs --palette node scripts/extract-colors.cjs ``` ## Brand Sync Workflow ```bash # 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 ``` The sync stops when it detects existing token files, `:root` custom properties or Tailwind v4 `@theme` variables in common CSS entry points and their local CSS imports, or Tailwind theme colors and presets. Review the reported source before proceeding. If the detected files are the managed `assets/design-tokens.*` outputs from an earlier sync and replacing them is intentional, re-run with `--force`. **Files synced:** - `docs/brand-guidelines.md` → Source of truth - `assets/design-tokens.json` → Token definitions - `assets/design-tokens.css` → CSS variables ## Subcommands | Subcommand | Description | Reference | |------------|-------------|-----------| | `update` | Update brand identity and sync to all design systems | `references/update.md` | ## References | Topic | File | |-------|------| | Voice Framework | `references/voice-framework.md` | | Visual Identity | `references/visual-identity.md` | | Messaging | `references/messaging-framework.md` | | Consistency | `references/consistency-checklist.md` | | Guidelines Template | `references/brand-guideline-template.md` | | Asset Organization | `references/asset-organization.md` | | Color Management | `references/color-palette-management.md` | | Typography | `references/typography-specifications.md` | | Logo Usage | `references/logo-usage-rules.md` | | Approval Checklist | `references/approval-checklist.md` | ## Scripts | Script | Purpose | |--------|---------| | `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection | | `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css | | `scripts/validate-asset.cjs` | Validate asset naming, size, format | | `scripts/extract-colors.cjs` | Extract and compare colors against palette | ## Templates | Template | Purpose | |----------|---------| | `templates/brand-guidelines-starter.md` | Complete starter template for new brands | ## Routing 1. Parse subcommand from `$ARGUMENTS` (first word) 2. Load corresponding `references/{subcommand}.md` 3. Execute with remaining arguments ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [nextlevelbuilder](https://skillsagentes.com/creators/nextlevelbuilder.md) — 7 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Ui Ux Pro Max](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max.md): Inteligencia de diseño UI/UX para web, móvil y escritorio: úsala al diseñar, construir, revisar o corregir interfaces, componentes, accesibilidad, interacción, layout y tipografía. - [Design](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design.md): Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI), CIP, presentaciones HTML, banners, iconos y fotos sociales. - [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas. - [Design System](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md): Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca. - [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas. ## Skills relacionadas - [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas. - [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas. - [Hig Platforms](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-platforms.md): HIG de Apple por plataforma: iOS, iPadOS, macOS, tvOS, watchOS y visionOS. No portes diseños; respeta cada modelo de interacción. - [Hig Components Status](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-status.md): HIG de Apple para progreso y estado: progress indicators, status bars y activity rings. Cuándo usar barra determinate frente a spinner. - [Hig Components Menus](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-menus.md): HIG de Apple para menús y botones: menu bar, toolbars, context menus, action buttons, pop-up y pull-down. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)