movistar-visual-production

Generates client-ready Movistar campaign visuals via slot-based HTML assembly, AI photography, and visual QA.

1|Updated Jun 29, 2026
One-click install
npx skills add https://github.com/Superreal-io/maia-campaign-skills --skill movistar-visual-production-superreal-io
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: movistar-visual-production
Source: https://github.com/Superreal-io/maia-campaign-skills/tree/main/movistar-visual-production
Command: npx skills add https://github.com/Superreal-io/maia-campaign-skills --skill movistar-visual-production-superreal-io

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve? Producing on-brand Movistar campaign pieces (email, display, OOH, Meta, Movistar+) manually leads to broken typography, hand-copied base64 assets, generic stock-like imagery, and unverified layouts. This Skill replaces that with a programmatic pipeline: brand assets as files, slot-based HTML templates, AI-generated photography with curated visual references, and a mandatory visual QA loop before delivery. ## Core Features & Use Cases - Slot-based assembly: Write HTML with slots like {{FONT_FACE_MIN}}, {{TOKENS_CSS}}, and {{LOGO_MARK}}; assemble.py injects real fonts, logos, and design tokens so the model never touches base64. - Reference-driven image generation: generate_image.py calls OpenAI gpt-image-2 with 2 Gold Standard references per image (Track A for pure photography, Track B for full pieces), enforcing brand-consistent light, casting, and composition. - Render and visual QA: render.py converts assembled HTML to PNG for a 14-point deterministic checklist (palette, logo placement, CTA type, sentence case, no overlaps, photo integration) with a maximum of 2 correction iterations. - Use Case: An Art Director agent receives a brief for a Movistar+ WOW banner. It reads 2-3 real reference pieces, builds the slot-based HTML, generates the key art with channel-specific Gold Standards, assembles, renders, verifies against the checklist, and delivers a client-ready PNG plus a contextual mockup. ## Quick Start Ask the agent to produce a Movistar email or banner for your campaign brief, and it will run the reference-first workflow, generate photography, assemble, render, and visually verify the final piece.

Frequently Asked Questions about movistar-visual-production

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate on-brand Movistar campaign images with AI?

Write a cinematic English prompt following the magic-prompt guideline and pass 2 Gold Standard reference images via the --ref flag of generate_image.py. Generating without references is treated as a failure because references carry composition, light, and brand code that prompts cannot describe.

How does the slot-based HTML assembly work for ad production?

You write fixed-dimension HTML containing slots such as {{FONT_FACE_MIN}}, {{TOKENS_CSS}}, {{LOGO_MARK}}, and {{IMG:...}} placeholders. The assemble.py script fills them with real woff2 fonts, SVG logos, CSS tokens, and generated images, producing a self-contained HTML file.

What environment variables and runtime does this Skill require?

It requires an OPENAI_API_KEY secret for the gpt-image-2 image generation endpoint and a render backend such as Playwright with Chromium for render.py. A startup verification block checks bundle version and reference folders before any production run.

What is the difference between Track A and Track B image references?

Track A uses pure photography references from the fotografia folder when generating text-free scene photos for image slots. Track B uses full-piece references from channel folders when generating a complete piece with text, price, and logo. Mixing tracks is prohibited.

What are the limitations of gpt-image-2 for banner formats?

The model accepts a maximum ratio of 3:1, so extreme formats like a 1920x384 WOW banner cannot be generated in one pass. The documented workaround is generating at the nearest valid ratio and cropping in post-production.

Why must every piece be rendered and visually inspected before delivery?

The render-and-inspect step catches defects that textual QA misses: overlaps, wrong logo placement, misspelled text inside generated images, implausible scene physics, and wrong device models. Delivering without viewing the rendered PNG is explicitly prohibited.