ad-creative

Generate production-ready HTML/CSS static ad creatives for social media and display platforms.

2|2|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project --skill ad-creative-tamnguyentommy-rgb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ad-creative
Source: https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project/tree/main/.local/secondary_skills/ad-creative
Command: npx skills add https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project --skill ad-creative-tamnguyentommy-rgb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to produce consistent, on-brand static ad creatives across multiple platforms and formats. This Skill automates the production of reusable HTML/CSS assets that adhere to brand guidelines, saving time and reducing errors.

Core Features & Use Cases

  • Production-ready ad files that conform to platform constraints (no gradients, vw/vh sizing, Google Fonts loaded in head).
  • Multi-variant generation for A/B testing across social and display placements.
  • Brand fidelity through automated brand asset extraction (logo, fonts, colors) and optional image-first awareness layouts.

Quick Start

Provide a brand brief and the system will generate a set of production-ready ad files under artifacts/mockup-sandbox/public/ads/angle1.html, angle2.html, etc.

Frequently Asked Questions about ad-creative

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

FAQPage Schema
How do I generate static ad creatives for multiple social media platforms?

Generate static ad creatives by providing a brand brief to produce export-ready HTML/CSS assets. The system outputs production-ready files that conform to platform constraints for Facebook, Instagram, LinkedIn, Google Display, and TikTok.

Can I create display banner variants for A/B testing?

Yes, you can create display banner variants for A/B testing. The system generates multiple ad variations from a single brand brief, outputting distinct HTML files like angle1.html and angle2.html to support multi-variant testing.

How do I ensure my banner design automatically follows brand guidelines?

Ensure banner design follows brand guidelines through automated brand asset extraction. The system applies your brand rules, extracting logos, colors, and Google Fonts to load in the HTML head, maintaining strict brand fidelity across all generated files.

What is the best way to build HTML/CSS display ads without gradients or fixed sizing?

Build compliant HTML/CSS display ads by generating assets that automatically adhere to platform specifications. The system enforces rules like no gradients and vw/vh sizing, ensuring your static creatives are ready-to-publish without manual code adjustments.

Does this ad creative generator support image-first layouts for awareness campaigns?

Yes, the ad creative generator supports image-first awareness campaigns. It can optionally generate hero images and apply image-first layouts alongside your standard text-based static ads to drive top-of-funnel awareness.

What limitations exist when exporting static HTML ads for digital advertising campaigns?

Limitations include strict adherence to platform constraints, meaning generated static HTML ads avoid unsupported features like gradients and fixed pixel sizing. Creatives are static only, using vw/vh sizing and Google Fonts, and do not produce animated or video assets.