ashuwhy/identidad-de-marca

Identidad de marca

El proceso que sigue es la parte duradera. Los modelos de imagen, las especificaciones de íconos y los tamaños de tienda cambian; comprueba la especificación actual de la plataforma antes de renderizar cualquier cosa, y (revisado 2026-10) marca los tamaños con más probabilidad de moverse.

Los scripts viven en ~/claude-skills/tools/brand/. make_versus.py (la hoja del paso 3) y make_fonts.py (paso 5) funcionan en cualquier aplicación tal cual. El resto (prompts, dibujo de candidatos, el renderizador de assets, marcos de tienda, carteles) fueron escritos para una aplicación y dibujan su marca, así que léelos para entender el método y adáptalos. Necesitan rsvg-convert, Pillow, fontTools y Chrome sin interfaz gráfica.

1. Brief

Un único brief compartido pegado antes de cada concepto (tools/brand/logo-prompts.md es uno ya trabajado):

• dónde se usará (ícono de lanzador, ficha de tienda), por lo que debe leerse a 48px y sobrevivir como silueta de un solo color
• vector plano, formas sólidas, sin degradados, sombras, 3D, texturas ni texto
• la paleta exacta en hexadecimal, y "nada más"
• una marca centrada sobre un mosaico de esquinas redondeadas
• varias variaciones en una cuadrícula por ejecución, así una ejecución explora un concepto en lugar de apostar por un único render
• una lista de prohibiciones de los clichés de la categoría

Listo cuando: el brief cabe en un párrafo y cada concepto es una línea adicional.

2. Rondas

• Ronda 1: seis o siete conceptos más un brief abierto. Elige uno.
• Ronda 2: conserva al ganador y varía un eje por prompt (geométrico versus redondeado, qué significa el acento, el contrapunto, la prueba de estrés de un solo color pequeño). Explica la anatomía de las letras con palabras; los modelos confunden glifos similares entre escrituras.
• Muestra a personas externas al desarrollo antes de seguir adelante. Cómo se lee un símbolo, script o color a la audiencia puede hundir una marca que ningún prompt detectaría. Un comentario externo vale una ronda.
• Ronda 3 prueba: ¿podría un niño dibujarlo de memoria tras una sola mirada? Acredita cualquier boceto a quien lo dibujó.

3. Hoja de comparación (Versus Sheet)

Redibuja los dos o tres finalistas en código (cadenas SVG), luego somételos a lo que realmente encuentra un ícono de lanzador (make_versus.py hace todo a partir de los SVG):

• las máscaras de círculo y squircle
• una vista "de un vistazo" con desenfoque
• íconos temáticos (monocromáticos) en tonos claro y oscuro del sistema
• 48, 32, 24 y 16 píxeles, mostrados ampliados
• proporción de tinta y un veredicto de una línea por candidato

Confía en la hoja antes que en una preferencia. Una marca que necesita explicación pierde frente a una que se lee por sí misma primero.

Listo cuando: un candidato gana en la hoja y puedo decir en una frase por qué.

4. Un dibujo, cada recurso

El ganador se convierte en una función con parámetros (colores, detalle activado o desactivado por debajo de un tamaño). Un único script renderiza todos los recursos a partir de ella; icon-assets.md contiene la matriz y la regla detrás de cada tamaño. En la aplicación, dibuja la marca con un componente basado en los mismos números en lugar de enviar PNG, así es nítida en todos los tamaños y puede cambiar de color en modo oscuro.

Luego, un kit de logo (bloqueos y marca sola, claro y oscuro, SVG y PNG) en los docs del repositorio, para que nadie haga captura de pantalla de la app para obtener un logo.

5. Tipografía

Fuentes autohospedadas, subconjunto a woff2 con fontTools (los scripts que necesita el producto más su moneda y símbolos), ejes variables conservados. Una compilación que descarga fuentes tiene una dependencia de red que puede fallar en un despliegue. (revisado 2026-10: next/font/google falló una compilación de Vercel de esta manera).

6. Arte de tienda y carteles

• Renderiza marcos de tienda como HTML mediante Chrome sin interfaz gráfica a los tamaños actuales de la tienda (revisado 2026-10: capturas de teléfono Play 1080x1920, gráfico destacado 1024x500, ícono de ficha 512px RGB sin alfa). Usa capturas reales de un teléfono real dentro de un marco dibujado. Chrome puede salir con código distinto de cero después de escribir, así que trata el archivo de salida como la señal de éxito.
• Ningún nombre o dato real de usuario en ninguna pantalla, y cada afirmación en el texto debe ser cierta para la compilación bajo revisión.
• Sube con play.py icon y play.py art (ver expo-release). El ícono de ficha es su propio recurso; ninguna compilación lo cambia.
• Carteles y miniaturas: diseña para cada recorte que haga la app, y sube cada render a una nueva ruta (ver mobile-performance, Imágenes).