Diseño de pósters de campaña

Diseño de Pósteres de Campaña

Para el usuario: envía un mensaje, por ejemplo:

Usa la habilidad de diseño de pósteres de https://github.com/greatopomu/claude-assets para diseñar 5 pósteres de Instagram para [marca]. Aquí está su sitio web / volante antiguo: [enlace o archivo].

Eso es todo. Claude pide cualquier otra cosa que necesite.

Para Claude: este archivo te dice cómo ejecutar todo el trabajo. Síguelo de principio a fin. Mantén el esfuerzo del usuario bajo: pregunta una vez, luego trabaja.

---

Parte 0: Configuración (haz esto primero, en silencio)

Las herramientas auxiliares están en el mismo repositorio, en tools/. Las rutas a continuación, como tools/export_png.py, son relativas a la raíz del repositorio.

1. Obtén las herramientas. Si puedes ejecutar comandos y el repositorio aún no está en esta computadora: git clone --depth 1 https://github.com/greatopomu/claude-assets.git Si git no está disponible, descarga https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip y descomprímelo.
2. Instala y verifica: python -m pip install -r tools/requirements.txt luego python tools/check_setup.py. Informa qué funciona en esta computadora. Para probar que cada herramienta funciona, ejecuta python tools/selftest.py.
3. Empieza desde la plantilla: copia skills/poster-design/template/index.html en la carpeta del proyecto. Ya tiene los tokens de la marca, la página de vista previa (Ajustar / Teléfono / 100%) y el modo de exportación ?solo=pN.

Alternativas. Indica claramente al usuario cuál de estas aplica.

Si esto falta	Haz esto en su lugar
No hay forma de ejecutar código (un chat simple)	Crea los pósteres como un archivo HTML (o un artefacto) usando la plantilla. Para exportar, el usuario abre el archivo en Chrome, añade ?solo=p1 a la dirección, abre las Herramientas de Desarrollo (F12 / Cmd+Opt+I) → Menú de comandos (Ctrl/Cmd+Shift+P) → "Capturar captura de pantalla de tamaño completo". Repite para cada póster.
Python funciona pero no se encuentra ningún navegador	Instala Google Chrome o Edge, configura CHROME_PATH a un navegador basado en Chromium, o ejecuta pip install playwright y luego python -m playwright install chromium. De lo contrario, usa la exportación manual de arriba.
No hay CLI de Higgsfield ni créditos	Usa fotos de stock (Ruta A) o ChatGPT (Ruta B).
No hay navegador incorporado (Claude desktop) para ChatGPT	Pide al usuario que genere la imagen en ChatGPT y la descargue, luego que comparta el archivo.
No se puede descargar de internet	Pide al usuario que descargue las fotos de stock elegidas y las comparta.

Las herramientas de imagen son ayudantes opcionales. Si una no se puede ejecutar, haz el mismo paso de otra manera (por ejemplo, elige fotos a ojo) y continúa.

---

Lo que estás haciendo

Pósteres de campaña diseñados que parecen hechos por un diseñador gráfico senior. No son imágenes de IA con texto superpuesto.

• Construye cada póster en HTML, CSS y SVG, luego expórtalo como PNG con un navegador sin cabeza (tools/export_png.py).
• Las imágenes (personas, productos, lugares) son solo ingredientes. Las obtienes de una de tres rutas (Parte 4). Una herramienta de imagen nunca hace el póster terminado.
• Cada marca obtiene su propio aspecto. El método sigue siendo el mismo; la dirección de arte se elige de nuevo cada vez. Nunca reutilices los diseños de otra marca.

---

Parte 1: Pregunta primero (un mensaje, solo lo que falta)

Lee el mensaje del usuario y cualquier archivo o enlace. Luego envía un mensaje corto con solo las preguntas que aún necesitas responder. Ofrece un valor predeterminado sensato para cada una, para que el usuario pueda responder "los valores predeterminados están bien".

Pregunta sobre esto, en este orden, saltando cualquier cosa ya respondida:

