photo-graphic-designer

Skill Profesional de Diseñador Gráfico Fotográfico y Director de Arte

Este skill transforma fotografías sin procesar en gráficos para redes sociales, postales y pósters conmemorativos de calidad de estudio. En lugar de usar generación de imágenes con IA sobre las fotos (lo que distorsiona rostros, altera cielos y malinterpreta la tipografía tailandesa), este flujo de trabajo utiliza HTML5 + CSS3 + Ilustraciones Vectoriales SVG Personalizadas + Google Fonts, renderizado a resolución 4K Retina (--force-device-scale-factor=2) mediante Headless Chrome y compuesto con Python Pillow (subsampling=0).

---

Flujo de Trabajo Principal (6 Fases)

Fase 1: Inspección de la Foto y Análisis Visual Automatizado

1. Ver la Foto Objetivo: Siempre llama a read_file sobre la imagen objetivo primero para entender visualmente el sujeto, el estado de ánimo, la iluminación y los obstáculos (por ejemplo, rostros, postes de carpa, vientos, horizontes, árboles).
2. Ejecutar el Script de Análisis de la Foto: Ejecuta analyze_photo.py sobre la imagen objetivo para extraer:
   • Dimensiones exactas en píxeles, relación de aspecto y metadatos EXIF.
   • Un Mapa de Luminancia y Espacio Negativo en Cuadrícula 3×3 (identifica qué zonas son oscuras, de tono medio o brillantes, y qué zonas tienen poco detalle adecuadas para tipografía).
   • Paleta de Colores Extraída (colores hex dominantes del fondo + colores hex de acento de alto contraste recomendados).

   python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<ruta_de_la_imagen>"
   

---

Fase 2: Descubrimiento Interactivo de Estilo y Dirección

Antes de generar los gráficos, consulta style_catalog.md y usa ask_question para permitir que el usuario elija entre direcciones de diseño seleccionadas y adaptadas a su foto:

1. Selección de Estilo de Diseño (Presenta 3–5 estilos que mejor se adapten de los más de 12 estilos en style_catalog.md, además de una opción para generar múltiples estilos para comparar):
   • Romance Estelar y Estrellado (Serifa dorada de lujo, líneas de constelaciones, resplandor de estrellas, bordes de astrolabio)
   • Postal Editorial Mínima / Revista (Diseño Kinfolk / GO OUT / NatGeo, cuadrículas finas, encabezado de metadatos, sello de ubicación)
   • Doodle Cálido y Tierno Hecho a Mano (Luces de hadas acogedoras, bordes de guiones discontinuos, corazones flotantes, flechas curvas, escritura a mano)
   • Película Vintage y Kodachrome Analógica (Resplandor de halación, marco de borde de película, sello de fecha, serifa retro)
   • Vidrio Esmerilado Moderno e Interfaz Flotante (Tarjetas de vidrio esmerilado, reproductor de música / barra de recuerdos, sans-serif elegante)
   • Aventura al Aire Libre e Insignia Retro (Emblema de Parque Nacional / Campamento, líneas topográficas, vectores de brújula y pino)
   • Póster Minimalista Japonés (Estilo Zakka / Muji) (Tipografía vertical/asimétrica, amplio espacio en blanco, arte de línea delicada)
   • Buzón Cinematográfico y Subtítulos de Historia (Barras anamórficas, bloque de créditos de título de película, subtítulo bilingüe poético)
2. Relación de Aspecto y Formato de Salida:
   • Relación de aspecto original (ej., 3:2 Paisaje 3600×2400)
   • Feed Social Vertical (4:5 2400×3000)
   • Cuadrado (1:1 2800×2800) o Historia/Reel (9:16 2160×3840)

---

Fase 3: Taller de Redacción Multitonelada (¡Crucial!)

Las citas genéricas o demasiado cursis a menudo suenan poco naturales ("ไม่ใช่ตัวเอง"). Antes de finalizar el texto—o cuando el usuario solicite ideas de redacción—lee copywriting_tones.md y usa ask_question para permitir que el usuario seleccione o combine palabras por sección y tono de personalidad:

• Divide el texto en espacios modulares:
  1. Insignia Superior / Ceja (ej., título en inglés o etiqueta de ocasión)
  2. Título Principal (Saludo principal en tailandés/inglés)
  3. Subtítulo / Ancla Principal (Frase clave cálida)
  4. Mensaje del Cuerpo / Caja de Cita (Mensaje sincero de 2 líneas—o opción de omitir para un aspecto más limpio)
  5. Llamada al Sujeto / Nota con Flecha (Etiqueta corta y linda junto a una flecha dibujada a mano que apunta a la persona/sujeto—o opción de omitir)
• Ofrece 5–6 tonos de personalidad distintos por espacio:
  • สายลุย-ชิลล์ๆ (Aventurero / Compañero Relajado): Ambiente natural, relajado, de compañero de aventuras.
  • แมนๆ จริงใจ ไม่เลี่ยน (Sincero y con los Pies en la Tierra): Honesto, cálido, cero cursilería.
  • อบอุ่น-เรียบง่าย (Cálido y Clásico): Gentil, agradecido, atemporal.
  • กวนนิดๆ กันเอง (Juguetón y Bromeando): Broma de pareja real con cariño.
  • โรแมนติก-ลึกซึ้ง (Poético y Romántico): Luz de estrellas, destino, emoción profunda.
  • สั้นกระชับ-มินิมอล (Corto y Contundente): Impacto minimalista.

