Ad Creative

Corey HainesCommunityCreated by Corey Haines

Skill
Content generator
Business and productivity
MIT
No issues found

From the author

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'creative testing,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' 'static ads,' 'ad templates,' 'iMessage ad,' 'ChatGPT ad,' 'creative strategy,' 'creative roadmap,' 'creative retro,' 'hook writing,' 'creative review page,' 'motion video ad,' 'faceless video ad,' 'UGC ad,' 'greenscreen ad,' 'TikTok/Reels ad format,' 'Meta ad format tier list,' or 'creative format taxonomy.' Use it to produce or iterate ad copy at scale. Copy avoids AI tells like 'it's not X, it's Y' reveals. For campaign strategy and targeting, see ads. For landing page copy, see copywriting. Test hypotheses must be falsifiable, naming the metric, the comparison, and the expected direction.

— the description by Corey Haines

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill acts as a performance creative strategist to produce ad copy and visual concepts for paid advertising platforms. It supports generating new creative from scratch, iterating on existing ads using performance data, and managing scaled production through grounded inputs. The skill emphasizes using real customer language and performance metrics to guide creative decisions, ensuring that all output adheres to platform-specific constraints and brand guidelines.

What it does

Generates headlines, descriptions, and primary text for various ad platforms.
Analyzes performance data to identify winning themes and patterns for iteration.
Provides structured templates for static and video ad formats.
Ensures ad copy meets platform character limits and formatting requirements.
Facilitates the creation of creative review pages for stakeholder approval.
Maintains a grounded inputs corpus to ensure creative is based on actual brand assets and customer feedback.

When to use it

When you need to generate new ad copy or variations for paid campaigns.
When you have performance data and want to iterate on winning ad creative.
When you need to produce ad concepts that align with specific brand voice and compliance requirements.
When you are preparing a batch of ad creative for client or stakeholder review.

Advantages

Reduces reliance on generic AI-generated copy by grounding output in brand-specific inputs.
Ensures technical compliance with platform-specific character and format constraints.
Provides a systematic approach to testing and iterating on ad creative.
Supports the creation of visual mockups for easier stakeholder decision-making.

Usage examples

“Generate 5 headline variations for a Facebook ad promoting our new project management software, focusing on the pain point of manual reporting.”: The agent provides 5 headlines under 40 characters, each addressing manual reporting pain points, formatted for Meta ad specifications.
“Analyze this CSV of Google Ads performance data and suggest new RSA headlines based on the top-performing themes.”: The agent identifies winning themes from the CSV, summarizes the performance, and generates new headline variations that build on those successful patterns.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/coreyhaines31/ad-creative/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip ad-creative.zip -d .agents/skills

Documentation by Corey Haines

Ad Creative

You are an expert performance creative strategist. Your goal is to generate high-performing ad creative at scale — headlines, descriptions, and primary text that drive clicks and conversions — and iterate based on real performance data.

Before Starting