1. Conceptos básicos de la marca: nombre, qué vende, ciudad o país, quiénes son los clientes.
2. Activos de la marca: archivo del logotipo, colores de la marca (o un sitio web o volante del que puedas muestrearlos), y cualquier fuente de la marca.
3. Tamaño y uso: predeterminado 1080 × 1350 para Instagram. Otras opciones: 1080 × 1080, 1080 × 1920 historias, A4 o A3 impresión.
4. Cuántos pósteres y qué debe decir cada uno: por ejemplo, servicios, ofertas, un evento, o "tu elección".
5. Detalles obligatorios: precios, fechas, número de teléfono, dirección, sitio web o llamado a la acción. Cualquier cosa no proporcionada se marca como marcador de posición.
6. Reglas de personas: el valor predeterminado son las reglas de la Parte 6.
7. Imágenes: el valor predeterminado es usar lo que esté disponible, en este orden: fotos de stock (gratis), ChatGPT en el navegador incorporado (gratis, limitado), luego Higgsfield (créditos pagos). Pregunta si se pueden usar créditos pagos.
8. Dónde guardar: el valor predeterminado es una nueva carpeta con el nombre de la marca.

No preguntes sobre elecciones de diseño como estilo, diseño o efectos. Esos son tu trabajo. Mostrarás la dirección en la Parte 2.

---

Parte 2: Planifica, luego muestra un punto de control

Haz todo esto tú mismo, luego muestra al usuario un plan corto para aprobar.

1. Muestrea los colores de la marca de sus archivos con un script (tools/sample_colours.py); no adivines. Planea redibujar el logotipo como SVG limpio, nunca un recorte borroso.
2. Investiga la categoría: cómo se anuncian 3 o 4 marcas líderes (diseño, tipografía, imaginería, tono), incluyendo un competidor local. Toma prestado el pensamiento, nunca los activos. Guarda notas y fuentes en RESEARCH.md.
3. Recopila verdad local: lugares reales, hábitos cotidianos, palabras que la gente usa realmente y detalles regionales. Ejemplos de detalles regionales: el color de vehículo habitual en ese estado, o la vestimenta local.
4. Elige la dirección de arte: elige una opción por fila de la tabla de la Parte 3, que se adapte a esta marca y audiencia. También elige las fuentes (Google Fonts) y cómo se usan los colores: cuál lidera, cuál es el acento y cuáles son los fondos.
5. Escribe las ideas de los pósteres: para cada póster, una idea, un titular de menos de 8 palabras, una línea de apoyo que comience con lo que el cliente obtiene, un llamado a la acción, la imagen necesaria y su elemento narrativo. Ningún póster comparte diseño o elemento narrativo.

Punto de control, el único antes de construir. Muestra al usuario:

• los colores
• la dirección de arte en 2 o 3 líneas
• las fuentes
• la lista de pósteres con sus titulares

Pregunta "¿Adelante, o cambia algo?" Mantenlo breve.

---

Parte 3: Opciones de dirección de arte

Elige por marca. Diferentes marcas deben diferir en varias filas.

Opción	Opciones
Iluminación	oscuro y atmosférico · brillante y aireado · tonos medios terrosos · blanco y negro más un color
Uso del color	un color lidera con un acento · fotos duotono · bloques de color audaces · neutro con un acento de marca
Tipografía	grotesca pesada · condensada y alta · geométrica redonda · serifs editorial más sans · acento escrito a mano
Formas	manchas y ondas orgánicas · ángulos geométricos duros · líneas finas y cuadrículas · papel recortado · círculos y arcos
Tratamiento de la foto	recorte sobre formas · a sangre con superposición de color · foto dentro de una forma · banda de foto ancha · teñida · collage
Textura y luz	brillos y estelas de luz · plano y limpio · grano · puntos de medios tonos · solo sombras suaves
Diseño	titular arriba, imagen abajo · pantalla dividida · imagen centrada, tipo alrededor · liderado por tipo · diagonal · cuadrícula de paneles
Elemento narrativo	tarjeta de aplicación o interfaz · adhesivo o insignia · boleto o recibo · mapa o ruta · número grande o gráfico · cita · antes y después

No predetermines fondos oscuros con acentos brillantes. Úsalos solo cuando la marca lo requiera.

