From designskills
Ad banners and display ad creative design via AI image generation and code generation. Covers IAB standard sizes, CTA design, value proposition hierarchy, A/B variations, and HTML5 animated ads. Supports Gemini 3.1 Flash Image Preview. Trigger phrases: "design an ad", "create a banner ad", "display ad", "ad creative", "Google Display ad", "Meta ad", "ad banner", "create ad variations", "HTML5 ad".
How this skill is triggered — by the user, by Claude, or both
Slash command
/designskills:ad-creative-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design high-converting ad banners and display creatives. Covers all standard IAB sizes, platform requirements, CTA optimization, and A/B testing frameworks. Output as production-ready HTML/CSS with optional animation.
Design high-converting ad banners and display creatives. Covers all standard IAB sizes, platform requirements, CTA optimization, and A/B testing frameworks. Output as production-ready HTML/CSS with optional animation.
.agents/design-context.md for brand colors, fonts, styledesign-context skill or use defaultsFor AI image generation, see the image-generation skill for the full Gemini pipeline. Below are domain-specific prompt patterns for this skill.
| Name | Dimensions | Type | Performance |
|---|---|---|---|
| Medium Rectangle | 300 x 250 | Display | Highest inventory |
| Large Rectangle | 336 x 280 | Display | High performance |
| Leaderboard | 728 x 90 | Display | Top of page |
| Mobile Leaderboard | 320 x 50 | Mobile | Mobile standard |
| Large Mobile | 320 x 100 | Mobile | Better engagement |
| Wide Skyscraper | 160 x 600 | Display | Sidebar |
| Half Page | 300 x 600 | Display | High impact |
| Billboard | 970 x 250 | Display | Premium placement |
| Large Leaderboard | 970 x 90 | Display | Wide format |
| Square | 250 x 250 | Display | Compact |
| Platform | Format | Dimensions |
|---|---|---|
| Meta (Feed) | Single Image | 1080 x 1080 or 1200 x 628 |
| Meta (Story) | Full Screen | 1080 x 1920 |
| Google Display | Responsive | Multiple (provide assets) |
| Sponsored Content | 1200 x 627 | |
| Twitter/X | Promoted | 1200 x 675 |
Every ad must follow this strict content hierarchy. Limited space means ruthless prioritization.
1. Logo (small, top-left or top-center)
2. Hero image or visual
3. Headline (primary value prop, 5-8 words max)
4. Supporting text (1 line, optional)
5. CTA button
1. Logo (left side, compact)
2. Headline (3-5 words)
3. CTA button (right side)
-- No room for supporting text or large visuals
1. Logo or brand name (text only)
2. Headline (2-4 words)
3. CTA (text link or small button)
The CTA is the most important element. It must be unmissable.
Use one of three patterns: solid (high-contrast fill + shadow), outline (transparent bg + border), or pill (rounded + arrow icon). Key properties:
padding: 10-12px 24-28px, font-weight: 700, text-transform: uppercasetranslateY(-1px) + increased shadow or background swapborder-radius: 50px with ::after arrow content| Weak | Strong | Why |
|---|---|---|
| Submit | Get Started | Action-oriented |
| Click Here | Shop the Sale | Specific benefit |
| Learn More | See How It Works | Curiosity-driven |
| Buy Now | Claim Your 20% Off | Value-driven |
| Sign Up | Start Free Trial | Low commitment |
| Download | Get Your Free Guide | Ownership language |
| Size | Headline Max | Body Max | CTA Max |
|---|---|---|---|
| 300x250 | 8 words | 12 words | 3 words |
| 728x90 | 5 words | 0 (no room) | 2 words |
| 160x600 | 6 words | 10 words | 2 words |
| 300x600 | 8 words | 15 words | 3 words |
| 320x50 | 4 words | 0 | 2 words |
align-items: center, 20px gap. Logo left (28px height), headline (flex:1, 20px/700), CTA right.margin-top: auto).All sizes: position: relative; overflow: hidden; border: 1px solid #E5E7EB;
Always generate at least 2 variations when possible. Test these dimensions:
| Axis | Variation A | Variation B |
|---|---|---|
| Headline | Benefit-focused | Urgency-focused |
| CTA Color | Brand primary | High-contrast accent |
| CTA Copy | "Get Started" | "Try Free" |
| Layout | Image top, text bottom | Text left, image right |
| Background | Light/white | Dark/brand color |
| Visual | Product screenshot | Abstract/lifestyle |
When creating an ad, produce:
Label each variation clearly in the output:
<!-- VARIATION A: Benefit headline, primary CTA -->
<div class="ad variation-a">...</div>
<!-- VARIATION B: Urgency headline, accent CTA -->
<div class="ad variation-b">...</div>
<!-- Standard click tag -->
<script>
var clickTag = "https://example.com";
</script>
<a href="javascript:void(window.open(clickTag))" style="position:absolute;inset:0;z-index:999;">
</a>
Staggered entry: Use fadeSlideIn (opacity 0->1, translateY 10px->0) with 0.2s staggered delays for logo, visual, headline, CTA. Add a subtle ctaPulse (scale 1->1.03) after entry completes.
Multi-frame rotation: Position frames absolutely, use a shared @keyframes frame with opacity in/out, stagger by total-duration / num-frames. Max 3 frames over 10-15s.
Every display ad needs a clear boundary:
border: 1px solid #E5E7EB; border-radius: 0; overflow: hidden; position: relative;position: absolute; inset: 0; z-index: 100; cursor: pointer;npx claudepluginhub arnavpuri/designskills --plugin designskillsGenerates ad creatives including display images, video ads, copy variations for Google Ads, Meta, LinkedIn, Reddit. Supports A/B testing, bulk creation, platform resizing, and formatting.
Generates banners, social media ads, display ads, and promotional graphics via Gemini using auto-built prompts, format detection, and aspect ratios like 4:5 Instagram or 16:9 YouTube.
Generates on-brand ad creatives (visuals + copy) for Google, Meta, and other paid platforms via the Hyper MCP. Extracts brand identity, writes ad copy variants, and produces images using reference-based generation.