What problem does it solve? Building Movistar-branded campaign mockups from scratch is slow and error-prone, and designers risk inventing colors, fonts, or layouts that violate the official brand guidelines. This Skill provides ready-to-use HTML/CSS components derived from Movistar's official PPT template (27 layouts), Brand Book, and Toolkit, so campaign mockups are consistent and reviewable by the Communication team. ## Core Features & Use Cases - Layout Patterns: 14 production patterns including brand headers, connected-container heroes, full-bleed heroes, text+image sections, card grids, price blocks, section dividers, footers, galleries, device showcases, numbered steps, product cards, and Movistar Plus+ WOW banners and videocartelas. - Token-Based Styling: All components consume CSS variables (--movistar-*) from brand-visual-guidelines-movistar and use slots ({{FONT_FACE_MIN}}, {{TOKENS_CSS}}, {{LOGO_MARK}}) filled by movistar-visual-production's assemble.py, so no base64 or hardcoded brand values are ever copied by hand. - Use Case: An Art Director needs a landing mockup for a Movistar fiber offer. They assemble the hero-connected pattern, a price block with promotional strikethrough, a 3-step 'Como funciona' section, and a footer with legal text, then run assemble.py to inject fonts, tokens, and logos. ## Quick Start Ask the AI to build a Movistar campaign landing mockup using the hero-connected layout, a promotional price block, and the numbered steps component from this library.