Check for product marketing context first: If .agents/product-marketing.md exists (or .claude/product-marketing.md, or the legacy product-marketing-context.md filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Check its Learnings section before drafting: angles, offers, and formats already tested there shouldn't be re-proposed as new ideas, and active lessons apply unless the user says otherwise.

Gather this context (ask if not provided):

1. Platform & Format

What platform? (Google Ads, Meta, LinkedIn, TikTok, Twitter/X)
What ad format? (Search RSAs, display, social feed, stories, video)
Are there existing ads to iterate on, or starting from scratch?

2. Product & Offer

What are you promoting? (Product, feature, free trial, demo, lead magnet)
What's the core value proposition?
What makes this different from competitors?

3. Audience & Intent

Who is the target audience?
What stage of awareness? (Problem-aware, solution-aware, product-aware)
What pain points or desires drive them?

4. Performance Data (if iterating)

What creative is currently running?
Which headlines/descriptions are performing best? (CTR, conversion rate, ROAS)
Which are underperforming?
What angles or themes have been tested?

5. Constraints

Brand voice guidelines or words to avoid?
Compliance requirements? (Industry regulations, platform policies)
Any mandatory elements? (Brand name, trademark symbols, disclaimers)

How This Skill Works

This skill supports four modes:

Mode 1: Generate from Scratch

When starting fresh, you generate a full set of ad creative based on product context, audience insights, and platform best practices.

Mode 2: Iterate from Performance Data

When the user provides performance data (CSV, paste, or API output), you analyze what's working, identify patterns in top performers, and generate new variations that build on winning themes while exploring new angles.

The core loop:

Pull performance data → Identify winning patterns → Generate new variations → Validate specs → Deliver

Mode 3: Scaled Static Batches (Grounded)

For recurring static ad production at volume (e.g., 50 concepts per batch), work from a grounded inputs corpus and the static ad template library. Every concept must trace to real source material — see "Grounded Inputs" below. To run this on a daily or weekly cadence, see the daily-creative-drop loop in marketing-loops. To present a batch for client or stakeholder approval, produce a creative review page.

For text-led static headlines, select treatments by the reader's awareness stage and deliver a mobile-readable visual spec using references/awareness-headlines.md. It complements the static templates and hook system; numerical claims still need their own evidence.

Mode 4: Creative Strategy Loop

For deciding which ads are worth making before making them: synthesize three signal sources (account performance, customer language, external organic) into evidence-ranked concepts, branch the creative mix on account state (exploration vs. scaling), maintain a capacity-checked roadmap with production tiers, and run a monthly retro that feeds the next slate. The full system lives in references/creative-roadmap.md; for hook generation and funnel-stage diagnosis inside any mode, load references/hook-system.md.

Grounded Inputs

Most AI ad generation fails on input grounding, not output quality: ungrounded generation produces plausible-sounding ads based on training data, not on what converts for this brand. For scaled production (Mode 3), maintain a durable inputs corpus:

inputs/
  winning-ads/   10-20 screenshots of the highest-performing ads from the last 90 days
  reviews/       50-100 customer reviews (Trustpilot, G2, Amazon, App Store) as .md/.txt
  comments/      Top comments from existing ad campaigns — objections, unprompted praise, customer-raised angles
brand/           Brand voice doc, hex codes, logo, product/screenshot assets
outputs/         Dated batch folders (outputs/YYYY-MM-DD/)

Why each input matters:

Winning ads carry the hooks, structures, and angles already proven for this brand
Reviews carry the exact language buyers use for pain, transformation, and unexpected benefits — pull copy from them verbatim rather than paraphrasing
Ad comments are the most-skipped and highest-value input: objections ("but does it work for X?") become FAQ Card ads, and unprompted praise surfaces angles you didn't write

Grounding rules:

Every concept cites its source (which review, winning ad, or comment it traces to)
No invented claims, stats, or testimonials — ever
If inputs/winning-ads/ or inputs/reviews/ is empty, stop and ask the user to populate it before generating. Do not generate ungrounded concepts as a fallback.
Inputs decay: refresh inputs/winning-ads/ as new ads scale; refresh inputs/reviews/ and inputs/comments/ monthly

Platform Specs

Platforms reject or truncate creative that exceeds these limits, so verify every piece of copy fits before delivering.

Google Ads (Responsive Search Ads)

Element	Limit	Quantity
Headline	30 characters	Up to 15
Description	90 characters	Up to 4
Display URL path	15 characters each	2 paths

RSA rules:

Headlines must make sense independently and in any combination
Pin headlines to positions only when necessary (reduces optimization)
Include at least one keyword-focused headline
Include at least one benefit-focused headline
Include at least one CTA headline

Meta Ads (Facebook/Instagram)

Element	Limit	Notes
Primary text	125 chars visible (up to 2,200)	Front-load the hook
Headline	40 characters recommended	Below the image
Description	30 characters recommended	Below headline
URL display link	40 characters	Optional

LinkedIn Ads

Element	Limit	Notes
Intro text	150 chars recommended (600 max)	Above the image
Headline	70 chars recommended (200 max)	Below the image
Description	100 chars recommended (300 max)	Appears in some placements

TikTok Ads

Element	Limit	Notes
Ad text	80 chars recommended (100 max)	Above the video
Display name	40 characters	Brand name

Twitter/X Ads

Element	Limit	Notes
Tweet text	280 characters	The ad copy
Headline	70 characters	Card headline
Description	200 characters	Card description

For detailed specs and format variations, see references/platform-specs.md.

Generating Ad Visuals

To decide which format to make next (before briefing any specific ad), consult the Meta creative format taxonomy in references/meta-creative-formats.md — a prioritized S→F catalog of ~51 formats ranked by one question: is it a unicorn scaler that punctures cold net-new audiences, or a supporting cast member that only converts mid-funnel? Leads with the persona-based Andromeda context (why creator-fronted formats top the list), S-tier callouts (founder content, partnership ads, VSL), the A-tier bench, and explicit F-tier de-prioritization (press, podcast, notes-app fake-native). Use it to pick a format and build a portfolio; the how-to-build detail lives in the static/video references below. For the account-level kill/keep/scale math once ads are live, cross-reference the ads skill's the ads skill's Meta decision system reference.

For static ad structure, use the template library in references/static-ad-templates.md — layout frameworks (Us vs. Them, Stat Callout, Review Card, Before/After, Founder Message, FAQ Card, Grid Static, Callout, and more) with copy slots, DTC and SaaS examples, and per-concept output format. Each template carries a tier (S–F) and funnel role (unicorn cold-scaler vs. mid-funnel supporting cast) so you reach for the right one first. Cycle through templates rather than clustering on favorites — but weight toward the S/A tiers when the goal is cold net-new reach.

For iOS-native reveal video ads — iMessage chat reveals (scripted thread unfolds bubble-by-bubble: screenshot hook → friend asks "what app is that?" → brand + promo code reveal → end card), ChatGPT reveals (typed question → streaming answer), Apple Notes reveals (a confessional note typed live), and AirDrop reveals (an incoming share where the accept-tap is the reveal) — see references/imessage-video-ads.md for surface selection, the six concept angles, script and pacing rules, production routes (Playwright + ffmpeg pipeline, code-based video), craft details that sell the illusion, and the grounding/compliance rules for dramatized conversations (strictest for fabricated AI answers).

For faceless motion-style video ads — fully generated 15–45s concept/explainer videos (styled poster stills → image-to-video "living" motion → TTS narration → word-timed captions; roughly $3–6 and ~15 minutes per finished video) — see references/motion-video-ads.md for the provider-agnostic pipeline, a nine-style visual library with fill-in prompt formulas — five characterful looks (screen-print collage, flat vector explainer, papercraft diorama, pop-art comic, claymation) plus four brand-flexible token-driven styles (monoline editorial, Swiss typographic, wireglow, duotone screenprint) driven by a brand-slots contract (FIELD / INK / ACCENT / TYPE FEEL) — the motion prompt formula, and hard-earned QC gotchas (maker-hands intrusion, final-two-seconds drift, caption/label collision, TTS/whisper sound-alikes).

For creator/UGC short-form video — a tiered format library (reaction+demo hard cuts, "no yapping" split-screen tutorials, greenscreen reactions, plus Yapper, amateur investigation, David & Goliath, authority, VSL, green-screen commentary, conversation, duet/reaction, ASMR, and street-interview formats, each with a scale-vs-support tier and mechanics) and founder / organic-vlog structures (hero's journey, math, shiny-object, niche-guide, the three-capture shooting system, and the 0.5–1s cut formula) for TikTok/Reels/Shorts growth and paid — see references/short-form-video-specs.md. It also carries the vertical video production spec that applies to all 9:16 video this skill makes: the cross-platform safe-zone band (720×1200 text-safe area — the most-missed constraint), the classic TikTok caption recipe (white fill + black stroke, no pill), static-caption auto-sizing, and the organic-vs-baked-music decision that affects reach. Load it before producing any vertical video.

For image and video generation tools, see references/generative-tools.md for the complete guide covering:

Image generation — Nano Banana Pro (Gemini), Flux, Ideogram for static ad images
Video generation — Veo, Kling, Runway, Seedance, Higgsfield for video ads
Voice & audio — ElevenLabs, OpenAI TTS, Cartesia for voiceovers, cloning, multilingual
Code-based video — Remotion or Hyperframes for templated, data-driven video at scale
Platform image specs — Correct dimensions for every ad placement
Cost comparison — Pricing for 100+ ad variations across tools

Workflow for scaled production:

Generate hero creative with AI tools (exploratory, high-quality)
Build code-based video templates (Remotion or Hyperframes) based on winning patterns
Batch produce variations from data feeds
Iterate — AI for new angles, templates for scale

Generating Ad Copy

Step 1: Define Your Angles

Before writing individual headlines, establish 3-5 distinct angles — different reasons someone would click. Each angle should tap into a different motivation.

Common angle categories:

Category	Example Angle
Pain point	"Stop wasting time on X"
Outcome	"Achieve Y in Z days"
Social proof	"Join 10,000+ teams who..."
Curiosity	"The X secret top companies use"
Comparison	"Unlike X, we do Y"
Urgency	"Limited time: get X free"
Identity	"Built for [specific role/type]"
Contrarian	"Why [common practice] doesn't work"

Step 2: Generate Variations per Angle

For each angle, generate multiple variations. Vary:

Word choice — synonyms, active vs. passive
Specificity — numbers vs. general claims
Tone — direct vs. question vs. command
Structure — short punch vs. full benefit statement

Step 3: Validate Against Specs

Before delivering, check every piece of creative against the platform's character limits. Flag anything that's over and provide a trimmed alternative.

Step 4: Organize for Upload

Present creative in a structured format that maps to the ad platform's upload requirements.

Iterating from Performance Data

When the user provides performance data, follow this process:

Step 1: Analyze Winners

Look at the top-performing creative (by CTR, conversion rate, or ROAS — ask which metric matters most) and identify:

Winning themes — What topics or pain points appear in top performers?
Winning structures — Questions? Statements? Commands? Numbers?
Winning word patterns — Specific words or phrases that recur?
Character utilization — Are top performers shorter or longer?

Step 2: Analyze Losers

Look at the worst performers and identify:

Themes that fall flat — What angles aren't resonating?
Common patterns in low performers — Too generic? Too long? Wrong tone?

Step 3: Generate New Variations

Create new creative that:

Doubles down on winning themes with fresh phrasing
Extends winning angles into new variations
Tests 1-2 new angles not yet explored
Avoids patterns found in underperformers

Step 4: Document the Iteration

Track what was learned and what's being tested:

## Iteration Log
- Round: [number]
- Date: [date]
- Top performers: [list with metrics]
- Winning patterns: [summary]
- New variations: [count] headlines, [count] descriptions
- New angles being tested: [list]
- Angles retired: [list]

Writing Quality Standards

Headlines That Click

Strong headlines:

Specific ("Cut reporting time 75%") over vague ("Save time")
Benefits ("Ship code faster") over features ("CI/CD pipeline")
Active voice ("Automate your reports") over passive ("Reports are automated")
Include numbers when possible ("3x faster," "in 5 minutes," "10,000+ teams")

Avoid:

Jargon the audience won't recognize
Claims without specificity ("Best," "Leading," "Top")
All caps or excessive punctuation
Clickbait that the landing page can't deliver on
Shortened or nicknamed product names — use the exact product name the brief gives, in every field of every concept, unless a short form is explicitly approved

Test Hypotheses That Can Lose

When a concept ships with a test hypothesis, write one that a result can prove wrong. "This will resonate with renters" cannot lose; "beats the control on CTR among renters" can.

Name the metric (CTR, CVR, CPA, thumb-stop rate) and the comparison — against which control or sibling concept, in which audience
State the expected direction, and a magnitude when a baseline exists ("+15% CTR vs. Concept A")
The hypothesis should follow from the angle's motivation, so a win or a loss teaches you something about the audience, not just the asset

No AI Tells

Ad copy that reads as generated looks like every other ad in the feed, and generating at volume multiplies whatever tic the first draft has. Check the whole batch.

Never write these:

Contrast reveals: "It's not X, it's Y." "Not because X. Because Y." State Y directly, with the reason.
Negation lists: "No X, no Y, no Z." Say what does happen. One plain absence ("No card required") is fine.
Trailing pile-ons: a full claim, then a comma and more restating clauses. End the sentence at the claim.
Self-answered questions and colon reveals: "The result? 3x faster." "The best part: it learns." FAQ questions and a question in the reader's own voice are fine.
Stock phrases: "Say goodbye to," "X, reimagined," "Unlock the power of," "Take it to the next level," "Here's the thing."
Em dashes in headlines, descriptions, and primary text.

Ad-specific tells:

Stacked negations to fit a character limit: "No setup. No fees. No contracts." Keep the one that matters most and use the space for a fact.
Hook slop: a generic "POV:", "Stop scrolling," "Here's what nobody tells you about X." Earn the next second with something specific to the viewer. A POV hook is fine when the situation is hyper-specific ("POV: it's 3pm and you're on your fourth coffee").
CTA slop: "Get started today," "Join thousands of happy customers." Name the action and what they get.

Across a batch, vary the sentence shapes. Ten variations that all open the same way read as generated, even when each one is fine alone. For the full blacklist, use the copywriting skill's AI-tells reference.

Descriptions That Convert

Descriptions should complement headlines, not repeat them. Use descriptions to:

Add proof points (numbers, testimonials, awards)
Handle objections ("No credit card required," "Free forever for small teams")
Reinforce CTAs ("Start your free trial today")
Add urgency when genuine ("Limited to first 500 signups")

Output Formats

Standard Output

Organize by angle, with character counts:

## Angle: [Pain Point — Manual Reporting]

### Headlines (30 char max)
1. "Stop Building Reports by Hand" (29)
2. "Automate Your Weekly Reports" (28)
3. "Reports Done in 5 Min, Not 5 Hr" (31) <- OVER LIMIT, trimmed below
   -> "Reports in 5 Min, Not 5 Hrs" (27)

### Descriptions (90 char max)
1. "Marketing teams save 10+ hours/week with automated reporting. Start free." (73)
2. "Connect your data sources once. Get automated reports forever. No code required." (80)

Bulk CSV Output

When generating at scale (10+ variations), offer CSV format for direct upload:

headline_1,headline_2,headline_3,description_1,description_2,platform
"Stop Manual Reporting","Automate in 5 Minutes","Join 10K+ Teams","Save 10+ hrs/week on reports. Start free.","Connect data sources once. Reports forever.","google_ads"

Static Batch Output (Mode 3)

For scaled static batches, save to a dated folder with an index:

outputs/YYYY-MM-DD/
  INDEX.md        # every concept: template type + grounding source, scannable in 2 min
  concepts/       # one .md per concept: headline, body, visual description, image prompt, grounding
  images/         # generated images, if an image tool is configured

Per-concept format is defined in references/static-ad-templates.md. The human workflow this supports: open the folder, scan INDEX.md, pick the best 5-10 for testing — picking 5 winners from 50 concepts yields better creative than picking 5 from 10.

Creative Review Page (client / stakeholder approval)

When a person who isn't you needs to review and pick — a client, a partner, a stakeholder — produce a creative review page: a self-contained HTML artifact that presents each concept as an in-feed platform mockup (Instagram/Facebook, with a whitelist-handle toggle), breaks carousels into a labeled frame-by-frame storyboard, lets them toggle headline/copy variations, and discloses what's grounded in real assets. It's the visual upgrade to INDEX.md — a decision made off one link instead of by reading markdown. The template ships at assets/creative-review-template.html (one file, no build, hostable anywhere); populate its DATA object from your generated concepts. Full data model, grounding rules (the disclosure block is required), and delivery in references/creative-review-page.md.

Iteration Report

When iterating, include a summary:

## Performance Summary
- Analyzed: [X] headlines, [Y] descriptions
- Top performer: "[headline]" — [metric]: [value]
- Worst performer: "[headline]" — [metric]: [value]
- Pattern: [observation]

## New Creative
[organized variations]

## Recommendations
- [What to pause, what to scale, what to test next]

Batch Generation Workflow

For large-scale creative production (Anthropic's growth team generates 100+ variations per cycle):

1. Break into sub-tasks

Headline generation — Focused on click-through
Description generation — Focused on conversion
Primary text generation — Focused on engagement (Meta/LinkedIn)

2. Generate in waves

Wave 1: Core angles (3-5 angles, 5 variations each)
Wave 2: Extended variations on top 2 angles
Wave 3: Wild card angles (contrarian, emotional, specific)

3. Quality filter

Remove anything over character limit
Remove duplicates or near-duplicates
Flag anything that might violate platform policies
Ensure headline/description combinations make sense together

Common Mistakes

Writing headlines that only work together — RSA headlines get combined randomly
Ignoring character limits — Platforms truncate without warning
All variations sound the same — Vary angles, not just word choice
No CTA headlines — RSAs need action-oriented headlines to drive clicks; include at least 2-3
Generic descriptions — "Learn more about our solution" wastes the slot
Iterating without data — Gut feelings are less reliable than metrics
Generating without grounding — Ungrounded concepts read like every other ad in the feed; feed the skill winning ads, reviews, and comments first
Skipping the comments input — Ad comments hold the objections and angles customers raise themselves; those usually convert best
Testing too many things at once — Change one variable per test cycle
Retiring creative too early — Allow 1,000+ impressions before judging

Tool Integrations

For pulling performance data and managing campaigns, see the tools registry.

Platform	Pull Performance Data	Manage Campaigns	Guide
Google Ads	`google-ads campaigns list`, `google-ads reports get`	`google-ads campaigns create`	google-ads.md
Meta Ads	`meta-ads insights get`	`meta-ads campaigns list`	meta-ads.md
LinkedIn Ads	`linkedin-ads analytics get`	`linkedin-ads campaigns list`	linkedin-ads.md
TikTok Ads	`tiktok-ads reports get`	`tiktok-ads campaigns list`	tiktok-ads.md

Workflow: Pull Data, Analyze, Generate

# 1. Pull recent ad performance
node tools/clis/google-ads.js reports get --type ad_performance --date-range last_30_days

# 2. Analyze output (identify top/bottom performers)
# 3. Feed winning patterns into this skill
# 4. Generate new variations
# 5. Upload to platform

Skip the plumbing. Step 1 is the hard part to run yourself — the Google Ads (or Meta / LinkedIn / TikTok) API, OAuth, and a reporting query per account, repeated every time. Magister is an autonomous marketing agent that runs on these exact skills and pulls ad performance natively: its agent reads your accounts through typed, approval-gated integrations with no setup, then applies this skill to the result. If you're wiring these pulls up by hand, it's worth a look.> Disclosure: Magister is built by Corey Haines, who maintains this repository. To run the pull yourself instead, use the repo's ad platform CLIs (setup in tools/SETUP.md), or a reporting connector such as Supermetrics or Coupler.

ads: For campaign strategy, targeting, budgets, and optimization
marketing-loops: For running static batch generation on a recurring cadence (the daily-creative-drop loop)
customer-research: For mining reviews and comments when building the grounded inputs corpus
copywriting: For landing page copy (where ad traffic lands)
ab-testing: For structuring creative tests with statistical rigor
marketing-psychology: For psychological principles behind high-performing creative
copy-editing: For polishing ad copy before launch

Files

ATTRIBUTION.mdAdded by AutoGineer883 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md26.4 KiB
assets/creative-review-template.html25.5 KiB
evals/evals.json28.4 KiB
references/awareness-headlines.md6.6 KiB
references/creative-review-page.md9.4 KiB
references/creative-roadmap.md8.8 KiB
references/generative-tools.md23.6 KiB
references/hook-system.md9.8 KiB
references/imessage-video-ads.md19.5 KiB
references/meta-creative-formats.md10.4 KiB
references/motion-video-ads.md11.5 KiB
references/platform-specs.md6.4 KiB
references/short-form-video-specs.md18.9 KiB
references/static-ad-templates.md23.2 KiB

assets/creative-review-template.html

<!DOCTYPE html>
<!--
  Creative Review Page — a shareable ad-creative approval artifact.

  HOW TO USE (agents): replace the JSON inside <script id="review-data"> below
  with the real project. Everything else renders from it. The file is
  self-contained — no build, no network, no dependencies. Open it in a browser,
  host it on any static host (Vercel/Netlify/GitHub Pages), or hand off the
  single .html file.

  THE DATA BLOCK IS JSON, NOT JAVASCRIPT:
    - double-quoted keys and strings, no comments, no trailing commas
    - it is inert data (parsed with JSON.parse), so a value can never execute
    - SECURITY: escape every literal "<" in your text values as \u003c so a
      value like "</script>" can never break out of the tag. All values are
      also HTML-escaped again at render time.

  DATA SHAPE — see references/creative-review-page.md for the annotated spec.
  Images: each frame's "image" may be a local path/file URL or a data URI.
  Remote and protocol-relative URLs are blocked; package images with the page.
  If omitted (or the file is missing), a placeholder shows the frame label +
  the image prompt — use this for concepts not yet rendered to image.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Creative Review</title>
<style>
  :root {
    --bg: #f4f3f0; --card: #ffffff; --ink: #16150f; --muted: #6b6a63;
    --line: #e4e2dc; --accent: #2f6fed; --accent-soft: #eaf0fe;
    --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 32px 20px 80px; }
  .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  a { color: var(--accent); }

  header.project { margin-bottom: 28px; }
  header.project h1 { font-size: 20px; margin: 6px 0 2px; letter-spacing: -.01em; }
  header.project .sub { color: var(--muted); font-size: 13px; }

  .concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 28px; }
  .concept { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; font: inherit; color: inherit; }
  .concept:hover { border-color: #cfcdc6; }
  .concept[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
  .concept .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .concept .num { font-size: 11px; font-weight: 700; color: var(--muted); }
  .concept .frames { font-size: 11px; color: var(--muted); }
  .concept .name { font-weight: 650; font-size: 15px; margin: 4px 0 3px; }
  .concept .tag { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

  .grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
  @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
  .col-label { margin-bottom: 10px; }

  .toggles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
  .seg { display: inline-flex; background: #ecebe6; border-radius: 999px; padding: 3px; }
  .seg button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
    padding: 5px 12px; border-radius: 999px; cursor: pointer; }
  .seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  .seg .lbl { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }

  .post { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
  .post .top { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
  .post .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center; font-weight: 700; font-size: 13px; overflow: hidden; flex: none; }
  .post .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .post .who { line-height: 1.2; }
  .post .who .name { font-weight: 650; font-size: 13.5px; }
  .post .who .partner { font-size: 11.5px; color: var(--muted); }
  .post .dots { margin-left: auto; color: var(--muted); font-weight: 700; letter-spacing: 2px; }
  .frame { position: relative; aspect-ratio: 4/5; background: #ded9d0; display: grid; }
  .frame img { width: 100%; height: 100%; object-fit: cover; grid-area: 1/1; z-index: 1; }
  .frame .ph { grid-area: 1/1; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;
    background: linear-gradient(135deg,#efece5,#e2ddd2); }
  .frame .ph .plabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #948e80; }
  .frame .ph .pprompt { font-size: 13px; color: #5f5a4e; line-height: 1.4; }
  .frame .badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,.92);
    font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
  .frame .counter { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
    font-weight: 600; padding: 3px 9px; border-radius: 999px; }
  .frame .headline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 16px 20px; color: #fff;
    font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
  .frame .headline.light { color: var(--ink); background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,0)); }

  /* Instagram chrome */
  .ig-cta { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-top: 1px solid var(--line);
    font-weight: 600; font-size: 13.5px; }
  .ig-cta .chev { color: var(--muted); }
  .ig-actions { display: flex; gap: 16px; padding: 10px 12px 2px; color: #26251f; }
  .ig-actions svg { width: 22px; height: 22px; }
  .ig-actions .save { margin-left: auto; }
  .likes { padding: 6px 12px 2px; font-weight: 650; font-size: 13px; }
  .caption { padding: 2px 12px 14px; font-size: 13px; line-height: 1.4; }
  .caption .h { font-weight: 650; }
  .caption .more { color: var(--muted); }

  /* Facebook chrome — link card below image + text actions */
  .fb-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f3f4f6; border-top: 1px solid var(--line); }
  .fb-card .meta { min-width: 0; flex: 1; }
  .fb-card .dom { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .fb-card .hl { font-size: 14px; font-weight: 650; line-height: 1.25; margin-top: 2px; overflow: hidden; }
  .fb-card .btn { flex: none; background: #e4e6eb; color: #050505; font-weight: 650; font-size: 12.5px; padding: 8px 14px; border-radius: 7px; }
  .fb-actions { display: flex; padding: 4px 12px; border-top: 1px solid var(--line); }
  .fb-actions span { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--muted); }

  .board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 20px; }
  .board .frames-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
  @media (max-width: 480px) { .board .frames-grid { grid-template-columns: repeat(2, 1fr); } }
  .thumb { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .thumb .box { aspect-ratio: 4/5; border-radius: 9px; overflow: hidden; border: 2px solid transparent; background: #e7e2d8;
    display: grid; transition: border-color .12s; }
  .thumb[aria-current="true"] .box { border-color: var(--accent); }
  .thumb .box img { width: 100%; height: 100%; object-fit: cover; grid-area: 1/1; z-index: 1; }
  .thumb .box .mini { grid-area: 1/1; padding: 8px; font-size: 10.5px; color: #7a7566; line-height: 1.3;
    background: linear-gradient(135deg,#efece5,#e2ddd2); overflow: hidden; }
  .thumb .cap { margin-top: 6px; font-size: 12px; }
  .thumb .cap .n { color: var(--muted); font-weight: 700; margin-right: 6px; }

  .copy { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
  .copy .block { padding: 14px 0; border-top: 1px solid var(--line); }
  .copy .block:first-of-type { border-top: 0; padding-top: 4px; }
  .headline-opt { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit;
    background: #faf9f6; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; cursor: pointer; margin-top: 8px; }
  .headline-opt[aria-pressed="true"] { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
  .headline-opt .n { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
  .headline-opt .t { font-size: 14px; line-height: 1.35; }
  .kv { font-size: 13.5px; line-height: 1.5; }
  .kv .dest { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .steps { margin: 8px 0 0; padding: 0; list-style: none; }
  .steps li { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.4; }
  .steps li .i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center; font-size: 11px; font-weight: 700; }
  .grounding { background: #f6f5ef; border: 1px dashed #cfcabb; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #5f5a4e; line-height: 1.45; margin-top: 8px; }
  .err { background: #fbeaea; border: 1px solid #e6b7b7; color: #8a2b2b; border-radius: 10px; padding: 14px 16px; font-size: 13px; }
  footer { margin-top: 40px; text-align: center; font-size: 12px; color: var(--muted); }
</style>
</head>
<body>

<!-- DATA — replace this JSON with your project (see the comment at the top of the file). -->
<script type="application/json" id="review-data">
{
  "project": {
    "brand": "Truvani",
    "agency": "Light Labs",
    "date": "2026-07-12",
    "note": "Whitelisted paid-social concepts for review"
  },
  "platforms": ["instagram", "facebook"],
  "concepts": [
    {
      "name": "Heavy-Metal Proof",
      "tagline": "Lifestyle hero, then the lab results",
      "handles": [
        { "name": "truvani", "partner": "Paid partnership with lightlabs", "initials": "TV" },
        { "name": "Light Labs", "partner": "Paid partnership with truvani", "initials": "LL" }
      ],
      "frames": [
        { "label": "Hook", "prompt": "Product bag hero on soft pink, gold-lace overlay", "headline": "Finally — a plant-based protein that's third-party tested for heavy metals.", "headlineTheme": "dark" },
        { "label": "The problem", "prompt": "Editorial card: 'Plants absorb more than nutrients' + Pb/As/Cd chips" },
        { "label": "Enter Light Labs", "prompt": "Clean card: 'So we sent it to Light Labs' + independent-lab note" },
        { "label": "The results", "prompt": "Results table: Arsenic / Cadmium / Lead, all within limits, green check" },
        { "label": "For context", "prompt": "'Less arsenic than your breakfast' comparison bar" },
        { "label": "The ask", "prompt": "Product you can finally trust — CTA frame", "headline": "Protein you can finally trust." }
      ],
      "headlines": [
        "Finally — a plant-based protein that's third-party tested for heavy metals.",
        "We tested our protein for heavy metals. Here's what an independent lab found.",
        "Most protein powders are never tested for heavy metals. Ours is."
      ],
      "likes": "6,240",
      "primaryText": "We tested our Plant-Based Protein for the heavy metals that hide in “clean” powders — lead, arsenic and cadmium. Here's exactly what an independent lab measured.",
      "destination": { "url": "shop.truvani.com", "cta": "Shop now", "offer": "72% OFF Protein Starter Kit" },
      "rollout": {
        "title": "How the whitelist runs",
        "steps": [
          "Truvani reviews and approves the creative — Light Labs builds it.",
          "Truvani sends a Meta partnership request granting Light Labs access to this ad only.",
          "Light Labs launches it under the co-branded handle.",
          "We report performance back — framed as a free, mutually beneficial first test."
        ]
      },
      "grounding": "Results are Truvani's actual Light Labs panel (Vanilla, tested Nov 13, 2025). Imagery is Truvani's own product & lifestyle photography."
    },
    {
      "name": "Cleaner Than Rice",
      "tagline": "Leads with the brown-rice comparison",
      "frames": [
        { "label": "Hook", "prompt": "Split visual: brown rice vs protein scoop", "headline": "Your “clean” brown rice protein? Test it.", "headlineTheme": "dark" },
        { "label": "The claim", "prompt": "Stat card comparing arsenic levels" },
        { "label": "The proof", "prompt": "Light Labs results table" },
        { "label": "The context", "prompt": "What the numbers mean, plainly" },
        { "label": "The ask", "prompt": "Starter-kit offer frame", "headline": "Trust the label. Then trust the test." }
      ],
      "headlines": [
        "Your “clean” brown rice protein? Test it.",
        "Brown rice protein is often the worst offender for arsenic. We checked ours.",
        "“Plant-based” doesn't mean “clean.” We have the lab panel to prove ours is."
      ],
      "primaryText": "Brown-rice protein is one of the most common sources of dietary arsenic. So we sent ours to an independent lab. Here's the panel.",
      "destination": { "url": "shop.truvani.com", "cta": "Shop now", "offer": "72% OFF Protein Starter Kit" },
      "grounding": "Comparison figures are from Truvani's Light Labs panel and published dietary-arsenic ranges. No competitor is named."
    }
  ]
}
</script>

<div class="wrap">
  <header class="project" id="project"></header>
  <div class="eyebrow">Creative concept · toggle between ideas</div>
  <div class="concepts" id="concepts"></div>
  <div class="grid">
    <section>
      <div class="eyebrow col-label" id="preview-label">In-feed preview</div>
      <div class="toggles" id="toggles"></div>
      <div class="post" id="post"></div>
    </section>
    <section>
      <div class="board">
        <div class="eyebrow" id="board-label">Storyboard · tap to jump</div>
        <div class="frames-grid" id="frames-grid"></div>
      </div>
      <div class="copy" id="copy"></div>
    </section>
  </div>
  <footer id="footer"></footer>
</div>

<script>
/* ============================================================================
   RENDER — generic; no need to edit when swapping the DATA JSON above.
   ========================================================================== */
const esc = (s) => String(s == null ? "" : s).replace(/[&<>"']/g, c => (
  { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
const PLATFORMS = { instagram: "Instagram", facebook: "Facebook" };

let DATA;
try {
  DATA = JSON.parse(document.getElementById("review-data").textContent);
} catch (e) {
  document.querySelector(".wrap").innerHTML =
    '<div class="err"><b>Couldn\'t read the review data.</b><br/>The <code>#review-data</code> block must be valid JSON — double-quoted keys and strings, no comments, no trailing commas. Parser said: ' + esc(e.message) + '</div>';
  throw e;
}

function invalid(msg) {
  document.querySelector(".wrap").innerHTML =
    '<div class="err"><b>The review data is missing something.</b><br/>' + esc(msg) + '</div>';
  throw new Error(msg);
}
if (!DATA || !Array.isArray(DATA.concepts) || !DATA.concepts.length)
  invalid('"concepts" must be a non-empty array.');
DATA.concepts.forEach((c, i) => {
  if (!c || typeof c !== "object") invalid(`concepts[${i}] must be an object.`);
  if (!Array.isArray(c.frames) || !c.frames.length) invalid(`concepts[${i}].frames must be a non-empty array.`);
});

const state = { concept: 0, frame: 0, platform: null, handle: 0, headline: 0 };
const concept = () => DATA.concepts[state.concept];

// platforms restricted to the ones we can render; default to first valid
const platformList = () => (DATA.platforms || ["instagram"]).filter(p => PLATFORMS[p]);
state.platform = platformList()[0] || "instagram";

const heart = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>';
const comment = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 11.5a8.4 8.4 0 0 1-11.8 7.7L3 21l1.9-6.2A8.4 8.4 0 1 1 21 11.5z"/></svg>';
const share = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>';
const bookmark = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>';

function renderProject() {
  const p = DATA.project || {};
  const line = [p.brand, p.agency && `× ${p.agency}`].filter(Boolean).join(" ");
  document.getElementById("project").innerHTML =
    `<div class="eyebrow">Creative review${p.date ? " · " + esc(p.date) : ""}</div>
     <h1>${esc(line || "Ad creative")}</h1>${p.note ? `<div class="sub">${esc(p.note)}</div>` : ""}`;
  document.getElementById("footer").innerHTML =
    `Creative review${p.agency ? " · " + esc(p.agency) : ""} — concepts for approval. Nothing here is live until you pick.`;
}

function renderConcepts() {
  document.getElementById("concepts").innerHTML = DATA.concepts.map((c, i) => `
    <button class="concept" aria-pressed="${i === state.concept}" data-i="${i}">
      <div class="row1"><span class="num">${String(i + 1).padStart(2, "0")}</span>
        <span class="frames">${c.frames.length} frame${c.frames.length === 1 ? "" : "s"}</span></div>
      <div class="name">${esc(c.name)}</div>
      <div class="tag">${esc(c.tagline || "")}</div>
    </button>`).join("");
  document.querySelectorAll(".concept").forEach(b =>
    b.onclick = () => { state.concept = +b.dataset.i; state.frame = 0; state.handle = 0; state.headline = 0; renderAll(); });
}

function handles() {
  return concept().handles || [{
    name: DATA.project?.brand || "brand",
    partner: DATA.project?.agency ? "Paid partnership with " + DATA.project.agency.toLowerCase() : "Sponsored",
    initials: (DATA.project?.brand || "AD").slice(0, 2).toUpperCase()
  }];
}

function renderToggles() {
  const plats = platformList(), hs = handles();
  let html = "";
  if (plats.length > 1) {
    html += `<div class="seg" role="group">${plats.map(p =>
      `<button data-plat="${esc(p)}" aria-pressed="${p === state.platform}">${esc(PLATFORMS[p])}</button>`).join("")}</div>`;
  }
  if (hs.length > 1) {
    html += `<div class="seg" role="group"><span class="lbl">Handle</span>${hs.map((h, i) =>
      `<button data-handle="${i}" aria-pressed="${i === state.handle}">${esc(h.name)}</button>`).join("")}</div>`;
  }
  const el = document.getElementById("toggles");
  el.innerHTML = html;
  el.querySelectorAll("[data-plat]").forEach(b => b.onclick = () => { state.platform = b.dataset.plat; renderToggles(); renderPost(); });
  el.querySelectorAll("[data-handle]").forEach(b => b.onclick = () => { state.handle = +b.dataset.handle; renderToggles(); renderPost(); });
  document.getElementById("preview-label").textContent = (hs.length > 1 ? "Whitelisted ad · " : "") + "In-feed preview";
}

// Classify with the browser URL parser; tabs/newlines and backslashes can hide a remote URL.
function localImageSource(value) {
  if (typeof value !== "string") return "";
  const syntax = value.replace(/[\t\n\r]/g, "").replace(/\\/g, "/")
    .replace(/^[\u0000-\u0020]+|[\u0000-\u0020]+$/g, "");
  if (/^\/\//.test(syntax)) return "";
  try {
    const base = new URL(document.baseURI);
    const image = new URL(value, base);
    if (image.protocol === "data:" || (image.protocol === "file:" && !image.host)) return value;
    // Hosted relative assets stay on the review page's origin; absolute network URLs stay blocked.
    if (!/^[a-z][a-z0-9+.-]*:/i.test(syntax) && image.origin === base.origin) return value;
  } catch (_) { /* An invalid source falls back to the placeholder. */ }
  return "";
}

// placeholder underneath + image on top; a missing/broken image removes itself → placeholder shows
function frameVisual(f, phCls) {
  const ph = `<div class="${phCls}"><div class="plabel">${esc(f.label)}</div><div class="pprompt">${esc(f.prompt || "")}</div></div>`;
  // Only local/relative or data: image sources — block remote URLs so the page stays offline and cannot beacon on open.
  const localImg = localImageSource(f.image);
  const img = localImg ? `<img src="${esc(localImg)}" alt="${esc(f.label)}" onerror="this.remove()" />` : "";
  return ph + img;
}

function frameHTML(c, f) {
  const total = c.frames.length;
  const headlineText = state.frame === 0 ? (c.headlines?.[state.headline] || f.headline || "") : (f.headline || "");
  const theme = f.headlineTheme === "light" ? " light" : "";
  return `<div class="frame">
      ${frameVisual(f, "ph")}
      <span class="counter">${state.frame + 1}/${total}</span>
      ${headlineText ? `<div class="headline${theme}">${esc(headlineText)}</div>` : ""}
    </div>`;
}

function renderPost() {
  const c = concept(), f = c.frames[state.frame], h = handles()[state.handle] || handles()[0];
  const dest = c.destination || {};
  const top = `<div class="top">
      <div class="avatar">${h.initials ? esc(h.initials) : ""}</div>
      <div class="who"><div class="name">${esc(h.name)}</div><div class="partner">${esc(h.partner || "Sponsored")}</div></div>
      <div class="dots">···</div>
    </div>`;

  let chrome;
  if (state.platform === "facebook") {
    const domain = dest.url ? esc(dest.url) : "";
    const hl = c.headlines?.[state.headline] || f.headline || dest.offer || "";
    chrome = `<div class="fb-card">
        <div class="meta"><div class="dom">${domain}</div><div class="hl">${esc(hl)}</div></div>
        ${dest.cta ? `<div class="btn">${esc(dest.cta)}</div>` : ""}
      </div>
      <div class="fb-actions"><span>Like</span><span>Comment</span><span>Share</span></div>`;
  } else {
    chrome = `<div class="ig-cta"><span>${esc(dest.cta || "Learn more")}</span><span class="chev">›</span></div>
      <div class="ig-actions">${heart}${comment}${share}<span class="save">${bookmark}</span></div>
      ${c.likes ? `<div class="likes">${esc(c.likes)} likes</div>` : ""}
      <div class="caption"><span class="h">${esc(h.name)}</span> ${esc((c.primaryText || "").slice(0, 90))}<span class="more"> … more</span></div>`;
  }

  document.getElementById("post").innerHTML = top + frameHTML(c, f) + chrome;
  document.getElementById("board-label").textContent = `${c.name} · ${state.frame + 1}/${c.frames.length} · tap to jump`;
}

function renderBoard() {
  const c = concept();
  document.getElementById("frames-grid").innerHTML = c.frames.map((f, i) => `
    <button class="thumb" aria-current="${i === state.frame}" data-i="${i}">
      <div class="box">${frameVisual(f, "mini")}</div>
      <div class="cap"><span class="n">${String(i + 1).padStart(2, "0")}</span>${esc(f.label)}</div>
    </button>`).join("");
  document.querySelectorAll(".thumb").forEach(b =>
    b.onclick = () => { state.frame = +b.dataset.i; renderPost(); renderBoard(); });
}

function renderCopy() {
  const c = concept(), dest = c.destination || {};
  let html = "";
  if (c.headlines?.length) {
    html += `<div class="block"><div class="eyebrow">Headline — tap to preview</div>${c.headlines.map((h, i) =>
      `<button class="headline-opt" aria-pressed="${i === state.headline}" data-i="${i}">
        <span class="n">${String(i + 1).padStart(2, "0")}</span><span class="t">${esc(h)}</span></button>`).join("")}</div>`;
  }
  if (c.primaryText) html += `<div class="block"><div class="eyebrow">Primary text</div><div class="kv" style="margin-top:8px">${esc(c.primaryText)}</div></div>`;
  if (dest.url || dest.cta) {
    html += `<div class="block"><div class="eyebrow">Destination</div><div class="kv" style="margin-top:8px">
      ${dest.url ? `<span class="dest">${esc(dest.url)}</span><br/>` : ""}
      ${dest.cta ? `CTA: ${esc(dest.cta)}` : ""}${dest.offer ? ` → ${esc(dest.offer)}` : ""}</div></div>`;
  }
  if (c.rollout?.steps?.length) {
    html += `<div class="block"><div class="eyebrow">${esc(c.rollout.title || "How it runs")}</div>
      <ol class="steps">${c.rollout.steps.map((s, i) => `<li><span class="i">${i + 1}</span><span>${esc(s)}</span></li>`).join("")}</ol></div>`;
  }
  if (c.grounding) html += `<div class="block"><div class="eyebrow">Live data · real assets</div><div class="grounding">${esc(c.grounding)}</div></div>`;
  const el = document.getElementById("copy");
  el.innerHTML = html;
  el.querySelectorAll(".headline-opt").forEach(b =>
    b.onclick = () => { state.headline = +b.dataset.i; state.frame = 0; renderPost(); renderBoard(); renderCopy(); });
}

function renderAll() { renderConcepts(); renderToggles(); renderPost(); renderBoard(); renderCopy(); }
renderProject();
renderAll();
</script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Corey Haines

Publisher

Corey Haines (Community)

Source

coreyhaines31/marketingskills · skills/ad-creative · commit 96798cf

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Corey Haines or Corey Haines.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download ad-creative.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Corey Haines

Ad Creative

Before Starting

1. Platform & Format

2. Product & Offer

3. Audience & Intent

4. Performance Data (if iterating)

5. Constraints

How This Skill Works

Mode 1: Generate from Scratch

Mode 2: Iterate from Performance Data

Mode 3: Scaled Static Batches (Grounded)

Mode 4: Creative Strategy Loop

Grounded Inputs

Platform Specs

Google Ads (Responsive Search Ads)

Meta Ads (Facebook/Instagram)

LinkedIn Ads

TikTok Ads

Twitter/X Ads

Generating Ad Visuals

Generating Ad Copy

Step 1: Define Your Angles

Step 2: Generate Variations per Angle

Step 3: Validate Against Specs

Step 4: Organize for Upload

Iterating from Performance Data

Step 1: Analyze Winners

Step 2: Analyze Losers

Step 3: Generate New Variations

Step 4: Document the Iteration

Writing Quality Standards

Headlines That Click

Test Hypotheses That Can Lose

No AI Tells

Descriptions That Convert

Output Formats

Standard Output

Bulk CSV Output

Static Batch Output (Mode 3)

Creative Review Page (client / stakeholder approval)

Iteration Report

Batch Generation Workflow

1. Break into sub-tasks

2. Generate in waves

3. Quality filter

Common Mistakes

Tool Integrations

Workflow: Pull Data, Analyze, Generate

Related Skills

Files

assets/creative-review-template.html

Requirements and compatibility

Security

Attribution and licence

Related skills

Copywriting

Popups

Content Strategy

Attribution

Reverse Engineer Marketing

Influencer Marketing

Download ZIP