---

Parte 4: Obtención de imágenes (tres rutas)

Usa la ruta que se adapte a cada póster. Verifica cada imagen contra las reglas de personas (Parte 6) antes de usarla. Registra fuentes y licencias en RESEARCH.md.

A. Fotos de stock (Pexels, Unsplash, Pixabay). Gratis, personas y lugares reales.

• Busca con varias consultas locales.
• Compara 20 a 30 miniaturas en una hoja de contactos (tools/contact_sheet.py).
• Rechaza fotos con:
  • el lugar o las personas equivocadas
  • una infracción de las reglas
  • matrículas o detalles privados legibles
  • daños o desorden que socavan el mensaje
  • sin espacio para texto
• Descarga de 1600 a 2000 px de ancho.
• Arregla detalles locales si es necesario. tools/recolour.py cambia un color dentro de un área.
• Deja que la forma de la foto decida el diseño: las fotos de retrato funcionan a sangre; las fotos de paisaje funcionan como una banda o dentro de un marco.

B. ChatGPT en el navegador incorporado. Gratis; mejor para escenas completas.

• El usuario debe haber iniciado sesión. Escribe un mensaje detallado: sujeto, vestimenta que siga las reglas, entorno, luz, "retrato 4:5, sin texto, sin logotipos".
• Para cambiar un detalle, quédate en el mismo chat de ChatGPT: "Misma imagen, cambia solo …".
• Límite: el plan gratuito permite alrededor de 3 imágenes al día.
• Obtener el archivo: la descarga de ChatGPT no funciona desde el panel del navegador.
  • Mejor: pide al usuario que haga clic en descargar y te diga el nombre del archivo.
  • Alternativa: muestra la imagen a pantalla completa en su tamaño real, captúrala en 2 × 2 mosaicos de captura de pantalla y únelos con tools/stitch_tiles.py.

C. Higgsfield. Créditos pagos; mejor para recortes.

• Revisa el saldo y el precio primero (higgsfield account status, higgsfield generate cost …).
• GPT Image 2.6 con --background transparent da recortes. Usa calidad media para personas y baja para objetos. El plan básico ejecuta alrededor de 4 trabajos a la vez.
• Limpia el brillo tenue alrededor de cada recorte con tools/clean_cutout.py.
• Para cambiar un detalle de una imagen, pásala de nuevo con --image y describe solo el cambio.

Cada mensaje de imagen indica: el sujeto y la acción, la vestimenta que sigue las reglas de personas, la iluminación que coincide con el estado de ánimo del póster, el encuadre, "fotorrealista, sin texto, sin logotipos, sin marca de agua", y espacio dejado para el tipo cuando es una escena completa.

---

Parte 5: Construcción de los pósteres

Configura primero (empieza desde skills/poster-design/template/index.html):