---

Fase 4: Reglas de Composición, Flujo Direccional y Teoría del Color

Consulta composition_and_color.md al crear la superposición HTML/CSS/SVG. Siempre aplica estas reglas de oro:

1. Zona de Protección del Sujeto y Obstáculos:
   • Mapea las coordenadas exactas delimitadoras (x, y) de rostros, cuerpos y líneas estructurales (como postes de carpa o cuerdas diagonales de vientos).
   • Nunca permitas que el texto, corazones flotantes, estrellas o flechas crucen sobre los rostros o intersecten incómodamente las líneas de vientos. Desplaza los elementos de llamada limpiamente a un lado de cualquier cuerda/línea.
2. Flujo Visual Direccional (Vectorización Visual):
   • Guía la mirada del espectador desde el Bloque de Tipografía Principal (en el espacio negativo abierto) -> a lo largo de Ornamentos Secundarios / Flechas de Llamada -> directamente al Rostro/Sonrisa del Sujeto Humano.
   • Usa rutas SVG curvas (<path d="M ... Q ...">), orientación de luna creciente o ángulos de estrellas fugaces que apunten hacia el sujeto o enmarquen el texto hacia adentro, nunca dirigiendo la mirada fuera del borde del lienzo.
3. Armonía de Color y Legibilidad Adaptativa:
   • Regla de Color 60-30-10:
     • 60% Tono ambiental base de la foto (ej., Azul Medianoche Profundo #0A1530 o Verde Bosque).
     • 30% Color de Tipografía Principal (Marfil Cálido de Alto Contraste #FFFAF0 o Blanco Puro Nítido #FFFFFF).
     • 10% Color de Acento Destacado muestreado o armonizado con la escena (ej., Oro de Luz de Hada Cálida #FFE299, Champán #F0CA86 o Corazón Coral Suave #FF7B93).
   • Coloca siempre un degradado radial/lineal sutil de borde invisible (rgba(8, 16, 38, 0.38)) o un contenedor de vidrio esmerilado (backdrop-filter: blur(4px)) detrás del texto del cuerpo para que la tipografía permanezca 100% legible sobre estrellas, nubes o follaje.
4. Perfección Tipográfica Tailandesa:
   • Usa white-space: nowrap en líneas de citas tailandesas de varias oraciones o saltos de línea <br> explícitos en los límites naturales de las frases para que las palabras tailandesas (como "ฉัน" o "วัน") nunca se envuelvan solas en una línea huérfana.
   • Deja al menos 35px–50px de relleno claro entre el texto de visualización tailandés grande (que tiene vocales superiores altas/marcas de tono como ั ิ ี ึ ื ่ ้ ๊ ๋ ์ y vocales inferiores ุ ู) y las estrellas, lunas o bordes SVG circundantes.

---

Fase 5: Pipeline de Renderizado 4K Retina

Usa render_graphic.py para renderizar cualquier plantilla HTML/CSS/SVG sobre la foto objetivo a resolución 4K:

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "ruta/al/diseño.html" `
  --output "DSC03461_Salida.jpg" `
  --width 1800 --height 1200 --scale 2

• Por qué --scale 2 y --virtual-time-budget=3000 son importantes:
  • Diseñar en píxeles CSS 1800×1200 con --force-device-scale-factor=2 produce una salida Retina ultra nítida de 3600×2400.
  • --virtual-time-budget=3000 asegura que Google Fonts termine de descargarse y aplicarse antes de que Chrome capture el fotograma (evitando la fuente de reserva del sistema).
  • Guardar con quality=96, subsampling=0 preserva bordes 100% nítidos en texto coloreado y líneas vectoriales finas.

---

Fase 6: Verificación Visual de QA Obligatoria

Después de renderizar cada imagen, DEBES inspeccionar el archivo .jpg generado usando read_file y verificar esta lista de verificación antes de mostrársela al usuario:

• Verificación de Fuente: ¿Se cargaron correctamente las Google Fonts previstas (sin recurrir a Tahoma/Arial)?
• Sin Saltos de Palabra Huérfanos: ¿Están todas las oraciones tailandesas divididas limpiamente en los puntos <br> intencionales sin palabras finales sueltas?
• Verificación de Colisión Cero: ¿Alguna estrella, luna, corazón, borde o flecha toca o superpone las vocales/marcas de tono tailandesas, rostros humanos o cuerdas de carpa?
• Equilibrio Visual y Contraste: ¿Es cada línea de texto fácilmente legible tanto desde una vista en miniatura como en pantalla completa?

Si se detecta algún problema durante la inspección de read_file, ajusta inmediatamente las coordenadas CSS/SVG y vuelve a renderizar antes de presentar el resultado.

---

Plantillas de Referencia y Documentación

• Catálogo de Estilos y Combinaciones de Fuentes: references/style_catalog.md
• Guía de Composición, Flujo Direccional y Color: references/composition_and_color.md
• Matriz de Redacción en Tailandés e Inglés: references/copywriting_tones.md
• Plantillas de Referencia HTML/SVG Listas para Usar:
  • examples/style_starry_romantic.html
  • examples/style_minimal_magazine.html
  • examples/style_warm_cute_doodle.html