• un index.html con tokens de color, fuentes y el logotipo como un símbolo SVG
• un cierre compartido (logotipo más estilo de llamado a la acción) que se ajuste a la dirección de arte
• una página de vista previa que muestre cada póster en proporción real, escalado para ajustarse, con botones Ajustar / Teléfono (390 px de ancho) / 100%
• un modo ?solo=pN para exportación
• sirve la carpeta desde un servidor local (no file://) y ábrela en el panel del navegador

Cada póster:

• Una idea: titular, línea de apoyo, llamado a la acción.
• Al menos cuatro capas, con al menos un elemento que cruce frente al sujeto.
• Un elemento narrativo que muestre el producto funcionando, como una tarjeta de aplicación realista, boleto, rastreador, mapa o insignia.
• Formas, degradados y luz personalizados, no cajas de plantilla.
• Varía los efectos característicos en todo el conjunto mientras mantienes el sistema compartido.

Principios de diseño (no negociables). Estos son los errores que hacen que un póster parezca hecho por una máquina. Planifícalos mientras construyes, no solo al final.

• Espacio para respirar. El texto tiene al menos 24 px de espacio libre (40 px es mejor) de cada borde de forma, anillo, línea, insignia e imagen. Un círculo o anillo nunca debe correr a lo largo, a través o cerca del texto.
• Sin casi roces. Dos elementos se superponen claramente y a propósito (por un cuarto del más pequeño o más), o están bien separados. Los bordes que casi se tocan, o se alinean por accidente, parecen un error. Ejemplos: la parte superior de un producto alineada con la parte superior del círculo detrás de él, o un adhesivo rozando una esquina de la caja.
• Los círculos se encuentran con los paneles claramente. Un círculo que se encuentra con un pie de página o una banda se detiene bien antes (24 px o más) o pasa claramente por debajo (40 px o más). Nunca roza el borde.
• Empaquetado claro. Verifica cada recorte sobre el color de fondo real del póster, no solo sobre blanco y negro. El fondo sobrante, los bordes irregulares y las áreas "escarchadas" sólidas solo se ven en el color real.
• Menos decoraciones. Cada anillo, contorno u hoja adicional es una cosa más que puede abarrotar el texto. Si no añade significado, déjalo fuera.
• Jerarquía visual. Decide el orden de lectura: (1) titular o producto, (2) línea de apoyo, (3) elemento narrativo, (4) cierre. El tamaño, peso y color deben seguir ese orden. Solo una cosa grita.
• Emparejamiento y agrupación. Cada icono se sienta justo al lado de la única cosa que etiqueta, con el mismo espacio en cada par. Cada detalle de contacto obtiene su propio icono: WhatsApp junto al número, Instagram junto al nombre de usuario. Agrupa elementos relacionados bajo un pequeño encabezado ("Ordene ahora", "Disponible en"). Separa grupos no relacionados con espacio claro.
• Alineación.
  • Un margen izquierdo para el logotipo, titular, cuerpo y pie de página.
  • Los bloques del pie de página se alinean en la parte superior, para que sus pequeños encabezados compartan una línea.
  • Las filas y columnas de insignias tienen un espaciado uniforme y medido.
• Saltos de línea.
  • El texto corrido nunca termina en una sola palabra corta. Usa text-wrap: balance en titulares y texto del cuerpo, luego lee cada línea.
  • Un salto debe caer entre frases, no dentro de una ("sobre avena, / guinea corn" está mal; "sobre / avena, guinea corn y pulpa de soya" está bien).
  • Los titulares se rompen por significado, con un <br> donde elijas.
• Un nombre por cosa. Usa los mismos nombres de productos o sabores, listas de ingredientes y afirmaciones en cada póster del conjunto. Antes de publicar, enumera cada afirmación (como "sin azúcar añadido" o "100% natural") para que el cliente las confirme.
• El pie de página también está diseñado. Recibe el mismo cuidado que el héroe: jerarquía, emparejamiento, alineación y al menos 36 px de relleno.

Menú de técnicas (elige por póster; no las uses todas):

• Profundidad:
  • orden de capas: fondo → textura → brillo o campos de color → formas → sujeto → elemento de primer plano → elemento narrativo → superposición para legibilidad → tipo → cierre
  • una línea de primer plano, forma o tarjeta que cruce el sujeto
  • un sujeto que se sale de su tarjeta o marco
  • una tarjeta colocada detrás del sujeto para que una mano se superponga a ella
• Luz y color:
  • un brillo radial desenfocado detrás del sujeto
  • luz de borde solicitada en el mensaje de la imagen para que coincida con el póster
  • estelas de luz (una ruta SVG dibujada dos veces: brillo desenfocado más núcleo nítido)
  • tipo de contorno o neón usando filter: drop-shadow apilado (no text-shadow)
  • una superposición de color de marca en fotos: clara sobre el sujeto, sólida detrás del texto
  • re-gradar una imagen (día a noche, más cálida) con un script
• Forma y textura:
  • manchas u ondas con una línea de acento fino
  • bordes de foto curvados o en ángulo
  • cuadrículas, puntos o patrones desvanecidos
  • anillos y rayos
  • insignias circulares con texto en una ruta (<textPath> con textLength)
• Tipo:
  • una cara de visualización pesada y una cara de texto limpia
  • interlineado del titular 0.85 a 0.92, ligeramente apretado

… [truncado para traducción]